diff --git a/packages/frontend/component/.storybook/preview.tsx b/packages/frontend/component/.storybook/preview.tsx
index e39b285acc..5215e4e59d 100644
--- a/packages/frontend/component/.storybook/preview.tsx
+++ b/packages/frontend/component/.storybook/preview.tsx
@@ -1,12 +1,12 @@
 import './polyfill';
 import '../src/theme';
 import './preview.css';
-import { ThemeProvider } from 'next-themes';
-import type { ComponentType } from 'react';
-
-import type { Preview } from '@storybook/react';
-import React, { useEffect } from 'react';
 import { ConfirmModalProvider } from '../src/ui/modal/confirm-modal';
+
+import { ThemeProvider, useTheme as useNextTheme } from 'next-themes';
+import type { ComponentType } from 'react';
+import React, { useEffect } from 'react';
+import type { Preview } from '@storybook/react';
 import { setupGlobal } from '@affine/env/global';
 
 setupGlobal();
@@ -34,19 +34,22 @@ export const globalTypes = {
   },
 };
 
-const useTheme = context => {
+const ThemeToggle = ({ context }) => {
   const { theme } = context.globals;
+  const { setTheme } = useNextTheme();
 
   useEffect(() => {
-    document.documentElement.setAttribute('data-theme', theme);
+    setTheme(theme);
   }, [theme]);
+
+  return null;
 };
 
 export const decorators = [
   (Story: ComponentType, context) => {
-    useTheme(context);
     return (
       <ThemeProvider themes={['dark', 'light']} enableSystem={true}>
+        <ThemeToggle context={context} />
         <ConfirmModalProvider>
           <Story {...context} />
         </ConfirmModalProvider>
diff --git a/packages/frontend/component/src/ui/notification/desktop/notification-center.tsx b/packages/frontend/component/src/ui/notification/desktop/notification-center.tsx
index a9e6fe6249..f40db359ed 100644
--- a/packages/frontend/component/src/ui/notification/desktop/notification-center.tsx
+++ b/packages/frontend/component/src/ui/notification/desktop/notification-center.tsx
@@ -1,4 +1,5 @@
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { useTheme } from 'next-themes';
 import { type CSSProperties, useMemo } from 'react';
 import { Toaster } from 'sonner';
 
@@ -7,6 +8,8 @@ import type { NotificationCenterProps } from '../types';
 export function DesktopNotificationCenter({
   width = 380,
 }: NotificationCenterProps) {
+  const theme = useTheme();
+  const resolvedTheme = theme.resolvedTheme as 'light' | 'dark';
   const style = useMemo(() => {
     return {
       ...assignInlineVars({
@@ -32,6 +35,7 @@ export function DesktopNotificationCenter({
       className="affine-notification-center"
       style={style}
       toastOptions={toastOptions}
+      theme={resolvedTheme}
     />
   );
 }