Add support for alternative stylesheets

assets/script/theme.js

@@ -8,8 +8,6 @@ var Themes = {
     DARK: "dark"
 };
 
-var jsTheme;
-
 window.addEventListener("load", function() {
 
     var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
@@ -17,24 +15,24 @@ window.addEventListener("load", function() {
     // Add trees
     if (!document.querySelector(".tree")) {
         for (var x = 0; x < width; x += 240) {
-            var left = x + Math.floor(Math.random() * 240 / 2);
+			var left = x + Math.floor(Math.random() * 240 / 2);
-            var bottom = Math.floor(Math.random() * 150);
+			var bottom = Math.floor(Math.random() * 150);
-            var img = document.createElement("img");
+
-            img.className = "tree";
+			for (var i = 0; i < 2; i++) {
-            img.height = 300;
+				var theme = ["light", "dark"][i];
-            img.alt = "";
+				var img = document.createElement("img");
-            img.style.position = "fixed";
+				img.src = "/assets/img/tree_" + theme + (window.SVGElement ? ".svg" : ".png");
-            img.style.left = left + "px";
+				img.className = theme + " tree";
-            img.style.bottom = bottom + "px";
+				img.height = 300;
-            document.body.appendChild(img);
+				img.alt = "";
+				img.style.position = "fixed";
+				img.style.left = left + "px";
+				img.style.bottom = bottom + "px";
+				document.body.appendChild(img);
+			}
         }
     }
 
-    // Apply current theme
-    var themeCookie = document.cookie.match(/theme=([a-z]+)/i);
-    if (themeCookie) applyTheme(themeCookie[1], true);
-    else applyPreferredTheme(true);
-
     // Add click listener to theme buttons
     var themeBtns = document.getElementsByClassName("theme-btn");
     for (var i = 0; i < themeBtns.length; i++) {
@@ -55,15 +53,16 @@ window.addEventListener("load", function() {
             // Apply theme changes
             if (theme === Themes.AUTO) {
                 document.cookie = "theme=; expires=Tue, 19 Jan 2038 03:14:08 GMT";
-                applyPreferredTheme(false);
             } else {
                 document.cookie = "theme=" + theme + "; expires=Tue, 19 Jan 2038 03:14:08 GMT"
-                applyTheme(theme, false);
             }
 
-            // Set new selected button
+			// Enable / disable the right stylesheets
-            deselectThemeButton(document.querySelector(".theme-btn.selected"));
+			var themeStyles = document.getElementsByClassName("theme-style");
-            selectThemeButton(target);
+			for (var i = 0; i < themeStyles.length; i++) {
+				themeStyles[i].disabled = true;
+				if (themeStyles[i].getAttribute("data-theme") === theme) themeStyles[i].disabled = false;
+			}
 
             // Force redrawing of containers because of a bug in IE8
             var containers = document.getElementsByClassName("container");
@@ -72,59 +71,6 @@ window.addEventListener("load", function() {
         }
     }
 
-    // Automatically computes the preferred theme and calls applyTheme() with it
-    function applyPreferredTheme(firstTime) {
-        var preferredTheme = ("matchMedia" in window && matchMedia("(prefers-color-scheme: dark)").matches) ? Themes.DARK : Themes.LIGHT;
-        applyTheme(preferredTheme, firstTime);
-    }
-
-    function applyTheme(theme, firstTime) {
-
-        if (jsTheme && jsTheme.href.match(theme)) return;
-
-        // Set trees
-        var trees = document.getElementsByClassName("tree");
-        for (var i = 0; i < trees.length; i++) {
-            trees[i].src = "/assets/img/tree_" + theme + (window.SVGElement ? ".svg" : ".png");
-        }
-
-        if (!firstTime) {
-
-            if (jsTheme) document.head.removeChild(jsTheme);
-            jsTheme = document.createElement("link");
-            jsTheme.rel = "stylesheet";
-            jsTheme.href = "/assets/style/" + theme + "-mode.css";
-            document.head.appendChild(jsTheme);
-
-            if (window.linkOnloadSupported) {
-                document.body.className += " loading";
-                jsTheme.onload = function () {
-                    document.body.className = document.body.className.replace(/\s*loading/g, "");
-                    var themeStyles = document.getElementsByClassName("theme-style");
-                    for (var i = 0; i < themeStyles.length; i++) {
-                        document.head.removeChild(themeStyles[i]);
-                    }
-                }
-            }
-
-        }
-
-    }
-
-    // Functions to select/deselect a theme button
-
-    function selectThemeButton(themeBtn) {
-        if (themeBtn.textContent) themeBtn.textContent += " ✓";
-        else themeBtn.innerText += " ✓";
-        themeBtn.className += "selected";
-    }
-
-    function deselectThemeButton(themeBtn) {
-        if (themeBtn.textContent) themeBtn.textContent = themeBtn.textContent.replace(" ✓", "");
-        else themeBtn.innerText = themeBtn.innerText.replace(" ✓", "");
-        themeBtn.className = themeBtn.className.replace("selected", "");
-    }
-
 }, false);
 
 // @license-end

assets/style/dark-mode.css

@@ -20,6 +20,15 @@ body {
     color: #212121;
 }
 
+/* Theme buttons */
+#dark-theme .theme-check {
+	display: inline;
+}
+#dark-theme .theme-btn {
+    text-decoration: none;
+    cursor: default;
+}
+
 /* Background */
 #grass {
     background-color: #265728;
@@ -66,4 +75,4 @@ body {
 }
 .light {
     display: none !important;
-}
+}

assets/style/detect-dark-mode.css

@@ -3,4 +3,27 @@
     Dark mode can be forced by importing the CSS file below in the HTML
     Light mode can be forced by not loading this file at all
  */
+@import "/assets/style/light-mode.css";
 @import "/assets/style/dark-mode.css" (prefers-color-scheme: dark);
+
+/* Theme buttons */
+/* Shouldn't be overriden by the detected theme */
+.theme-btn {
+    padding-left: 3px !important;
+	text-decoration: underline !important;
+	cursor: pointer !important;
+}
+.theme-btn:hover {
+	text-decoration: none !important;
+}
+.theme-check {
+	display: none !important;
+}
+#auto-theme .theme-check {
+	display: inline !important;
+}
+#auto-theme .theme-btn {
+    text-decoration: none !important;
+    cursor: default !important;
+}
+

