diff --git a/src/index.tsx b/src/index.tsx
index ac372fee..780bd63e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -28,7 +28,7 @@ import { BookmarkSyncer } from "@/stores/bookmarks/BookmarkSyncer";
 import { useLanguageStore } from "@/stores/language";
 import { ProgressSyncer } from "@/stores/progress/ProgressSyncer";
 import { SettingsSyncer } from "@/stores/subtitles/SettingsSyncer";
-import { useThemeStore } from "@/stores/theme";
+import { ThemeProvider } from "@/stores/theme";
 
 import { initializeChromecast } from "./setup/chromecast";
 import { initializeOldStores } from "./stores/__old/migrations";
@@ -124,19 +124,12 @@ function TheRouter(props: { children: ReactNode }) {
   return <HashRouter>{props.children}</HashRouter>;
 }
 
-function ThemeProvider(props: { children: ReactNode }) {
-  const theme = useThemeStore((s) => s.theme);
-  const themeSelector = theme ? `theme-${theme}` : undefined;
-
-  return <div className={themeSelector}>{props.children}</div>;
-}
-
 ReactDOM.render(
   <React.StrictMode>
     <ErrorBoundary>
       <HelmetProvider>
         <Suspense fallback={<LoadingScreen type="lazy" />}>
-          <ThemeProvider>
+          <ThemeProvider applyGlobal>
             <ProgressSyncer />
             <BookmarkSyncer />
             <SettingsSyncer />
diff --git a/src/stores/theme/index.ts b/src/stores/theme/index.ts
deleted file mode 100644
index 13339a8d..00000000
--- a/src/stores/theme/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
-import { immer } from "zustand/middleware/immer";
-
-export interface ThemeStore {
-  theme: string | null;
-  setTheme(v: string | null): void;
-}
-
-export const useThemeStore = create(
-  persist(
-    immer<ThemeStore>((set) => ({
-      theme: null,
-      setTheme(v) {
-        set((s) => {
-          s.theme = v;
-        });
-      },
-    })),
-    {
-      name: "__MW::theme",
-    }
-  )
-);
diff --git a/src/stores/theme/index.tsx b/src/stores/theme/index.tsx
new file mode 100644
index 00000000..2abfc33f
--- /dev/null
+++ b/src/stores/theme/index.tsx
@@ -0,0 +1,45 @@
+import { ReactNode } from "react";
+import { Helmet } from "react-helmet-async";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+
+export interface ThemeStore {
+  theme: string | null;
+  setTheme(v: string | null): void;
+}
+
+export const useThemeStore = create(
+  persist(
+    immer<ThemeStore>((set) => ({
+      theme: null,
+      setTheme(v) {
+        set((s) => {
+          s.theme = v;
+        });
+      },
+    })),
+    {
+      name: "__MW::theme",
+    }
+  )
+);
+
+export function ThemeProvider(props: {
+  children?: ReactNode;
+  applyGlobal?: boolean;
+}) {
+  const theme = useThemeStore((s) => s.theme);
+  const themeSelector = theme ? `theme-${theme}` : undefined;
+
+  return (
+    <div className={themeSelector}>
+      {props.applyGlobal ? (
+        <Helmet>
+          <body className={themeSelector} />
+        </Helmet>
+      ) : null}
+      {props.children}
+    </div>
+  );
+}
diff --git a/themes/default.ts b/themes/default.ts
index 52e361d3..7a010338 100644
--- a/themes/default.ts
+++ b/themes/default.ts
@@ -83,8 +83,6 @@ const tokens = {
   }
 }
 
-// TODO body background isn't themed
-
 export const defaultTheme = {
   extend: {
     colors: {
