gabehf/Koito
1
0
Fork 0
mirror of https://github.com/gabehf/Koito.git synced 2026-03-16 02:45:54 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Rework theme provider to provide the actual Theme object throughtout the app, in addition to the name

Browse source 
Split name out of the Theme struct to simplify custom theme saving/reading
This commit is contained in:
Michael Landry 2025-09-28 08:01:54 -04:00 • committed by Gabe Farrell
parent 517cc8ac28
commit 621ca63b6b
2 changed files with 35 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/app/components/themeSwitcher/ThemeSwitcher.tsx
View file

@ -5,7 +5,11 @@ import ThemeOption from './ThemeOption';
import { AsyncButton } from '../AsyncButton'; import { AsyncButton } from '../AsyncButton';
export function ThemeSwitcher() { export function ThemeSwitcher() {
<<<<<<< HEAD
const { setTheme } = useTheme(); const { setTheme } = useTheme();
=======
const { theme, themeName, setTheme } = useTheme();
>>>>>>> fbaa6a6 (Rework theme provider to provide the actual Theme object throughtout the app, in addition to the name)
const initialTheme = { const initialTheme = {
bg: "#1e1816", bg: "#1e1816",
bgSecondary: "#2f2623", bgSecondary: "#2f2623",

31
client/app/providers/ThemeProvider.tsx
View file

@ -49,15 +49,24 @@ export function ThemeProvider({
}: { }: {
children: ReactNode; children: ReactNode;
}) { }) {
<<<<<<< HEAD
let defaultTheme = useAppContext().defaultTheme let defaultTheme = useAppContext().defaultTheme
let initialTheme = localStorage.getItem("theme") ?? defaultTheme let initialTheme = localStorage.getItem("theme") ?? defaultTheme
=======
>>>>>>> fbaa6a6 (Rework theme provider to provide the actual Theme object throughtout the app, in addition to the name)
const [themeName, setThemeName] = useState(initialTheme); const [themeName, setThemeName] = useState(initialTheme);
const [currentTheme, setCurrentTheme] = useState<Theme>(() => { const [currentTheme, setCurrentTheme] = useState<Theme>(() => {
if (initialTheme === 'custom') { if (initialTheme === 'custom') {
const customTheme = getStoredCustomTheme(); const customTheme = getStoredCustomTheme();
<<<<<<< HEAD
return customTheme || themes[defaultTheme]; return customTheme || themes[defaultTheme];
} }
return themes[initialTheme] || themes[defaultTheme]; return themes[initialTheme] || themes[defaultTheme];
=======
return customTheme || themes.yuu;
}
return themes[initialTheme] || themes.yuu;
>>>>>>> fbaa6a6 (Rework theme provider to provide the actual Theme object throughtout the app, in addition to the name)
}); });
const setTheme = (newThemeName: string) => { const setTheme = (newThemeName: string) => {
@ -68,12 +77,18 @@ export function ThemeProvider({
setCurrentTheme(customTheme); setCurrentTheme(customTheme);
} else { } else {
// Fallback to default theme if no custom theme found // Fallback to default theme if no custom theme found
<<<<<<< HEAD
setThemeName(defaultTheme); setThemeName(defaultTheme);
setCurrentTheme(themes[defaultTheme]); setCurrentTheme(themes[defaultTheme]);
=======
setThemeName('yuu');
setCurrentTheme(themes.yuu);
>>>>>>> fbaa6a6 (Rework theme provider to provide the actual Theme object throughtout the app, in addition to the name)
} }
} else { } else {
const foundTheme = themes[newThemeName]; const foundTheme = themes[newThemeName];
if (foundTheme) { if (foundTheme) {
<<<<<<< HEAD
localStorage.setItem('theme', newThemeName) localStorage.setItem('theme', newThemeName)
setCurrentTheme(foundTheme); setCurrentTheme(foundTheme);
} }
@ -84,13 +99,21 @@ export function ThemeProvider({
setThemeName(defaultTheme) setThemeName(defaultTheme)
localStorage.removeItem('theme') localStorage.removeItem('theme')
setCurrentTheme(themes[defaultTheme]) setCurrentTheme(themes[defaultTheme])
=======
setCurrentTheme(foundTheme);
}
}
>>>>>>> fbaa6a6 (Rework theme provider to provide the actual Theme object throughtout the app, in addition to the name)
} }
const setCustomTheme = useCallback((customTheme: Theme) => { const setCustomTheme = useCallback((customTheme: Theme) => {
localStorage.setItem('custom-theme', JSON.stringify(customTheme)); localStorage.setItem('custom-theme', JSON.stringify(customTheme));
applyCustomThemeVars(customTheme); applyCustomThemeVars(customTheme);
setThemeName('custom'); setThemeName('custom');
<<<<<<< HEAD
localStorage.setItem('theme', 'custom') localStorage.setItem('theme', 'custom')
=======
>>>>>>> fbaa6a6 (Rework theme provider to provide the actual Theme object throughtout the app, in addition to the name)
setCurrentTheme(customTheme); setCurrentTheme(customTheme);
}, []); }, []);
@ -102,6 +125,10 @@ export function ThemeProvider({
const root = document.documentElement; const root = document.documentElement;
root.setAttribute('data-theme', themeName); root.setAttribute('data-theme', themeName);
<<<<<<< HEAD
=======
localStorage.setItem('theme', themeName);
>>>>>>> fbaa6a6 (Rework theme provider to provide the actual Theme object throughtout the app, in addition to the name)
if (themeName === 'custom') { if (themeName === 'custom') {
applyCustomThemeVars(currentTheme); applyCustomThemeVars(currentTheme);
@ -111,6 +138,7 @@ export function ThemeProvider({
}, [themeName, currentTheme]); }, [themeName, currentTheme]);
return ( return (
<<<<<<< HEAD
<ThemeContext.Provider value={{ <ThemeContext.Provider value={{
themeName, themeName,
theme: currentTheme, theme: currentTheme,
@ -119,6 +147,9 @@ export function ThemeProvider({
setCustomTheme, setCustomTheme,
getCustomTheme getCustomTheme
}}> }}>
=======
<ThemeContext.Provider value={{ themeName, theme: currentTheme, setTheme, setCustomTheme, getCustomTheme }}>
>>>>>>> fbaa6a6 (Rework theme provider to provide the actual Theme object throughtout the app, in addition to the name)
{children} {children}
</ThemeContext.Provider> </ThemeContext.Provider>
); );