dark mode working now :tada:

8 files changed, 42 insertions, 83 deletions

diff --git a/pages/login.tsx b/pages/login.tsx
index 4cadd82..da13f45 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -48,7 +48,7 @@ export default function LoginPage() {
 	return (
 		<div>
 			<NavBar />
-			<CenteredPage width={500} className="h100vh">
+			<CenteredPage width={500} className='h100vh'>
 				<div className='posrel center centeredForm'>
 					<Vierkant className='pad-l bg-800'>
 						<form onSubmit={(e) => submitLogin(e, toast)}>
diff --git a/pages/register.tsx b/pages/register.tsx
index 2709a10..bc2fc0f 100644
--- a/pages/register.tsx
+++ b/pages/register.tsx
@@ -88,7 +88,7 @@ export default function RegisterPage() {
 	return (
 		<div>
 			<NavBar />
-			<CenteredPage width={500} className="h100vh">
+			<CenteredPage width={500} className='h100vh'>
 				<div className='posrel center centeredForm'>
 					<Vierkant className='pad-l bg-800'>
 						<form onSubmit={(e) => submitRegister(e, toast)}>
diff --git a/pages/search.tsx b/pages/search.tsx
index 7aba29c..99f99b0 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -31,7 +31,7 @@ function SearchResults(props: { userList: Array<userInfo>; }) {
 
 function SearchResult(props: { user: userInfo; }) {
 	return <Vierkant
-		className='result pad-m fullwidth'
+		className='result bg-800 pad-m fullwidth'
 		href={'/user?id=' + props.user.id}
 	>
 		<div className='inner posrel'>
diff --git a/styles/dark.css b/styles/dark.css
index 681116f..b44171b 100644
--- a/styles/dark.css
+++ b/styles/dark.css
@@ -1,9 +1,19 @@
 html.dark {
-    --text: #FCFFFD;
-    --text-alt: var(--text);
+	--background: var(--gray-900);
+	--foreground: #FFFFF3;
 
-    --page-background: #11171a;
-    --background: #222d33;
-    --background-alt: #344047;
-}
+	--accent: #AD34F3;
+
+	--error: #FF4365;
+	--disk-b-alt: #F49BA1;
 
+	--confirm: #00D9C0;
+	--disk-a-alt: #86F3F3;
+
+	--gray-100: #CED2DC;
+	--gray-200: #A9AFC0;
+	--gray-300: #757D92;
+	--gray-700: #293140;
+	--gray-800: #1F242D;
+	--gray-900: #141619;
+}
diff --git a/styles/game.css b/styles/game.css
index f454691..2c1eb94 100644
--- a/styles/game.css
+++ b/styles/game.css
@@ -7,55 +7,35 @@
 	padding: var(--spacing-medium) var(--spacing-large);
 }
 
-.newGameDialog .inviteButton {
-	height: 160px;
-}
+.newGameDialog .inviteButton { height: 160px; }
 
-.newGameDialog .inviteButton.random {
-	background-color: var(--confirm);
-}
+.newGameDialog .inviteButton.random { background-color: var(--confirm); }
 
-.newGameDialog .inviteButton.link {
-	background-color: var(--error);
-}
+.newGameDialog .inviteButton.link { background-color: var(--error); }
 
 .newGameDialog .inviteButton .icon {
 	top: var(--spacing-medium);
 	font-size: 100px;
 }
 
-.newGameDialog .inviteButton .label {
-	bottom: var(--spacing-medium);
-}
+.newGameDialog .inviteButton .label { bottom: var(--spacing-medium); }
 
-.newGameDialog > div {
-	margin-top: var(--spacing-large);
-}
+.newGameDialog > div { margin-top: var(--spacing-large); }
 
-.voerBord {
-	border-spacing: var(--spacing-small);
-}
+.voerBord { border-spacing: var(--spacing-small); }
 
-.voerBord .cell.inner {
-	border: 2px solid var(--gray-800);
-}
+.voerBord .cell.inner { border: 2px solid var(--gray-800); }
 
-.voerBord .square {
-	margin-top: 100%;
-}
+.voerBord .square { margin-top: 100%; }
 
-.voerBord.active .cell.inner {
-	cursor: pointer;
-}
+.voerBord.active .cell.inner { cursor: pointer; }
 
 .voerBord .disk {
 	border-radius: 999999999px;
 	margin: 3px;
 }
 
-.gameBar .gameBarButton {
-	margin: 0;
-}
+.gameBar .gameBarButton { margin: 0; }
 
 .gameBar .move {
 	width: 32px;
@@ -73,3 +53,8 @@
 	margin: 0 auto;
 }
 
+html.dark .newGameDialog .inviteButton { background-color: var(--gray-800); }
+html.dark .newGameDialog .inviteButton.random .icon { color: var(--confirm); }
+html.dark .newGameDialog .inviteButton.link .icon { color: var(--error); }
+html.dark .newGameDialog .searchBar .input { background-color: var(--gray-800); }
+
diff --git a/styles/gameSettings.css b/styles/gameSettings.css
index 533cea0..d9ba262 100644
--- a/styles/gameSettings.css
+++ b/styles/gameSettings.css
@@ -40,6 +40,9 @@
 	margin: 0;
 	margin-bottom: var(--spacing-medium);
 }
+html.dark .editGameSettings .editableRules .editableRulesSection {
+	background-color: var(--gray-800);
+}
 
 .editGameSettings .button {
 	line-height: normal;
diff --git a/styles/global.css b/styles/global.css
index f70b6bd..541dd76 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -33,42 +33,6 @@
 	--spacing-large:  24px;
 }
 
-@media (prefers-color-scheme: dark) {
-	:root {
-		--background: var(--gray-900);
-		--foreground: #FFFFF3;
-
-		--accent: #AD34F3;
-
-		--error: #FF4365;
-		--disk-b-alt: #F49BA1;
-
-		--confirm: #00D9C0;
-		--disk-a-alt: #86F3F3;
-
-		--gray-100: #CED2DC;
-		--gray-200: #A9AFC0;
-		--gray-300: #757D92;
-		--gray-700: #293140;
-		--gray-800: #1F242D;
-		--gray-900: #141619;
-	}
-}
-
-/* html { */
-/* 	--text: #FCFFFD; */
-/* 	--page-background: var(--text); */
-
-/* 	--background: #5D737E; */
-/* 	--text-alt: var(--background); */
-/* 	--background-alt: #81949E; */
-
-/* 	--disk-a: #E16D82; */
-/* 	--disk-a-text: #FDC0C4; */
-/* 	--disk-b: #71D9CC; */
-/* 	--disk-b-text: #C0FDEB; */
-/* } */
-
 /* default margin */
 html, body {
 	margin: 0;
diff --git a/styles/ui.css b/styles/ui.css
index cd9f461..6dbc388 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -5,6 +5,7 @@
 	box-sizing: border-box;
 }
 
+html.dark .button { color: var(--foreground); }
 .button {
 	background-color: var(--accent);
 	color: var(--gray-900);
@@ -64,20 +65,16 @@
 	transform: translate(-50%, 0%) rotate(0deg);
 }
 
-.dialogbox {
-	width: 392px;
-}
-
-.dialogbox > .title {
-	margin-bottom: var(--spacing-large);
-}
-
+.dialogbox { width: 392px; }
+.dialogbox > .title { margin-bottom: var(--spacing-large); }
 .dialogbox .icon.close {
 	top: 25px;
 	right: 25px;
 	cursor: pointer;
 }
 
+html.dark .dialogbox { background-color: var(--gray-700); }
+
 .searchBar {
 	overflow: hidden;
 }