pass theme as context

tank-frontend/src/App.tsx

@@ -8,35 +8,37 @@ import Scoreboard from './Scoreboard.tsx';
 import Button from './components/Button.tsx';
 import MapChooser from './MapChooser.tsx';
 import './App.css';
-import {getRandomTheme, useStoredTheme} from './theme.ts';
+import {ThemeContext, getRandomTheme, useStoredTheme} from './theme.ts';
 import {useState} from 'react';
 
 export default function App() {
     const [theme, setTheme] = useStoredTheme();
     const [name, setName] = useState<string | null>(null);
 
-    return <Column className="flex-grow">
+    return <ThemeContext.Provider value={theme}>
+        <Column className="flex-grow">
 
-        <ClientScreen theme={theme} player={name}/>
+            <ClientScreen player={name}/>
 
-        <Row>
-            <h1 className="flex-grow">CCCB-Tanks!</h1>
-            <MapChooser theme={theme}/>
-            <Button text="☼ change colors" onClick={() => setTheme(_ => getRandomTheme())}/>
-            <Button
-                onClick={() => window.open('https://github.com/kaesaecracker/cccb-tanks-cs', '_blank')?.focus()}
-                text="⌂ source"/>
-            {name !== '' &&
-                <Button onClick={() => setName(_ => '')} text="∩ logout"/>}
-        </Row>
+            <Row>
+                <h1 className="flex-grow">CCCB-Tanks!</h1>
+                <MapChooser />
+                <Button text="☼ change colors" onClick={() => setTheme(_ => getRandomTheme())}/>
+                <Button
+                    onClick={() => window.open('https://github.com/kaesaecracker/cccb-tanks-cs', '_blank')?.focus()}
+                    text="⌂ source"/>
+                {name !== '' &&
+                    <Button onClick={() => setName(_ => '')} text="∩ logout"/>}
+            </Row>
 
-        {name || <JoinForm onDone={name => setName(_ => name)}/>}
+            {name || <JoinForm onDone={name => setName(_ => name)}/>}
 
-        <Row className="GadgetRows">
-            {name && <Controls player={name}/>}
-            {name && <PlayerInfo player={name}/>}
-            <Scoreboard/>
-        </Row>
+            <Row className="GadgetRows">
+                {name && <Controls player={name}/>}
+                {name && <PlayerInfo player={name}/>}
+                <Scoreboard/>
+            </Row>
 
-    </Column>;
+        </Column>
+    </ThemeContext.Provider>;
 }