extracted terminal to a widget

src/apps/officer-web/state/useThemeSync.ts

@@ -2,47 +2,12 @@ import { useEffect } from 'react';
 import { useTheme } from '@/components/ui/ThemeProvider';
 import { useSettings } from './useSettings';
 
-const THEME_MODES: Record<string, 'light' | 'dark'> = {
-  DuckPond: 'light',
-  TokyoNight: 'dark',
-  CatppuccinLatte: 'light',
-  CatppuccinMocha: 'dark',
-  Everforest: 'dark',
-  Gruvbox: 'dark',
-  Kanagawa: 'dark',
-  MatteBlack: 'dark',
-  Nord: 'dark',
-  OsakaJade: 'dark',
-  Ristretto: 'dark',
-  RosePine: 'dark',
-};
-
-const BG_IMAGES: Record<string, string> = {
-  DuckPond: 'url(/static/landscape1.jpg)',
-};
-
 export const useThemeSync = () => {
   const { settings } = useSettings();
   const { setTheme } = useTheme();
 
   useEffect(() => {
     if (!settings) return;
-    const colorTheme = settings.appearance.colorTheme ?? 'DuckPond';
-    const root = document.documentElement;
-
-    // Set data attribute for CSS scoping (DuckPond uses :root as default)
-    if (colorTheme === 'DuckPond') {
-      root.removeAttribute('data-color-theme');
-    } else {
-      root.setAttribute('data-color-theme', colorTheme);
-    }
-
-    // Set light/dark class based on theme mode
-    const mode = THEME_MODES[colorTheme] ?? 'light';
-    setTheme(mode);
-
-    // Set background image
-    const bgImage = BG_IMAGES[colorTheme] ?? 'none';
-    root.style.setProperty('--page-bg-image', bgImage);
+    setTheme('light');
   }, [settings?.appearance?.colorTheme]);
 };