diff --git a/client/app/components/themeSwitcher/ThemeSwitcher.tsx b/client/app/components/themeSwitcher/ThemeSwitcher.tsx index b9d4aee..74997ae 100644 --- a/client/app/components/themeSwitcher/ThemeSwitcher.tsx +++ b/client/app/components/themeSwitcher/ThemeSwitcher.tsx @@ -5,7 +5,11 @@ import ThemeOption from './ThemeOption'; import { AsyncButton } from '../AsyncButton'; export function ThemeSwitcher() { +<<<<<<< HEAD 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 = { bg: "#1e1816", bgSecondary: "#2f2623", diff --git a/client/app/providers/ThemeProvider.tsx b/client/app/providers/ThemeProvider.tsx index aa4f874..4ae3f87 100644 --- a/client/app/providers/ThemeProvider.tsx +++ b/client/app/providers/ThemeProvider.tsx @@ -49,15 +49,24 @@ export function ThemeProvider({ }: { children: ReactNode; }) { +<<<<<<< HEAD let defaultTheme = useAppContext().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 [currentTheme, setCurrentTheme] = useState(() => { if (initialTheme === 'custom') { const customTheme = getStoredCustomTheme(); +<<<<<<< HEAD return customTheme || 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) => { @@ -68,12 +77,18 @@ export function ThemeProvider({ setCurrentTheme(customTheme); } else { // Fallback to default theme if no custom theme found +<<<<<<< HEAD setThemeName(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 { const foundTheme = themes[newThemeName]; if (foundTheme) { +<<<<<<< HEAD localStorage.setItem('theme', newThemeName) setCurrentTheme(foundTheme); } @@ -84,13 +99,21 @@ export function ThemeProvider({ setThemeName(defaultTheme) localStorage.removeItem('theme') 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) => { localStorage.setItem('custom-theme', JSON.stringify(customTheme)); applyCustomThemeVars(customTheme); setThemeName('custom'); +<<<<<<< HEAD localStorage.setItem('theme', 'custom') +======= +>>>>>>> fbaa6a6 (Rework theme provider to provide the actual Theme object throughtout the app, in addition to the name) setCurrentTheme(customTheme); }, []); @@ -102,6 +125,10 @@ export function ThemeProvider({ const root = document.documentElement; 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') { applyCustomThemeVars(currentTheme); @@ -111,6 +138,7 @@ export function ThemeProvider({ }, [themeName, currentTheme]); return ( +<<<<<<< HEAD +======= + +>>>>>>> fbaa6a6 (Rework theme provider to provide the actual Theme object throughtout the app, in addition to the name) {children} );