perf(web): use document element instead of body for theme

zobweyt · zobweyt · commit 564e446ce52b · 2025-01-09T23:55:32.000+03:00
diff --git a/apps/web/src/entry-server.tsx b/apps/web/src/entry-server.tsx
@@ -4,7 +4,7 @@ import { createHandler, StartServer } from "@solidjs/start/server";
 export default createHandler((event) => (
   <StartServer
     document={({ assets, children, scripts }) => (
-      <html lang={event.locals.settings.locale}>
+      <html lang={event.locals.settings.locale} data-theme={event.locals.settings.theme}>
         <head>
           <meta charset="UTF-8" />
           <title>Quotepedia</title>
@@ -29,7 +29,7 @@ export default createHandler((event) => (
           <link rel="manifest" href="/manifest.json" />
           {assets}
         </head>
-        <body class="overflow-x-hidden transition-colors" data-theme={event.locals.settings.theme}>
+        <body class="overflow-x-hidden transition-colors">
           <div id="app" class="flex min-h-dvh">
             {children}
           </div>
diff --git a/apps/web/src/lib/theme/Provider.tsx b/apps/web/src/lib/theme/Provider.tsx
@@ -10,7 +10,7 @@ export const ThemeProvider: ParentComponent = (props) => {
   const setTheme = (theme: Theme) => settings.set("theme", theme);
 
   createEffect(() => {
-    document.body.dataset.theme = theme();
+    document.documentElement.dataset.theme = theme();
   });
 
   const context: ThemeContextValue = {
