Merge branch 'develop'

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,29 +52,48 @@ export default function App() {
     }
   }, [userInfoSetFinished, messageListLoadFinished])
 
-  const danmakuContainerRef = useRef<HTMLDivElement>(null)
-
   useEffect(() => {
     danmakuIsEnabled && send(danmakuDomain.command.MountCommand(danmakuContainerRef.current!))
     return () => {
       danmakuIsEnabled && send(danmakuDomain.command.UnmountCommand())
     }
   }, [danmakuIsEnabled])
 
-  return (
-    appStatusLoadIsFinished && (
-      <div id="app" className={cn('contents', userInfo?.themeMode)}>
-        <AppMain>
-          <Header />
-          <Main />
-          <Footer />
-          {notUserInfo && <Setup></Setup>}
-          <Toaster richColors offset="70px" visibleToasts={1} position="top-center"></Toaster>
-        </AppMain>
-        <AppButton></AppButton>
+  const themeMode =
+    userInfo?.themeMode === 'system'
+      ? checkDarkMode()
+        ? 'dark'
+        : 'light'
+      : (userInfo?.themeMode ?? (checkDarkMode() ? 'dark' : 'light'))
 
-        <DanmakuContainer ref={danmakuContainerRef} />
-      </div>
-    )
+  const danmakuContainerRef = useRef<HTMLDivElement>(null)
+
+  return (
+    <div id="app" className={cn('contents', themeMode)}>
+      {appStatusLoadIsFinished && (
+        <>
+          <AppMain>
+            <Header />
+            <Main />
+            <Footer />
+            {notUserInfo && <Setup></Setup>}
+            <Toaster
+              richColors
+              theme={themeMode}
+              offset="70px"
+              visibleToasts={1}
+              toastOptions={{
+                classNames: {
+                  toast: 'dark:bg-slate-950 border dark:border-slate-600'
+                }
+              }}
+              position="top-center"
+            ></Toaster>
+          </AppMain>
+          <AppButton></AppButton>
+        </>
+      )}
+      <DanmakuContainer ref={danmakuContainerRef} />
+    </div>
   )
 }

src/app/content/index.tsx

@@ -13,10 +13,10 @@ import { NotificationImpl } from '@/domain/impls/Notification'
 import { ToastImpl } from '@/domain/impls/Toast'
 // import { PeerRoomImpl } from '@/domain/impls/PeerRoom'
 import { PeerRoomImpl } from '@/domain/impls/PeerRoom2'
-import '@/assets/styles/tailwind.css'
 // Remove import after merging: https://github.com/emilkowalski/sonner/pull/508
 import '@/assets/styles/sonner.css'
 import '@/assets/styles/overlay.css'
+import '@/assets/styles/tailwind.css'
 import NotificationDomain from '@/domain/Notification'
 import { createElement } from '@/utils'
 

src/app/content/views/AppButton/index.tsx

@@ -7,7 +7,7 @@ import { Button } from '@/components/ui/Button'
 import { EVENT } from '@/constants/event'
 import UserInfoDomain from '@/domain/UserInfo'
 import useTriggerAway from '@/hooks/useTriggerAway'
-import { checkSystemDarkMode, cn } from '@/utils'
+import { checkDarkMode, cn } from '@/utils'
 import LogoIcon0 from '@/assets/images/logo-0.svg'
 import LogoIcon1 from '@/assets/images/logo-1.svg'
 import LogoIcon2 from '@/assets/images/logo-2.svg'
@@ -36,8 +36,7 @@ const AppButton: FC<AppButtonProps> = ({ 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)
 
@@ -107,7 +106,7 @@ const AppButton: FC<AppButtonProps> = ({ className }) => {
             <Button
               onClick={handleSwitchTheme}
               variant="outline"
-              className="relative size-10 overflow-hidden rounded-full p-0 shadow"
+              className="relative size-10 overflow-hidden rounded-full p-0 shadow dark:border-slate-600"
             >
               <div
                 className={cn(
@@ -121,10 +120,18 @@ const AppButton: FC<AppButtonProps> = ({ className }) => {
               </div>
             </Button>
 
-            <Button onClick={handleOpenOptionsPage} variant="outline" className="size-10 rounded-full p-0 shadow">
+            <Button
+              onClick={handleOpenOptionsPage}
+              variant="outline"
+              className="size-10 rounded-full p-0 shadow dark:border-slate-600"
+            >
               <SettingsIcon size={20} />
             </Button>
-            <Button ref={appButtonRef} variant="outline" className="size-10 cursor-grab rounded-full p-0 shadow">
+            <Button
+              ref={appButtonRef}
+              variant="outline"
+              className="size-10 cursor-grab rounded-full p-0 shadow dark:border-slate-600"
+            >
               <HandIcon size={20} />
             </Button>
           </motion.div>

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<UserInfo> => {
     name: generateRandomName(),
     avatar: await generateRandomAvatar(MAX_AVATAR_SIZE),
     createTime: Date.now(),
-    themeMode: checkSystemDarkMode() ? 'dark' : 'system',
+    themeMode: 'system',
     danmakuEnabled: true,
     notificationEnabled: true,
     notificationType: 'all'

src/app/options/App.tsx

@@ -16,7 +16,15 @@ function App() {
         <VersionLink></VersionLink>
         <Main>
           <ProfileForm></ProfileForm>
-          <Toaster richColors position="top-center" />
+          <Toaster
+            richColors
+            position="top-center"
+            toastOptions={{
+              classNames: {
+                toast: 'dark:bg-slate-950 border dark:border-slate-600'
+              }
+            }}
+          />
         </Main>
         <BadgeList></BadgeList>
       </Layout>

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'

src/domain/AppStatus.ts

@@ -40,7 +40,7 @@ const AppStatusDomain = Remesh.domain({
     })
 
     const StatusState = domain.state<AppStatus>({
-      name: 'AppStatus.OpenState',
+      name: 'AppStatus.StatusState',
       default: defaultStatusState
     })