feat(core): add edgelessTheme property and edgelessDefault theme setting (#8614)

close AF-1430 AF-1471

https://github.com/user-attachments/assets/d997ac6c-ce94-4fa4-ab34-29b36c7796ea

packages/frontend/component/package.json

@@ -62,7 +62,7 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@blocksuite/affine": "0.17.23",
+    "@blocksuite/affine": "0.17.25",
     "@blocksuite/icons": "2.1.69",
     "@chromatic-com/storybook": "^3.0.0",
     "@storybook/addon-essentials": "^8.2.9",

packages/frontend/component/src/components/theme-provider/index.tsx

@@ -1,12 +1,26 @@
-import { ThemeProvider as NextThemeProvider } from 'next-themes';
+import { AppThemeService, useService } from '@toeverything/infra';
+import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes';
 import type { PropsWithChildren } from 'react';
+import { useEffect } from 'react';
 
 const themes = ['dark', 'light'];
 
+export function ThemeObserver() {
+  const { resolvedTheme } = useTheme();
+  const service = useService(AppThemeService);
+
+  useEffect(() => {
+    service.appTheme.theme$.next(resolvedTheme);
+  }, [resolvedTheme, service.appTheme.theme$]);
+
+  return null;
+}
+
 export const ThemeProvider = ({ children }: PropsWithChildren) => {
   return (
     <NextThemeProvider themes={themes} enableSystem={true}>
       {children}
+      <ThemeObserver />
     </NextThemeProvider>
   );
 };