diff options
| author | lonkaars <l.leblansch@gmail.com> | 2021-02-11 11:25:06 +0100 |
|---|---|---|
| committer | lonkaars <l.leblansch@gmail.com> | 2021-02-11 11:25:06 +0100 |
| commit | 3fbbe86c5007ac82069feb342a462202d6a1a2b5 (patch) | |
| tree | 486a945290cd51c76d0a17c5d98c25b9bbeca9a5 /pages | |
| parent | ba44755fa7bc166f09dd93545426f0d3275d5c42 (diff) | |
semi-working dark mode toggle + color pickers
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/_app.tsx | 1 | ||||
| -rw-r--r-- | pages/settings.tsx | 17 |
2 files changed, 14 insertions, 4 deletions
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> |