Add manual theme selector

_includes/footer.html

@@ -1,5 +1,7 @@
 <footer class="bg-dark">
 	<div class="container">
+		<div class="row mb-3">
+			<div class="col-sm-10">
 				<p class="text-light">
 					{{ site.data[page.collection].strings.by | replace: "$1", '<a href="https://github.com/DS-Homebrew/" class="link">DS-Homebrew</a>'}} •
 					<a href="https://ds-homebrew.com/discord" title="{{ site.data[page.collection].strings.discord-server }}" class="clean">
@@ -13,4 +15,14 @@
 					{{ site.data[page.collection].strings.published-with | replace: "$1", site.repo }}
 				</p>
 			</div>
+			<div class="col-sm-2">
+				<label for="themeSelector" class="text-light">Color scheme:</label>
+				<select id="themeSelector" class="form-select form-select-dark text-light" onchange="setTheme(value)">
+					<option value="default">Default</option>
+					<option value="dark">Dark</option>
+					<option value="light">Light</option>
+				</select>
+			</div>
+		</div>
+	</div>
 </footer>

_includes/head.html

@@ -17,6 +17,7 @@
 {% endif %}
 
 <link rel="stylesheet" type="text/css" media="screen" href="/assets/css/style.css">
+<script src="/assets/js/theme.js"></script>
 
 {% include favicon.html %}
 {% include seo.html %}

assets/css/style.scss

@@ -480,6 +480,12 @@ input:checked+label.btn-outline-secondary:hover, input:checked+label.btn-outline
 	border-color: #565e64;
 }
 
+// Select
+.form-select-dark {
+	background-color: #444;
+	border: 1px solid #333;
+}
+
 @media only screen and (min-width: 576px) {
 	// Version of .position-absolute that only triggers for sm+
 	.position-absolute-sm {

assets/js/theme.js

@@ -0,0 +1,34 @@
+function loadTheme() {
+	if(!localStorage.theme || localStorage.theme == "default") {
+		document.getElementById("themeCSS")?.remove();
+	} else {
+		if(document.getElementById("themeCSS")) {
+			document.getElementById("themeCSS").href = `/assets/css/${localStorage.theme}.css`;
+		} else {
+			let l = document.createElement("link");
+			l.rel = "stylesheet";
+			l.type = "text/css";
+			l.media = "screen";
+			l.href = `/assets/css/${localStorage.theme}.css`
+			l.id = "themeCSS";
+		
+			document.head.appendChild(l);
+		}
+	}
+
+}
+
+function setTheme(theme) {
+	if(theme == "default")
+		delete localStorage.theme;
+	else
+		localStorage.theme = theme;
+	loadTheme();
+}
+
+loadTheme();
+
+window.onload = () => {
+	if(localStorage.theme)
+		document.getElementById("themeSelector").value = localStorage.theme;
+}