diff --git a/.gitignore b/.gitignore
index 5561b85..78a73c3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,4 +14,5 @@ web-ext.config.ts
 *.pem
 *.xpi
 *.zip
+.idea
 
diff --git a/src/app/content/App.tsx b/src/app/content/App.tsx
index f57be61..b00ef3e 100644
--- a/src/app/content/App.tsx
+++ b/src/app/content/App.tsx
@@ -38,6 +38,7 @@ export default function App() {
   const appStatusDomain = useRemeshDomain(AppStatusDomain())
   const appStatusLoadIsFinished = useRemeshQuery(appStatusDomain.query.StatusLoadIsFinishedQuery())
 
+  const userInfo = useRemeshQuery(userInfoDomain.query.UserInfoQuery())
   const notUserInfo = userInfoLoadFinished && !userInfoSetFinished
 
   useEffect(() => {
@@ -63,7 +64,7 @@ export default function App() {
   return (
     appStatusLoadIsFinished && (
       <>
-        <AppMain>
+        <AppMain className={userInfo?.themeMode}>
           <Header />
           <Main />
           <Footer />
@@ -76,9 +77,9 @@ export default function App() {
           </AnimatePresence>
           <Toaster richColors offset="70px" visibleToasts={1} position="top-center"></Toaster>
         </AppMain>
-        <AppButton></AppButton>
+        <AppButton className={userInfo?.themeMode}></AppButton>
 
-        <DanmakuContainer ref={danmakuContainerRef} />
+        <DanmakuContainer ref={danmakuContainerRef} className={userInfo?.themeMode} />
       </>
     )
   )
diff --git a/src/app/content/components/DanmakuMessage.tsx b/src/app/content/components/DanmakuMessage.tsx
index 0eb6431..b62a27c 100644
--- a/src/app/content/components/DanmakuMessage.tsx
+++ b/src/app/content/components/DanmakuMessage.tsx
@@ -20,7 +20,7 @@ const DanmakuMessage: FC<PromptItemProps> = ({ data, className, onClick, onMouse
       onMouseLeave={onMouseLeave}
       onClick={onClick}
       className={cn(
-        'flex justify-center pointer-events-auto visible gap-x-2 border px-2.5 py-0.5  rounded-full bg-primary/30 text-base font-medium text-white backdrop-blur-md',
+        'flex justify-center pointer-events-auto visible gap-x-2 border px-2.5 py-0.5  rounded-full bg-primary/30 text-base font-medium text-white dark:bg-slate-800 dark:text-slate-50 backdrop-blur-md',
         className
       )}
     >
diff --git a/src/app/content/components/EmojiButton.tsx b/src/app/content/components/EmojiButton.tsx
index 3a10920..10cc39f 100644
--- a/src/app/content/components/EmojiButton.tsx
+++ b/src/app/content/components/EmojiButton.tsx
@@ -30,7 +30,7 @@ const EmojiButton: FC<EmojiButtonProps> = ({ onSelect }) => {
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
-        <Button variant="ghost" size="icon">
+        <Button variant="ghost" size="icon" className="dark:text-white">
           <SmileIcon size={20} />
         </Button>
       </PopoverTrigger>
diff --git a/src/app/content/components/LikeButton.tsx b/src/app/content/components/LikeButton.tsx
index f958dde..bd75c25 100644
--- a/src/app/content/components/LikeButton.tsx
+++ b/src/app/content/components/LikeButton.tsx
@@ -33,7 +33,7 @@ const LikeButton: FC<LikeButtonProps> & { Icon: FC<LikeButtonIconProps> } = ({
       onClick={handleClick}
       variant="secondary"
       className={cn(
-        'grid items-center overflow-hidden rounded-full leading-none transition-all select-none',
+        'grid items-center overflow-hidden rounded-full leading-none transition-all select-none dark:bg-slate-200',
         checked ? 'text-orange-500' : 'text-slate-500',
         count ? 'grid-cols-[auto_1fr] gap-x-1' : 'grid-cols-[auto_0fr] gap-x-0'
       )}
diff --git a/src/app/content/components/MessageInput.tsx b/src/app/content/components/MessageInput.tsx
index b523a58..47df383 100644
--- a/src/app/content/components/MessageInput.tsx
+++ b/src/app/content/components/MessageInput.tsx
@@ -45,7 +45,7 @@ const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
             onKeyDown={onKeyDown}
             autoFocus={autoFocus}
             maxLength={maxLength}
-            className="box-border resize-none whitespace-pre-wrap break-words border-none bg-gray-50 pb-5 [field-sizing:content] [word-break:break-word] focus:ring-0 focus:ring-offset-0"
+            className="box-border resize-none whitespace-pre-wrap break-words border-none bg-gray-50 pb-5 [field-sizing:content] [word-break:break-word] focus:ring-0 focus:ring-offset-0 dark:bg-slate-800"
             rows={2}
             value={value}
             spellCheck={false}
@@ -56,7 +56,7 @@ const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(
             disabled={disabled}
           />
         </ScrollArea>
-        <div className="absolute bottom-1 right-3 rounded-lg text-xs text-slate-400">
+        <div className="absolute bottom-1 right-3 rounded-lg text-xs text-slate-400 dark:text-slate-50">
           {value?.length ?? 0}/{maxLength}
         </div>
       </div>
diff --git a/src/app/content/components/MessageItem.tsx b/src/app/content/components/MessageItem.tsx
index 4ee4638..bb0b0a7 100644
--- a/src/app/content/components/MessageItem.tsx
+++ b/src/app/content/components/MessageItem.tsx
@@ -46,7 +46,10 @@ const MessageItem: FC<MessageItemProps> = (props) => {
   return (
     <div
       data-index={props.index}
-      className={cn('box-border grid grid-cols-[auto_1fr] gap-x-2 px-4  first:pt-4 last:pb-4', props.className)}
+      className={cn(
+        'box-border grid grid-cols-[auto_1fr] gap-x-2 px-4  first:pt-4 last:pb-4 dark:text-slate-50',
+        props.className
+      )}
     >
       <Avatar>
         <AvatarImage src={props.data.userAvatar} className="size-full" alt="avatar" />
@@ -54,14 +57,14 @@ const MessageItem: FC<MessageItemProps> = (props) => {
       </Avatar>
       <div className="overflow-hidden">
         <div className="grid grid-cols-[1fr_auto] items-center gap-x-2 leading-none">
-          <div className="truncate text-sm font-semibold text-slate-600">{props.data.username}</div>
-          <FormatDate className="text-xs text-slate-400" date={props.data.date}></FormatDate>
+          <div className="truncate text-sm font-semibold text-slate-600 dark:text-slate-50">{props.data.username}</div>
+          <FormatDate className="text-xs text-slate-400 dark:text-slate-100" date={props.data.date}></FormatDate>
         </div>
         <div>
           <div className="pb-2">
             <Markdown>{content}</Markdown>
           </div>
-          <div className="grid grid-flow-col justify-end gap-x-2 leading-none">
+          <div className="grid grid-flow-col justify-end gap-x-2 leading-none dark:text-slate-600">
             <LikeButton
               checked={props.like}
               onChange={(checked) => handleLikeChange(checked)}
diff --git a/src/app/content/components/PromptItem.tsx b/src/app/content/components/PromptItem.tsx
index 7ae1518..d64621a 100644
--- a/src/app/content/components/PromptItem.tsx
+++ b/src/app/content/components/PromptItem.tsx
@@ -12,8 +12,11 @@ export interface PromptItemProps {
 
 const PromptItem: FC<PromptItemProps> = ({ data, className }) => {
   return (
-    <div className={cn('flex justify-center py-1 px-4', className)}>
-      <Badge variant="secondary" className="gap-x-2 rounded-full px-2 font-medium text-slate-400">
+    <div className={cn('flex justify-center py-1 px-4 ', className)}>
+      <Badge
+        variant="secondary"
+        className="gap-x-2 rounded-full px-2 font-medium text-slate-400 dark:bg-slate-600 dark:text-slate-50"
+      >
         <Avatar className="size-4">
           <AvatarImage src={data.userAvatar} className="size-full" alt="avatar" />
           <AvatarFallback>{data.username.at(0)}</AvatarFallback>
diff --git a/src/app/content/views/AppButton/index.tsx b/src/app/content/views/AppButton/index.tsx
index 5cb405e..b9c8084 100644
--- a/src/app/content/views/AppButton/index.tsx
+++ b/src/app/content/views/AppButton/index.tsx
@@ -8,7 +8,6 @@ import { EVENT } from '@/constants/event'
 import UserInfoDomain from '@/domain/UserInfo'
 import useTriggerAway from '@/hooks/useTriggerAway'
 import { checkSystemDarkMode, cn } from '@/utils'
-import ToastDomain from '@/domain/Toast'
 import LogoIcon0 from '@/assets/images/logo-0.svg'
 import LogoIcon1 from '@/assets/images/logo-1.svg'
 import LogoIcon2 from '@/assets/images/logo-2.svg'
@@ -20,16 +19,18 @@ import AppStatusDomain from '@/domain/AppStatus'
 import { getDay } from 'date-fns'
 import { messenger } from '@/messenger'
 import useDarg from '@/hooks/useDarg'
-import { useWindowSize } from 'react-use'
 
-const AppButton: FC = () => {
+export interface AppButtonProps {
+  className?: string
+}
+
+const AppButton: FC<AppButtonProps> = ({ className }) => {
   const send = useRemeshSend()
   const appStatusDomain = useRemeshDomain(AppStatusDomain())
   const appOpenStatus = useRemeshQuery(appStatusDomain.query.OpenQuery())
   const hasUnreadQuery = useRemeshQuery(appStatusDomain.query.HasUnreadQuery())
   const userInfoDomain = useRemeshDomain(UserInfoDomain())
   const userInfo = useRemeshQuery(userInfoDomain.query.UserInfoQuery())
-  const toastDomain = useRemeshDomain(ToastDomain())
   const appPosition = useRemeshQuery(appStatusDomain.query.PositionQuery())
 
   const DayLogo = [LogoIcon0, LogoIcon1, LogoIcon2, LogoIcon3, LogoIcon4, LogoIcon5, LogoIcon6][getDay(Date())]
@@ -73,7 +74,6 @@ const AppButton: FC = () => {
 
   const handleSwitchTheme = () => {
     if (userInfo) {
-      send(toastDomain.command.WarningCommand('Developer is too lazy~'))
       send(userInfoDomain.command.UpdateUserInfoCommand({ ...userInfo, themeMode: isDarkMode ? 'light' : 'dark' }))
     } else {
       handleOpenOptionsPage()
@@ -91,7 +91,7 @@ const AppButton: FC = () => {
   return (
     <div
       ref={appMenuRef}
-      className="fixed bottom-5 right-5 z-infinity grid w-min select-none justify-center gap-y-3"
+      className={cn('fixed bottom-5 right-5 z-infinity grid w-min select-none justify-center gap-y-3', className)}
       style={{
         left: `calc(${appPosition.x}px)`,
         bottom: `calc(100vh - ${appPosition.y}px)`,
diff --git a/src/app/content/views/AppMain/index.tsx b/src/app/content/views/AppMain/index.tsx
index 8469ec3..9254a96 100644
--- a/src/app/content/views/AppMain/index.tsx
+++ b/src/app/content/views/AppMain/index.tsx
@@ -8,9 +8,10 @@ import { useWindowSize } from 'react-use'
 
 export interface AppMainProps {
   children?: ReactNode
+  className?: string
 }
 
-const AppMain: FC<AppMainProps> = ({ children }) => {
+const AppMain: FC<AppMainProps> = ({ children, className }) => {
   const appStatusDomain = useRemeshDomain(AppStatusDomain())
   const appOpenStatus = useRemeshQuery(appStatusDomain.query.OpenQuery())
   const { x, y } = useRemeshQuery(appStatusDomain.query.PositionQuery())
@@ -44,7 +45,8 @@ const AppMain: FC<AppMainProps> = ({ children }) => {
             bottom: `calc(100vh - ${y}px + 22px)`
           }}
           className={cn(
-            'fixed inset-y-10 right-10 z-infinity mb-0 mt-auto box-border grid max-h-[min(calc(100vh_-60px),_1000px)] grid-flow-col grid-rows-[auto_1fr_auto] rounded-xl bg-slate-50 font-sans shadow-2xl',
+            `fixed inset-y-10 right-10 z-infinity mb-0 mt-auto box-border grid max-h-[min(calc(100vh_-60px),_1000px)] grid-flow-col grid-rows-[auto_1fr_auto] rounded-xl bg-slate-50 dark:bg-slate-950 font-sans shadow-2xl`,
+            className,
             { 'transition-transform': isAnimationComplete }
           )}
         >
@@ -52,7 +54,7 @@ const AppMain: FC<AppMainProps> = ({ children }) => {
           <div
             ref={setRef}
             className={cn(
-              'absolute inset-y-3 z-20 w-1 cursor-ew-resize rounded-xl bg-slate-100 opacity-0 shadow transition-opacity duration-200 ease-in hover:opacity-100',
+              'absolute inset-y-3 z-infinity w-1 dark:bg-slate-500 cursor-ew-resize rounded-xl bg-slate-100 opacity-0 shadow transition-opacity duration-200 ease-in hover:opacity-100',
               isOnRightSide ? '-left-0.5' : '-right-0.5'
             )}
           ></div>
diff --git a/src/app/content/views/Footer/index.tsx b/src/app/content/views/Footer/index.tsx
index 86fc931..58dfef8 100644
--- a/src/app/content/views/Footer/index.tsx
+++ b/src/app/content/views/Footer/index.tsx
@@ -243,7 +243,7 @@ const Footer: FC = () => {
   const root = document.querySelector(__NAME__)?.shadowRoot
 
   return (
-    <div className="relative z-10 grid gap-y-2 px-4 pb-4 pt-2 before:pointer-events-none before:absolute before:inset-x-4 before:-top-2 before:h-2 before:bg-gradient-to-t before:from-slate-50 before:from-30% before:to-transparent">
+    <div className="relative z-10 grid gap-y-2 rounded-b-xl px-4 pb-4 pt-2 before:pointer-events-none before:absolute before:inset-x-4 before:-top-2 before:h-2 before:bg-gradient-to-t before:from-slate-50 before:from-30% before:to-transparent dark:bg-slate-950">
       <Presence present={autoCompleteListShow}>
         <Portal
           container={root}
diff --git a/src/app/content/views/Header/index.tsx b/src/app/content/views/Header/index.tsx
index 9df1414..443bcaf 100644
--- a/src/app/content/views/Header/index.tsx
+++ b/src/app/content/views/Header/index.tsx
@@ -18,8 +18,8 @@ const Header: FC = () => {
   const [scrollParentRef, setScrollParentRef] = useState<HTMLDivElement | null>(null)
 
   return (
-    <div className="z-10 grid h-12 grid-flow-col grid-cols-[theme('spacing.20')_auto_theme('spacing.20')] items-center justify-between rounded-t-xl bg-white px-4 backdrop-blur-lg">
-      <Avatar className="size-8">
+    <div className="z-10 grid h-12 grid-flow-col grid-cols-[theme('spacing.20')_auto_theme('spacing.20')] items-center justify-between rounded-t-xl bg-white px-4 backdrop-blur-lg dark:bg-slate-950">
+      <Avatar className="size-8 dark:text-slate-50">
         <AvatarImage src={siteInfo.icon} alt="favicon" />
         <AvatarFallback>
           <Globe2Icon size="100%" className="text-gray-400" />
@@ -28,7 +28,7 @@ const Header: FC = () => {
       <HoverCard>
         <HoverCardTrigger asChild>
           <Button className="overflow-hidden p-2" variant="link">
-            <span className="truncate text-lg font-semibold text-slate-600">
+            <span className="truncate text-lg font-semibold text-slate-600 dark:text-slate-50">
               {siteInfo.hostname.replace(/^www\./i, '')}
             </span>
           </Button>
@@ -68,7 +68,7 @@ const Header: FC = () => {
                   )}
                 ></span>
               </span>
-              <span>ONLINE {onlineCount > 99 ? '99+' : onlineCount}</span>
+              <span className="dark:text-slate-50">ONLINE {onlineCount > 99 ? '99+' : onlineCount}</span>
             </div>
           </Button>
         </HoverCardTrigger>
diff --git a/src/app/options/App.tsx b/src/app/options/App.tsx
index fe049e8..87d6036 100644
--- a/src/app/options/App.tsx
+++ b/src/app/options/App.tsx
@@ -4,17 +4,23 @@ import ProfileForm from './components/ProfileForm'
 import BadgeList from './components/BadgeList'
 import Layout from './components/Layout'
 import VersionLink from './components/VersionLink'
+import { useRemeshDomain, useRemeshQuery } from 'remesh-react'
+import UserInfoDomain from '@/domain/UserInfo'
 
 function App() {
+  const userInfoDomain = useRemeshDomain(UserInfoDomain())
+  const userInfo = useRemeshQuery(userInfoDomain.query.UserInfoQuery())
   return (
-    <Layout>
-      <VersionLink></VersionLink>
-      <Main>
-        <ProfileForm></ProfileForm>
-        <Toaster richColors position="top-center" />
-      </Main>
-      <BadgeList></BadgeList>
-    </Layout>
+    <div className={userInfo?.themeMode}>
+      <Layout>
+        <VersionLink></VersionLink>
+        <Main>
+          <ProfileForm></ProfileForm>
+          <Toaster richColors position="top-center" />
+        </Main>
+        <BadgeList></BadgeList>
+      </Layout>
+    </div>
   )
 }
 
diff --git a/src/app/options/components/Layout.tsx b/src/app/options/components/Layout.tsx
index 0d93a5a..c5b99d2 100644
--- a/src/app/options/components/Layout.tsx
+++ b/src/app/options/components/Layout.tsx
@@ -7,7 +7,7 @@ export interface LayoutProps {
 
 const Layout: FC<LayoutProps> = ({ children }) => {
   return (
-    <div className="h-screen w-screen bg-gray-50 bg-[url(@/assets/images/texture.png)] font-sans">
+    <div className={`h-screen w-screen bg-gray-50 bg-[url(@/assets/images/texture.png)] font-sans dark:bg-slate-950`}>
       <div className="fixed left-0 top-0 h-full w-screen overflow-hidden">
         <Meteors number={30} />
       </div>
diff --git a/src/app/options/components/Main.tsx b/src/app/options/components/Main.tsx
index 979abb7..f150469 100644
--- a/src/app/options/components/Main.tsx
+++ b/src/app/options/components/Main.tsx
@@ -7,7 +7,7 @@ export interface MainProps {
 const Main: FC<MainProps> = ({ children }) => {
   return (
     <main className="grid min-h-screen min-w-screen items-center justify-center">
-      <div className="relative rounded-xl bg-slate-50 shadow-lg">{children}</div>
+      <div className="relative rounded-xl bg-slate-50 shadow-lg dark:bg-slate-900 dark:text-slate-50">{children}</div>
     </main>
   )
 }
diff --git a/src/app/options/components/ProfileForm.tsx b/src/app/options/components/ProfileForm.tsx
index d2136f5..eb7b13a 100644
--- a/src/app/options/components/ProfileForm.tsx
+++ b/src/app/options/components/ProfileForm.tsx
@@ -3,7 +3,7 @@ import { useForm } from 'react-hook-form'
 import { valibotResolver } from '@hookform/resolvers/valibot'
 import { useRemeshDomain, useRemeshQuery, useRemeshSend } from 'remesh-react'
 import { nanoid } from 'nanoid'
-import { useEffect } from 'react'
+import { ReactNode, useEffect, type FC } from 'react'
 import AvatarSelect from './AvatarSelect'
 import { Button } from '@/components/ui/Button'
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/Form'
@@ -54,8 +54,7 @@ const formSchema = v.object({
   notificationEnabled: v.boolean(),
   notificationType: v.pipe(v.string(), v.union([v.literal('all'), v.literal('at')], 'Please select notification type.'))
 })
-
-const ProfileForm = () => {
+const ProfileForm: FC = () => {
   const send = useRemeshSend()
   const toast = ToastImpl.value
 
@@ -101,7 +100,7 @@ const ProfileForm = () => {
           control={form.control}
           name="avatar"
           render={({ field }) => (
-            <FormItem className="absolute inset-x-1 top-0 mx-auto grid w-fit -translate-y-1/3  justify-items-center">
+            <FormItem className="absolute inset-x-1 top-0 mx-auto grid w-fit -translate-y-1/3 justify-items-center">
               <FormControl>
                 <div className="flex flex-col items-center gap-2">
                   <BlurFade key={form.getValues().avatar} duration={0.1}>
diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx
index 7e07954..99855db 100644
--- a/src/components/Markdown.tsx
+++ b/src/components/Markdown.tsx
@@ -113,7 +113,7 @@ const Markdown: FC<MarkdownProps> = ({ children = '', className }) => {
         )
       }}
       remarkPlugins={[remarkGfm, remarkBreaks]}
-      className={cn(className, 'prose prose-sm prose-slate break-words')}
+      className={cn(className, 'prose prose-sm prose-slate break-words dark:text-slate-400')}
     >
       {children}
     </ReactMarkdown>
diff --git a/src/components/ui/Avatar.tsx b/src/components/ui/Avatar.tsx
index 8bbe383..8785a62 100644
--- a/src/components/ui/Avatar.tsx
+++ b/src/components/ui/Avatar.tsx
@@ -29,7 +29,7 @@ const AvatarFallback = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Fallback
     ref={ref}
-    className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
+    className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted dark:text-slate-400', className)}
     {...props}
   />
 ))
diff --git a/src/components/ui/ScrollArea.tsx b/src/components/ui/ScrollArea.tsx
index a5c9fa7..d58e106 100644
--- a/src/components/ui/ScrollArea.tsx
+++ b/src/components/ui/ScrollArea.tsx
@@ -7,7 +7,7 @@ const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & { scrollLock?: boolean }
 >(({ className, children, scrollLock = true, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root className={cn('relative grid grid-rows-[1fr] overflow-hidden', className)} {...props}>
+  <ScrollAreaPrimitive.Root className={cn('relative grid grid-rows-[1fr] overflow-hidden dark:bg-slate-900 z-50', className)} {...props}>
     <ScrollAreaPrimitive.Viewport
       ref={ref}
       className={cn('size-full rounded-[inherit]', scrollLock ? 'overscroll-none' : 'overscroll-auto')}
diff --git a/src/hooks/useResizable.ts b/src/hooks/useResizable.ts
index 40d94cc..a8dc73a 100644
--- a/src/hooks/useResizable.ts
+++ b/src/hooks/useResizable.ts
@@ -18,7 +18,7 @@ const useResizable = (options: ResizableOptions) => {
     if (newSize !== size) {
       setSize(newSize)
     }
-  }, [initSize, minSize, maxSize, size])
+  }, [initSize, minSize, maxSize])
 
   const position = useRef(0)