assets/style/light-mode.css

@@ -20,6 +20,15 @@ body {
     color: #EEE;
 }
 
+/* Theme buttons */
+#light-theme .theme-check {
+	display: inline;
+}
+#light-theme .theme-btn {
+    text-decoration: none;
+    cursor: default;
+}
+
 /* Background */
 #grass {
 	background-color: #4CAF50;
@@ -66,4 +75,4 @@ body {
 }
 .dark {
     display: none !important;
-}
+}

assets/style/main.css

@@ -92,13 +92,20 @@ a:hover {
     text-align: left;
     line-height: 1.5;
 }
+
+/* Theme buttons */
 .theme-btn {
     padding-left: 3px;
+	text-decoration: underline;
+	cursor: pointer;
 }
-.theme-btn.selected {
+.theme-btn:hover {
-    text-decoration: none;
+	text-decoration: none;
-    cursor: default;
 }
+.theme-check {
+	display: none;
+}
+
 
 /* Main section */
 #main-and-sidebar {
@@ -249,4 +256,4 @@ object {
 }
 img {
     border: none; /* Fix ico images on internet explorer */
-}
+}

inc/head.inc

@@ -7,14 +7,9 @@
 <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 <title>Reimar</title>
 <link rel="stylesheet" href="/assets/style/main.css" onload="linkOnloadSupported = true">
-<?php if ($_COOKIE["theme"] == "dark") : ?>
+<link class="theme-style" rel="<?= $_COOKIE["theme"]            ? "alternate " : "" ?>stylesheet" href="assets/style/detect-dark-mode.css" data-theme="auto" title="Auto">
-	<link class="theme-style" rel="stylesheet" href="/assets/style/dark-mode.css">
+<link class="theme-style" rel="<?= $_COOKIE["theme"] != "light" ? "alternate " : "" ?>stylesheet" href="/assets/style/light-mode.css" data-theme="light" title="Light">
-<?php else : ?>
+<link class="theme-style" rel="<?= $_COOKIE["theme"] != "dark"  ? "alternate " : "" ?>stylesheet" href="/assets/style/dark-mode.css" data-theme="dark" title="Dark">
-	<link class="theme-style" rel="stylesheet" href="/assets/style/light-mode.css">
-<?php endif ?>
-<?php if (!$_COOKIE["theme"]) : ?>
-	<style>@import "/assets/style/dark-mode.css" (prefers-color-scheme: dark)</style>
-<?php endif ?>
 <!--[if lt IE 6]><style>.container { box-shadow: none !important; }</style><![endif]-->
 <!--[if lte IE 9]>
     <script src="/assets/script/compatibility.js"></script>

inc/sidebar.inc

@@ -3,29 +3,24 @@
 		<aside>
 			<div class="section container" style="font-size: 14px;">
 				<h2>Theme</h2>
-                <?php
+                <?php foreach (["auto", "light", "dark"] as $theme): ?>
-                    // List of themes and a condition to test if it's deselected (!)
-                    $themes = [
-                        "auto" => $_COOKIE["theme"],
-                        "light" => $_COOKIE["theme"] != "light",
-                        "dark" => $_COOKIE["theme"] != "dark"
-                    ];
-                ?>
-                <?php foreach ($themes as $name=>$condition): ?>
                     <picture class="light">
-                        <source type="image/svg+xml" srcset="/assets/icons/light-mode/theme-<?= $name ?>.svg">
+                        <source type="image/svg+xml" srcset="/assets/icons/light-mode/theme-<?= $theme ?>.svg">
-                        <img class="icon" src="/assets/icons/light-mode/theme-<?= $name ?>.png" alt="">
+                        <img class="icon" src="/assets/icons/light-mode/theme-<?= $theme ?>.png" alt="">
                     </picture>
                     <picture class="dark">
-                        <source type="image/svg+xml" srcset="/assets/icons/dark-mode/theme-<?= $name ?>.svg">
+                        <source type="image/svg+xml" srcset="/assets/icons/dark-mode/theme-<?= $theme ?>.svg">
-                        <img class="icon" src="/assets/icons/dark-mode/theme-<?= $name ?>.png" alt="">
+                        <img class="icon" src="/assets/icons/dark-mode/theme-<?= $theme ?>.png" alt="">
                     </picture>
-                    <a class="theme-btn <?= $condition ? "" : "selected" ?>" data-theme="<?= $name ?>" href="/api/set_theme/<?= $name ?>.php">
+					<span id="<?= $theme ?>-theme">
-                        <?= ucwords($name) . ($condition ? "" : " &#10003;") ?>
+						<a class="theme-btn" data-theme="<?= $theme ?>" href="/api/set_theme/<?= $name ?>.php">
-                    </a>
+							<?= ucwords($theme) ?>
+						</a>
+						<span class="theme-check">&#10003;</span>
+					</span>
                     <br>
                 <?php endforeach; ?>
 			</div>
 		</aside>
 	</div>
-</div>
+</div>