From 3fbbe86c5007ac82069feb342a462202d6a1a2b5 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Thu, 11 Feb 2021 11:25:06 +0100
Subject: semi-working dark mode toggle + color pickers

---
 pages/_app.tsx     |  1 +
 pages/settings.tsx | 17 +++++++++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

(limited to 'pages')

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 7be2763..23f9f79 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,4 +1,5 @@
 import '../styles/global.css';
+import '../styles/dark.css';
 
 export default function VierOpEenRijWebsite({ Component, pageProps }) {
 	return <Component {...pageProps}/>
diff --git a/pages/settings.tsx b/pages/settings.tsx
index 96c6a2f..5034bd7 100644
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
@@ -3,7 +3,7 @@ import * as cookies from 'react-cookies';
 
 import { NavBar } from '../components/navbar';
 import { CenteredPage, PageTitle } from '../components/page';
-import { Vierkant, IconLabelButton, CheckBox } from '../components/ui';
+import { Vierkant, IconLabelButton, CheckBox, ColorPicker } from '../components/ui';
 import { AccountAvatar } from '../components/account';
 import { CurrentGameSettings } from '../components/gameSettings';
 
@@ -53,14 +53,23 @@ export default function SettingsPage() {
 				<Vierkant fullwidth>
 					<h2>Kleuren</h2>
 					<div style={SettingsSubsectionStyle}>
-						<h3>Schijfjes</h3>
+						<ColorPicker/>
+						<ColorPicker/>
+						<div style={{ display: "block" }}>
+							<h3>Schijfjes</h3>
+						</div>
 					</div>
 					<div style={SettingsSubsectionStyle}>
-						<h3>Achtergrond</h3>
+						<ColorPicker/>
+						<div style={{ display: "block" }}>
+							<h3>Achtergrond</h3>
+						</div>
 					</div>
 					<div style={SettingsSubsectionStyle}>
 						<div style={{ float: "right" }}>
-							<CheckBox/>
+							<CheckBox state={typeof window !== "undefined" && document.getElementsByTagName("html")[0].classList.contains("dark")} onclick={
+								(state) => document.getElementsByTagName("html")[0].classList[state ? "add" : "remove"]("dark")
+							}/>
 						</div>
 						<h3>Donkere modus</h3>
 					</div>
-- 
cgit v1.2.3