feat: add theme toggler on client side

static/script.js

@@ -6,7 +6,7 @@ function showAbout() {
 	fullAbout.classList.toggle("hidden")
 }
 
-[fullAbout, summary].forEach(item => item.onclick = showAbout)
+fullAbout && [fullAbout, summary].forEach(item => item.onclick = showAbout)
 
 document.querySelectorAll("#lyrics a").forEach(item => {
 	item.addEventListener("click", getAnnotation)
@@ -36,3 +36,34 @@ function getAnnotation(e) {
 		}
 	}
 }
+
+window._currentTheme = localStorage.getItem("_theme") || "light"
+setTheme(window._currentTheme)
+
+const themeChooser = document.getElementById("choose-theme")
+themeChooser.addEventListener("click", function() {
+	if (window._currentTheme === "dark") {
+		setTheme("light")
+	} else {
+		setTheme("dark")
+	}
+})
+
+function setTheme(theme) {
+	const toggler = document.getElementById("ic_fluent_dark_theme_24_regular")
+	switch (theme) {
+		case "dark":
+			toggler.setAttribute("fill", "#fff")
+			localStorage.setItem("_theme", "dark")
+			document.body.classList.add("dark")
+			window._currentTheme = "dark"
+			return
+		case "light":
+			toggler.setAttribute("fill", "#181d31")
+			localStorage.setItem("_theme", "light")
+			document.body.classList.remove("dark")
+			window._currentTheme = "light"
+			return
+
+	}
+}

style/annotation.css

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

style/error.css

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

style/footer.css

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

style/home.css

@@ -37,16 +37,14 @@
 	color: #222;
 }
 
-@media (prefers-color-scheme: dark) {
+.dark #home h1 {
-	#home h1 {
 	color: #eee;
-	}
+}
-
+
-	#home p {
+.dark #home p {
-		color: #ddd;
+	color: #ddd;
-	}
+}
-
+
-	#search-input {
+.dark #search-input {
-		background-color: #ddd;
+	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.dark {
-	body {
 	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;
+	justify-content: space-between;
-	padding: 0.5rem;
+	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) {
+#choose-theme {
-	nav {
+	background: none;
-		background-color: #fec260;
+	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) {
+.dark #search-page h1 {
-	#search-page h1 {
 	color: #eee;
-	}
+}
-
+
-	#search-item {
+.dark #search-item {
-		border: 1px solid #888;
+	border: 1px solid #888;
-	}
+}
-
+
-	#search-item h2 {
+.dark #search-item h2 {
-		color: #ddd;
+	color: #ddd;
-	}
+}
-
+
-	#search-item span {
+.dark #search-item span {
-		color: #bbb;
+	color: #bbb;
-	}
 }

views/navbar.templ

@@ -2,6 +2,26 @@ package views
 
 templ navbar() {
 	<nav>
+		<div id="nav-container">
 			<a href="/"><img src="/static/logo.svg"/></a>
+			<button id="choose-theme">
+				<svg
+					width="25px"
+					height="25px"
+					viewBox="0 0 24 24"
+					version="1.1"
+					xmlns="http://www.w3.org/2000/svg"
+					xmlns:xlink="http://www.w3.org/1999/xlink"
+				>
+					<g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+						<g id="ic_fluent_dark_theme_24_regular" fill="#181d31" fill-rule="nonzero">
+							<path
+								d="M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,20.5 L12,3.5 C16.6944204,3.5 20.5,7.30557963 20.5,12 C20.5,16.6944204 16.6944204,20.5 12,20.5 Z"
+							></path>
+						</g>
+					</g>
+				</svg>
+			</button>
+		</div>
 	</nav>
 }