Add dark mode

Vages · Oct 31, 2022 · 3ea7d8e · 3ea7d8e
1 parent 6814eba
commit 3ea7d8e
Show file tree

Hide file tree

Showing 50 changed files with 470 additions and 318 deletions.
diff --git a/src/app.html b/src/app.html
@@ -6,6 +6,7 @@
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 
+		<link href="/stylesheets/nes_css/nes.core.min.css" rel="stylesheet" />
 		<style>
 			@font-face {
 				font-family: "Press Start 2P";
@@ -18,7 +19,6 @@
 				font-display: swap;
 			}
 		</style>
-		<link href="/stylesheets/nes_css/nes.core.min.css" rel="stylesheet" />
 		%sveltekit.head%
 	</head>
 	<body>

diff --git a/src/lib/NesContainer.svelte b/src/lib/NesContainer.svelte
@@ -4,7 +4,7 @@
 
 <style>
 	.modal {
-		background-color: white;
+		background-color: var(--background-color);
 		padding: 3rem;
 	}
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,3 +1,9 @@
+<script>
+	import NesCssDarkMode from "./NesCssDarkMode.svelte";
+</script>
+
+<NesCssDarkMode />
+
 <slot />
 
 <footer>
@@ -19,6 +25,37 @@
 </footer>
 
 <style>
+	:root {
+		--background-color: #fff;
+		--text-color: #212529;
+		--food-emoji: "🍎";
+		--snake-emoji: "🐍";
+		--board-outline-color: var(--text-color);
+		--checker-color: #f0f0f0;
+		--snake-color: green;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:root {
+			--background-color: #212529;
+			--text-color: #fff;
+			--food-emoji: "🎃";
+			--snake-emoji: "🪱";
+			--board-outline-color: #676767;
+			--checker-color: #343434;
+			--snake-color: palevioletred;
+		}
+
+		:global(a) {
+			color: cornflowerblue;
+		}
+	}
+
+	:global(body) {
+		background-color: var(--background-color);
+		color: var(--text-color);
+	}
+
 	footer {
 		margin: 1rem;
 		display: flex;

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -87,10 +87,10 @@
 	}
 
 	h1::before {
-		content: "🍎";
+		content: var(--food-emoji);
 	}
 	h1::after {
-		content: "🐍";
+		content: var(--snake-emoji);
 	}
 	h1::before,
 	h1::after {
@@ -104,7 +104,7 @@
 	}
 
 	table {
-		border: 2px solid black;
+		border: 2px solid var(--text-color);
 		margin: 0 auto;
 	}
 
@@ -114,7 +114,7 @@
 
 	td,
 	th {
-		border: 2px solid black;
+		border: 2px solid var(--text-color);
 		padding: 0.75rem;
 	}
 </style>
diff --git a/src/routes/NesCssDarkMode.svelte b/src/routes/NesCssDarkMode.svelte
@@ -0,0 +1,115 @@
+<!--
+  Nes.css contains a lot of styles that are applied if you add the "is-dark" class to elements.
+  This file applies the same styles when you are in dark mode, so that you don't have to add the class.
+
+  The
+-->
+<style>
+	@media (prefers-color-scheme: dark) {
+		:global(.nes-container) {
+			position: relative;
+			margin: 4px;
+			color: #fff;
+			background-color: #212529;
+			border-color: #fff;
+		}
+
+		:global(.nes-container::after) {
+			position: absolute;
+			top: -7.2px;
+			right: -7.2px;
+			bottom: -7.2px;
+			left: -7.2px;
+			z-index: -1;
+			content: "";
+			background-color: #212529;
+		}
+
+		:global(.nes-container.with-title > .title) {
+			color: #fff;
+			background-color: #212529;
+		}
+
+		:global(.nes-container.is-rounded) {
+			border-image-slice: 3;
+			border-image-width: 3;
+			border-image-repeat: stretch;
+			border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(255,255,255)" /></svg>');
+			border-image-outset: 0;
+		}
+
+		:global(.nes-container.is-rounded::after) {
+			content: none;
+		}
+		:global(.nes-container.is-rounded.with-title > .title) {
+			margin-top: -1.3rem;
+		}
+		:global(.nes-container.is-rounded.with-title.is-centered > .title) {
+			margin: -1.3rem auto 1rem;
+		}
+		:global(.nes-container.is-rounded.with-title.is-right > .title) {
+			margin: -1.3rem 0 1rem auto;
+		}
+
+		@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
+			.nes-container.is-rounded {
+				border-image-repeat: space;
+			}
+		}
+		@supports (-moz-appearance: meterbar) {
+			.nes-container.is-rounded {
+				border-image-repeat: stretch;
+			}
+		}
+
+		:global(.nes-table) {
+			color: #fff;
+			background-color: #212529;
+		}
+
+		/* This applies some giant container, making it impossible to reach the input fields. */
+		/*:global(.nes-table::before) {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		content: "";
+	}*/
+
+		:global(.nes-table.is-bordered) {
+			border-image-slice: 2;
+			border-image-width: 2;
+			border-image-repeat: stretch;
+			border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(255,255,255)" /></svg>');
+			border-image-outset: 0;
+		}
+
+		@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
+			:global(.nes-table.is-bordered) {
+				border-image-repeat: space;
+			}
+		}
+		@supports (-moz-appearance: meterbar) {
+			:global(.nes-table.is-bordered) {
+				border-image-repeat: stretch;
+			}
+		}
+
+		:global(.nes-table td, .nes-table th) {
+			border-color: #fff;
+		}
+
+		:global(.nes-table td::after, .nes-table td::before, .nes-table
+				th::after, .nes-table th::before) {
+			display: none;
+		}
+
+		:global(.nes-input, .nes-textarea) {
+			border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(255,255,255)" /></svg>');
+			outline-color: #e7e7e7;
+			color: #fff;
+			background-color: #212529;
+		}
+	}
+</style>
diff --git a/src/routes/finished-game/+page.svelte b/src/routes/finished-game/+page.svelte
@@ -195,10 +195,6 @@
 {/if}
 
 <style>
