fix: dark mode on error pages

riipandi · Oct 4, 2024 · 23e9e34 · 23e9e34
1 parent ffbff0d
commit 23e9e34
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 3 deletions.
diff --git a/app/components/theme.tsx b/app/components/theme.tsx
@@ -6,7 +6,9 @@ export function ThemeSelector() {
   const [theme, setTheme] = useTheme()
 
   const handleThemeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setTheme(event.target.value as ThemeType)
+    const newTheme = event.target.value as ThemeType
+    setTheme(newTheme)
+    localStorage.setItem('remix_start_theme', newTheme)
   }
 
   return (

diff --git a/app/context/providers/theme-provider.tsx b/app/context/providers/theme-provider.tsx
@@ -64,9 +64,21 @@ function ThemeProvider({ children, specifiedTheme }: ThemeProviderProps) {
     if (specifiedTheme && Object.values(Theme).includes(specifiedTheme)) {
       return specifiedTheme
     }
+    if (typeof window !== 'undefined') {
+      const localTheme = localStorage.getItem('remix_start_theme') as ThemeType
+      if (localTheme && Object.values(Theme).includes(localTheme)) {
+        return localTheme
+      }
+    }
     return null
   })
 
+  useEffect(() => {
+    if (theme) {
+      localStorage.setItem('remix_start_theme', theme)
+    }
+  }, [theme])
+
   const mountRun = useRef(false)
 
   useEffect(() => {

diff --git a/app/root.tsx b/app/root.tsx
@@ -98,6 +98,20 @@ export function ErrorBoundary() {
         <title>{pageTitle}</title>
         <Meta />
         <Links />
+        <script
+          // biome-ignore lint/security/noDangerouslySetInnerHtml: Inline script is necessary for theme initialization
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                var theme = localStorage.getItem('remix_start_theme') || 'system';
+                if (theme === 'system') {
+                  theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+                }
+                document.documentElement.classList.add(theme);
+              })();
+            `,
+          }}
+        />
       </head>
       <body className={clx(import.meta.env.DEV && 'debug-breakpoints')} suppressHydrationWarning>
         {isRouteErrorResponse(error) ? (

diff --git a/app/routes/_auth+/login.$.tsx b/app/routes/_auth+/login.$.tsx
@@ -47,6 +47,7 @@ export default function SignInPage() {
           </button>
         </div>
       </form>
+
       <SocialLogin label="Or, sign in with" separatorPlacement="top" />
 
       <div className="mt-10 text-center">

diff --git a/app/routes/set-theme.ts b/app/routes/set-theme.ts
@@ -24,7 +24,15 @@ export const action = async ({ request }: ActionFunctionArgs) => {
 
   const cookiesValue = await themeSession.commit()
 
-  return json({ success: true }, { headers: { 'Set-Cookie': cookiesValue } })
+  return json(
+    { success: true },
+    {
+      headers: {
+        'Set-Cookie': cookiesValue,
+        'X-Theme': theme,
+      },
+    }
+  )
 }
 
 export const loader = () => redirect('/', { status: 404 })
diff --git a/app/utils/theme.server.ts b/app/utils/theme.server.ts
@@ -10,11 +10,13 @@ import { GlobalCookiesOptions } from '#/utils/env.server'
 // Expired in 720 hours / 30 days from now
 const cookiesExpiry = new Date(Date.now() + 3600 * 1000 * 720)
 
+export const THEME_COOKIE_KEY = 'remix_start_theme'
+
 /**
  * Creates a session storage for managing theme preferences.
  */
 const themeStorage = createCookieSessionStorage({
-  cookie: { name: 'remix_start_theme', ...GlobalCookiesOptions },
+  cookie: { name: THEME_COOKIE_KEY, ...GlobalCookiesOptions },
 })
 
 /**
-Original file line number
+Diff line change
@@ Expand Up / @@ -47,6 +47,7 @@ export default function SignInPage() { @@
               </button>
             </div>
           </form>
           <SocialLogin label="Or, sign in with" separatorPlacement="top" />
           <div className="mt-10 text-center">
@@ Expand Down @@