diff --git a/webui/src/app/+html.tsx b/webui/src/app/+html.tsx
index a9bcff0..21cb6e9 100644
--- a/webui/src/app/+html.tsx
+++ b/webui/src/app/+html.tsx
@@ -10,7 +10,7 @@ export default function Root({ children }: { children: React.ReactNode }) {
         <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
       </head>
-      <body>{children}</body>
+      <body className="dark-theme">{children}</body>
     </html>
   );
 }
diff --git a/webui/src/providers/theme.tsx b/webui/src/providers/theme.tsx
index 20570af..4d5775c 100644
--- a/webui/src/providers/theme.tsx
+++ b/webui/src/providers/theme.tsx
@@ -2,20 +2,15 @@ import { useColorScheme } from 'nativewind';
 import { useEffect, type PropsWithChildren } from 'react';
 
 export function ThemeProvider({ children }: PropsWithChildren) {
-  useWorkaroundForThemeClass();
-
-  return children;
-}
-
-function useWorkaroundForThemeClass() {
   const { colorScheme } = useColorScheme();
 
   useEffect(() => {
-    if (document.body) {
+    // Keep the prefered color scheme synced with the `body` class name
+    if (document.body && colorScheme) {
       document.body.classList.remove('light-theme', 'dark-theme');
-      if (colorScheme) {
-        document.body.className = `${colorScheme}-theme`;
-      }
+      document.body.className = `${colorScheme}-theme`;
     }
   }, [colorScheme]);
+
+  return children;
 }
