From 21a1df47b8ae74b8f7546a1cf55e159314066aed Mon Sep 17 00:00:00 2001
From: Vinzenz Schroeter <vinzenz.f.s@gmail.com>
Date: Tue, 7 May 2024 15:02:24 +0200
Subject: [PATCH] add option for text color

---
 tank-frontend/src/ThemeChooser.tsx | 4 ++++
 tank-frontend/src/theme.tsx        | 8 ++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/tank-frontend/src/ThemeChooser.tsx b/tank-frontend/src/ThemeChooser.tsx
index 9b10c31..acfc9e2 100644
--- a/tank-frontend/src/ThemeChooser.tsx
+++ b/tank-frontend/src/ThemeChooser.tsx
@@ -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>;
 }
diff --git a/tank-frontend/src/theme.tsx b/tank-frontend/src/theme.tsx
index c2e6012..4e29955 100644
--- a/tank-frontend/src/theme.tsx
+++ b/tank-frontend/src/theme.tsx
@@ -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>;