From 6222e3f8af1bf4fad2466a9bf88c3b3159478a86 Mon Sep 17 00:00:00 2001 From: molvqingtai Date: Sat, 9 Nov 2024 05:57:00 +0800 Subject: [PATCH] perf: theme mode is compatible with website themes by default --- src/app/content/App.tsx | 17 ++++++++++++----- src/app/content/views/AppButton/index.tsx | 5 ++--- src/app/content/views/Setup/index.tsx | 4 ++-- src/app/options/components/ProfileForm.tsx | 4 ++-- src/domain/Toast.ts | 2 +- src/utils/checkDarkMode.ts | 11 +++++++++++ src/utils/checkSystemDarkMode.ts | 3 --- src/utils/index.ts | 2 +- 8 files changed, 31 insertions(+), 17 deletions(-) create mode 100644 src/utils/checkDarkMode.ts delete mode 100644 src/utils/checkSystemDarkMode.ts diff --git a/src/app/content/App.tsx b/src/app/content/App.tsx index 7ff010a..0d51785 100644 --- a/src/app/content/App.tsx +++ b/src/app/content/App.tsx @@ -14,7 +14,7 @@ import { Toaster } from 'sonner' import DanmakuContainer from './components/DanmakuContainer' import DanmakuDomain from '@/domain/Danmaku' import AppStatusDomain from '@/domain/AppStatus' -import { cn } from '@/utils' +import { checkDarkMode, cn } from '@/utils' /** * Fix requestAnimationFrame error in jest @@ -52,8 +52,6 @@ export default function App() { } }, [userInfoSetFinished, messageListLoadFinished]) - const danmakuContainerRef = useRef(null) - useEffect(() => { danmakuIsEnabled && send(danmakuDomain.command.MountCommand(danmakuContainerRef.current!)) return () => { @@ -61,8 +59,17 @@ export default function App() { } }, [danmakuIsEnabled]) + const themeMode = + userInfo?.themeMode === 'system' + ? checkDarkMode() + ? 'dark' + : 'light' + : (userInfo?.themeMode ?? (checkDarkMode() ? 'dark' : 'light')) + + const danmakuContainerRef = useRef(null) + return ( -
+
{appStatusLoadIsFinished && ( <> @@ -72,7 +79,7 @@ export default function App() { {notUserInfo && } = ({ className }) => { const DayLogo = [LogoIcon0, LogoIcon1, LogoIcon2, LogoIcon3, LogoIcon4, LogoIcon5, LogoIcon6][getDay(Date())] - const isDarkMode = - userInfo?.themeMode === 'dark' ? true : userInfo?.themeMode === 'light' ? false : checkSystemDarkMode() + const isDarkMode = userInfo?.themeMode === 'dark' ? true : userInfo?.themeMode === 'light' ? false : checkDarkMode() const [menuOpen, setMenuOpen] = useState(false) diff --git a/src/app/content/views/Setup/index.tsx b/src/app/content/views/Setup/index.tsx index 73ea209..c2cedf7 100644 --- a/src/app/content/views/Setup/index.tsx +++ b/src/app/content/views/Setup/index.tsx @@ -2,7 +2,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/Avatar' import { MAX_AVATAR_SIZE } from '@/constants/config' import MessageListDomain, { Message, MessageType } from '@/domain/MessageList' import UserInfoDomain, { UserInfo } from '@/domain/UserInfo' -import { checkSystemDarkMode, generateRandomAvatar, generateRandomName } from '@/utils' +import { generateRandomAvatar, generateRandomName } from '@/utils' import { UserIcon } from 'lucide-react' import { nanoid } from 'nanoid' import { FC, useEffect, useState } from 'react' @@ -39,7 +39,7 @@ const generateUserInfo = async (): Promise => { name: generateRandomName(), avatar: await generateRandomAvatar(MAX_AVATAR_SIZE), createTime: Date.now(), - themeMode: checkSystemDarkMode() ? 'dark' : 'system', + themeMode: 'system', danmakuEnabled: true, notificationEnabled: true, notificationType: 'all' diff --git a/src/app/options/components/ProfileForm.tsx b/src/app/options/components/ProfileForm.tsx index f3bb1b0..48d7f19 100644 --- a/src/app/options/components/ProfileForm.tsx +++ b/src/app/options/components/ProfileForm.tsx @@ -9,7 +9,7 @@ import { Button } from '@/components/ui/Button' import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/Form' import { Input } from '@/components/ui/Input' import UserInfoDomain, { type UserInfo } from '@/domain/UserInfo' -import { checkSystemDarkMode, cn, generateRandomAvatar } from '@/utils' +import { cn, generateRandomAvatar } from '@/utils' import { RadioGroup, RadioGroupItem } from '@/components/ui/RadioGroup' import { Label } from '@/components/ui/Label' import { RefreshCcwIcon } from 'lucide-react' @@ -24,7 +24,7 @@ const defaultUserInfo: UserInfo = { name: '', avatar: '', createTime: Date.now(), - themeMode: checkSystemDarkMode() ? 'dark' : 'system', + themeMode: 'system', danmakuEnabled: true, notificationEnabled: true, notificationType: 'all' diff --git a/src/domain/Toast.ts b/src/domain/Toast.ts index 32c1abb..fe43f11 100644 --- a/src/domain/Toast.ts +++ b/src/domain/Toast.ts @@ -13,7 +13,7 @@ const ToastDomain = Remesh.domain({ name: 'Toast.OnRoomSelfJoinRoomEffect', impl: ({ fromEvent }) => { const onRoomJoin$ = fromEvent(roomDomain.event.SelfJoinRoomEvent).pipe( - map(() => toastModule.command.LoadingCommand('Connected to the chat.')) + map(() => toastModule.command.LoadingCommand({ message: 'Connected to the chat.', duration: 3000 })) ) return onRoomJoin$ diff --git a/src/utils/checkDarkMode.ts b/src/utils/checkDarkMode.ts new file mode 100644 index 0000000..8dd91f4 --- /dev/null +++ b/src/utils/checkDarkMode.ts @@ -0,0 +1,11 @@ +const checkDarkMode = () => { + const colorScheme = document.documentElement.style.getPropertyValue('color-scheme').trim() + + if (colorScheme === 'dark') { + return true // Prefer the website's color-scheme property value + } + + return window.matchMedia('(prefers-color-scheme: dark)').matches // Otherwise, check the system theme +} + +export default checkDarkMode diff --git a/src/utils/checkSystemDarkMode.ts b/src/utils/checkSystemDarkMode.ts deleted file mode 100644 index ac1f58a..0000000 --- a/src/utils/checkSystemDarkMode.ts +++ /dev/null @@ -1,3 +0,0 @@ -const checkSystemDarkMode = () => window.matchMedia('(prefers-color-scheme: dark)').matches - -export default checkSystemDarkMode diff --git a/src/utils/index.ts b/src/utils/index.ts index d5e36d2..a52912f 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -4,7 +4,7 @@ export { default as createElement } from './createElement' export { default as getSiteInfo } from './getSiteInfo' export { default as compressImage } from './compressImage' export { default as isNullish } from './isNullish' -export { default as checkSystemDarkMode } from './checkSystemDarkMode' +export { default as checkDarkMode } from './checkDarkMode' export { default as stringToHex } from './stringToHex' export { default as debounce } from './debounce' export { default as throttle } from './throttle'