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";
 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 />
--- a/src/stores/theme/index.ts
+++ b/src/stores/theme/index.ts
@ -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 @@
 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 = {
  }
 }
 // TODO body background isn't themed
 export const defaultTheme = {
  extend: {
    colors: {