refactor initial theme handling

Author: auto200

apps/debugger-extension/entrypoints/devtools-panel/components/Header.tsx

@@ -15,7 +15,7 @@ type HeaderProps = {
 };
 
 export function Header({ ref, filters, onFiltersChange, reset, onHardReload }: HeaderProps) {
-  const { setTheme, theme, getSystemTheme } = useTheme();
+  const { setTheme, theme } = useTheme();
   const handleFilterChange = (filter: Filters[number] | undefined) => {
     if (!filter) {
       onFiltersChange([]);
@@ -59,10 +59,7 @@ export function Header({ ref, filters, onFiltersChange, reset, onHardReload }: H
       <div className="ml-5 flex select-none items-center gap-1">
         <Badge
           variant="outline"
-          className={cn(
-            filters.length === 0 ? badgeColor : badgeHoverColor,
-            'cursor-pointer'
-          )}
+          className={cn(filters.length === 0 ? badgeColor : badgeHoverColor, 'cursor-pointer')}
           onClick={() => handleFilterChange(undefined)}
         >
           <svg
@@ -130,10 +127,6 @@ export function Header({ ref, filters, onFiltersChange, reset, onHardReload }: H
         size="icon"
         className="ml-auto mr-1 h-5 w-5"
         onClick={() => {
-          if (theme === 'system') {
-            setTheme(getSystemTheme() === 'light' ? 'dark' : 'light');
-            return;
-          }
           setTheme(theme === 'light' ? 'dark' : 'light');
         }}
       >

apps/debugger-extension/entrypoints/devtools-panel/contexts/ThemeContext.tsx

@@ -1,6 +1,6 @@
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useLayoutEffect, useState } from 'react';
 
-type Theme = 'dark' | 'light' | 'system';
+type Theme = 'dark' | 'light';
 
 type ThemeProviderProps = {
   children: React.ReactNode;
@@ -11,7 +11,6 @@ type ThemeProviderProps = {
 type ThemeProviderState = {
   theme: Theme;
   setTheme: (theme: Theme) => void;
-  getSystemTheme: () => Exclude<Theme, 'system'>;
 };
 
 const ThemeProviderContext = createContext<ThemeProviderState>(
@@ -23,26 +22,18 @@ const getSystemTheme = () =>
 
 export function ThemeProvider({
   children,
-  defaultTheme = 'system',
   storageKey = 'vite-ui-theme',
   ...props
 }: ThemeProviderProps) {
   const [theme, setTheme] = useState<Theme>(
-    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+    () => (localStorage.getItem(storageKey) as Theme) || getSystemTheme()
   );
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const root = window.document.documentElement;
 
     root.classList.remove('light', 'dark');
 
-    if (theme === 'system') {
-      const systemTheme = getSystemTheme();
-
-      root.classList.add(systemTheme);
-      return;
-    }
-
     root.classList.add(theme);
   }, [theme]);
 
@@ -52,7 +43,6 @@ export function ThemeProvider({
       localStorage.setItem(storageKey, theme);
       setTheme(theme);
     },
-    getSystemTheme,
   };
 
   return (