mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-29 16:07:40 +01:00
Code Issues Wiki Activity

Fix theme not applying on body colors

Browse source
This commit is contained in:
mrjvs 2023-12-09 17:37:51 +01:00
parent 615e44b231
commit 9fce50d259
4 changed files with 47 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/index.tsx
View file

@ -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 />

24
src/stores/theme/index.ts
View file

@ -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",
}
)
);

45
src/stores/theme/index.tsx Normal file
View file

@ -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>
);
}

2
themes/default.ts
View file

@ -83,8 +83,6 @@ const tokens = {
}
}
// TODO body background isn't themed
export const defaultTheme = {
extend: {
colors: {