-	:root {
-		--checker-color: #f0f0f0;
-	}
-
 	.modal-container {
 		position: absolute;
 		left: 50%;

diff --git a/src/routes/finished-game/Board.svelte b/src/routes/finished-game/Board.svelte
@@ -60,7 +60,7 @@
 	}
 
 	.body-part {
-		background-color: green;
+		background-color: var(--snake-color);
 	}
 
 	.head {
@@ -72,11 +72,15 @@
 		transition: top var(--tick-time) linear, left var(--tick-time) linear;
 	}
 
-	.apple::before {
-		content: "🍎";
+	.apple {
+		transform: scale(1.1);
 		font-size: calc(var(--cell-size) * 0.8);
 	}
 
+	.apple::before {
+		content: var(--food-emoji);
+	}
+
 	.skull::before {
 		content: "☠️";
 		overflow: hidden;
@@ -95,7 +99,7 @@
 
 		position: relative;
 		margin: var(--border-width);
-		outline: var(--border-width) solid black;
+		outline: var(--border-width) solid var(--board-outline-color);
 
 		background-image: linear-gradient(
 				45deg,

diff --git a/src/routes/tasks/1.1/problem/+page.svelte b/src/routes/tasks/1.1/problem/+page.svelte
@@ -27,10 +27,6 @@
 </div>
 
 <style>
-	:root {
-		--checker-color: #f0f0f0;
-	}
-
 	.modal-container {
 		position: absolute;
 		left: 50%;
@@ -65,7 +61,7 @@
 	}
 
 	.body-part {
-		background-color: green;
+		background-color: var(--snake-color);
 	}
 
 	.head {
@@ -77,11 +73,15 @@
 		transition: top var(--tick-time) linear, left var(--tick-time) linear;
 	}
 
-	.apple::before {
-		content: "🍎";
+	.apple {
+		transform: scale(1.1);
 		font-size: calc(var(--cell-size) * 0.8);
 	}
 
+	.apple::before {
+		content: var(--food-emoji);
+	}
+
 	.skull::before {
 		content: "☠️";
 		overflow: hidden;
@@ -100,7 +100,7 @@
 
 		position: relative;
 		margin: var(--border-width);
-		outline: var(--border-width) solid black;
+		outline: var(--border-width) solid var(--board-outline-color);
 
 		background-image: linear-gradient(
 				45deg,

diff --git a/src/routes/tasks/1.1/solution/+page.svelte b/src/routes/tasks/1.1/solution/+page.svelte
@@ -30,10 +30,6 @@
 </div>
 
 <style>
-	:root {
-		--checker-color: #f0f0f0;
-	}
-
 	.modal-container {
 		position: absolute;
 		left: 50%;
@@ -68,7 +64,7 @@
 	}
 
 	.body-part {
-		background-color: green;
+		background-color: var(--snake-color);
 	}
 
 	.head {
@@ -80,11 +76,15 @@
 		transition: top var(--tick-time) linear, left var(--tick-time) linear;
 	}
 
-	.apple::before {
-		content: "🍎";
+	.apple {
+		transform: scale(1.1);
 		font-size: calc(var(--cell-size) * 0.8);
 	}
 
+	.apple::before {
+		content: var(--food-emoji);
+	}
+
 	.skull::before {
 		content: "☠️";
 		overflow: hidden;
@@ -103,7 +103,7 @@
 
 		position: relative;
 		margin: var(--border-width);
-		outline: var(--border-width) solid black;
+		outline: var(--border-width) solid var(--board-outline-color);
 
 		background-image: linear-gradient(
 				45deg,