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

feat: add server-side configuration with default theme (#90)

Browse source 
* docs: add example for usage of the main listenbrainz instance (#71)

* docs: add example for usage of the main listenbrainz instance

* Update scrobbler.md

---------

Co-authored-by: Gabe Farrell <90876006+gabehf@users.noreply.github.com>

* feat: add server-side cfg and default theme

* fix: repair custom theme

---------

Co-authored-by: m0d3rnX <jesper@posteo.de>
This commit is contained in:
Gabe Farrell 2025-11-18 18:37:05 -05:00 • committed by GitHub
parent 70f5198781
commit 1aeb6408aa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 86 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,11 +1,13 @@
import { createContext, useEffect, useState, useCallback, type ReactNode } from 'react';
import { type Theme, themes } from '~/styles/themes.css';
import { themeVars } from '~/styles/vars.css';
import { useAppContext } from './AppProvider';
interface ThemeContextValue {
themeName: string;
theme: Theme;
setTheme: (theme: string) => void;
resetTheme: () => void;
setCustomTheme: (theme: Theme) => void;
getCustomTheme: () => Theme | undefined;
}
@ -43,19 +45,19 @@ function getStoredCustomTheme(): Theme | undefined {
}
export function ThemeProvider({
theme: initialTheme,
children,
}: {
theme: string;
children: ReactNode;
}) {
let defaultTheme = useAppContext().defaultTheme
let initialTheme = localStorage.getItem("theme") ?? defaultTheme
const [themeName, setThemeName] = useState(initialTheme);
const [currentTheme, setCurrentTheme] = useState<Theme>(() => {
if (initialTheme === 'custom') {
const customTheme = getStoredCustomTheme();
return customTheme || themes.yuu;
return customTheme || themes[defaultTheme];
}
return themes[initialTheme] || themes.yuu;
return themes[initialTheme] || themes[defaultTheme];
});
const setTheme = (newThemeName: string) => {
@ -66,21 +68,29 @@ export function ThemeProvider({
setCurrentTheme(customTheme);
} else {
// Fallback to default theme if no custom theme found
setThemeName('yuu');
setCurrentTheme(themes.yuu);
setThemeName(defaultTheme);
setCurrentTheme(themes[defaultTheme]);
}
} else {
const foundTheme = themes[newThemeName];
if (foundTheme) {
localStorage.setItem('theme', newThemeName)
setCurrentTheme(foundTheme);
}
}
}
const resetTheme = () => {
setThemeName(defaultTheme)
localStorage.removeItem('theme')
setCurrentTheme(themes[defaultTheme])
}
const setCustomTheme = useCallback((customTheme: Theme) => {
localStorage.setItem('custom-theme', JSON.stringify(customTheme));
applyCustomThemeVars(customTheme);
setThemeName('custom');
localStorage.setItem('theme', 'custom')
setCurrentTheme(customTheme);
}, []);
@ -92,7 +102,6 @@ export function ThemeProvider({
const root = document.documentElement;
root.setAttribute('data-theme', themeName);
localStorage.setItem('theme', themeName);
if (themeName === 'custom') {
applyCustomThemeVars(currentTheme);
@ -102,7 +111,14 @@ export function ThemeProvider({
}, [themeName, currentTheme]);
return (
<ThemeContext.Provider value={{ themeName, theme: currentTheme, setTheme, setCustomTheme, getCustomTheme }}>
<ThemeContext.Provider value={{
themeName,
theme: currentTheme,
setTheme,
resetTheme,
setCustomTheme,
getCustomTheme
}}>
{children}
</ThemeContext.Provider>
);