vinzenz/servicepoint-tanks
0
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

add option for text color

Browse source
This commit is contained in:
Vinzenz Schroeter 2024-05-07 15:02:24 +02:00
parent d4d2b6397c
commit 21a1df47b8
2 changed files with 10 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
tank-frontend/src/ThemeChooser.tsx
View file

@ -95,6 +95,10 @@ function ThemeChooserDialog({onClose}: {
name="tertiary"
value={hslTheme.tertiary}
setValue={value => setHslTheme(old => ({...old, tertiary: value}))}/>
<HslEditor
name="text"
value={hslTheme.text}
setValue={value => setHslTheme(old => ({...old, text: value}))}/>
</Column>
</Dialog>;
}

8
tank-frontend/src/theme.tsx
View file

@ -12,6 +12,7 @@ export type HslTheme = {
secondary: HSL;
background: HSL;
tertiary: HSL;
text: HSL;
}
type Rgba = Uint8ClampedArray;
@ -82,7 +83,9 @@ export function getRandomTheme(): HslTheme {
const tertiary = getRandomHsl(otherColorParams);
primary.h = angle(+3 * goldenAngle + primary.h);
return {background, primary, secondary, tertiary};
const text = {h: 0, s: 0, l: 100};
return {background, primary, secondary, tertiary, text};
}
const dummyRgbaTheme: RgbaTheme = {
@ -127,6 +130,7 @@ export function ThemeProvider({children}: {
rootStyle.setProperty('--color-primary', hslToString(theme.primary));
rootStyle.setProperty('--color-secondary', hslToString(theme.secondary));
rootStyle.setProperty('--color-background', hslToString(theme.background));
rootStyle.setProperty('--color-text', hslToString(theme.text));
}
const [hslTheme, setHslTheme] = useStoredObjectState<HslTheme>('theme', getRandomTheme, {
@ -158,7 +162,7 @@ export function ThemeProvider({children}: {
return <HslThemeContext.Provider value={{hslTheme, setHslTheme}}>
<RgbaThemeContext.Provider value={rgbaTheme || dummyRgbaTheme}>
<canvas hidden={true} ref={canvasRef}/>
<canvas hidden={true} ref={canvasRef} width={1} height={1}/>
{children}
</RgbaThemeContext.Provider>;
</HslThemeContext.Provider>;