Fix theme not applying on body colors

2 years ago · 9fce50d259
4 changed files with 47 additions and 35 deletions
--- a/src/index.tsx
+++ b/src/index.tsx
@ -28,7 +28,7 @@ import { BookmarkSyncer } from "@/stores/bookmarks/BookmarkSyncer";
				@@ -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 }) {
				@@ -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 />
--- a/src/stores/theme/index.ts
+++ b/src/stores/theme/index.ts
@ -1,24 +0,0 @@
				@@ -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",
-    }
-  )
-);
--- a/src/stores/theme/index.tsx
+++ b/src/stores/theme/index.tsx
@ -0,0 +1,45 @@
				@@ -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>
+  );
+}
--- a/themes/default.ts
+++ b/themes/default.ts
@ -83,8 +83,6 @@ const tokens = {
				@@ -83,8 +83,6 @@ const tokens = {
  }
 }

-// TODO body background isn't themed
-
 export const defaultTheme = {
  extend: {
    colors: {