feat: add theme toggler on client side

style/annotation.css

@@ -26,9 +26,7 @@
 	padding-left: 1em;
 }
 
-@media (prefers-color-scheme: dark) {
-	.annotation {
-		background-color: #272d44;
-		color: inherit;
-	}
+.dark .annotation {
+	background-color: #272d44;
+	color: inherit;
 }

style/error.css

@@ -20,12 +20,10 @@
 	text-align: center;
 }
 
-@media (prefers-color-scheme: dark) {
-	#error h1 {
-		color: #eee;
-	}
-
-	#error p {
-		color: #ddd;
-	}
+.dark #error h1 {
+	color: #eee;
+}
+
+.dark #error p {
+	color: #ddd;
 }

style/footer.css

@@ -41,8 +41,6 @@ footer a:hover {
 	}
 }
 
-@media (prefers-color-scheme: dark) {
-	footer {
-		background-color: #fec260;
-	}
+.dark footer {
+	background-color: #fec260;
 }

style/home.css

@@ -37,16 +37,14 @@
 	color: #222;
 }
 
-@media (prefers-color-scheme: dark) {
-	#home h1 {
-		color: #eee;
-	}
-
-	#home p {
-		color: #ddd;
-	}
-
-	#search-input {
-		background-color: #ddd;
-	}
+.dark #home h1 {
+	color: #eee;
+}
+
+.dark #home p {
+	color: #ddd;
+}
+
+.dark #search-input {
+	background-color: #ddd;
 }

style/lyrics.css

@@ -95,41 +95,41 @@
 	display: none;
 }
 
+.dark #lyrics {
+	color: #ccc;
+}
+
+.dark #lyrics a {
+	background-color: #272d44;
+	color: inherit;
+}
+
+.dark #lyrics a:hover {
+	background-color: #32384f;
+}
+
+.dark #metadata h1 {
+	color: #ddd;
+}
+
+.dark #metadata h2,
+.dark #credits p {
+	color: #eee;
+}
+
+.dark #title {
+	color: #ddd;
+}
+
+.dark #about p,
+.dark #credits summary {
+	color: #ccc;
+}
+
 @media screen and (max-width: 1080px) {
 	#metadata {
 		align-items: center;
+		text-align: center;
 	}
 }
 
-@media (prefers-color-scheme: dark) {
-	#lyrics {
-		color: #ccc;
-	}
-
-	#lyrics a {
-		background-color: #272d44;
-		color: inherit;
-	}
-
-	#lyrics a:hover {
-		background-color: #32384f;
-	}
-
-	#metadata h1 {
-		color: #ddd;
-	}
-
-	#metadata h2,
-	#credits p {
-		color: #eee;
-	}
-
-	#title {
-		color: #ddd;
-	}
-
-	#about p,
-	#credits summary {
-		color: #ccc;
-	}
-}

style/main.css

@@ -57,8 +57,6 @@ a {
 	text-decoration: none;
 }
 
-@media (prefers-color-scheme: dark) {
-	body {
-		background-color: #181d31;
-	}
+body.dark {
+	background-color: #181d31;
 }

style/navbar.css

@@ -1,17 +1,38 @@
 nav {
 	background-color: #ffcd38;
+	padding: 1rem 0;
+}
+
+#nav-container {
+	width: 1024px;
 	display: flex;
 	align-items: center;
-	justify-content: center;
-	padding: 0.5rem;
+	justify-content: space-between;
+	margin: 0 auto;
 }
 
+@media screen and (max-width: 1080px) {
+	#nav-container {
+		width: 100%;
+		padding: 0 2rem;
+		box-sizing: border-box;
+	}
+}
+
+
 nav img {
 	width: 50px;
 }
 
-@media (prefers-color-scheme: dark) {
-	nav {
-		background-color: #fec260;
-	}
+#choose-theme {
+	background: none;
+	border: none;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.dark nav {
+	background-color: #fec260;
 }

style/search.css

@@ -95,20 +95,18 @@
 	border-radius: 5px;
 }
 
-@media (prefers-color-scheme: dark) {
-	#search-page h1 {
-		color: #eee;
-	}
-
-	#search-item {
-		border: 1px solid #888;
-	}
-
-	#search-item h2 {
-		color: #ddd;
-	}
-
-	#search-item span {
-		color: #bbb;
-	}
+.dark #search-page h1 {
+	color: #eee;
+}
+
+.dark #search-item {
+	border: 1px solid #888;
+}
+
+.dark #search-item h2 {
+	color: #ddd;
+}
+
+.dark #search-item span {
+	color: #bbb;
 }