diff --git a/assets/script/theme.js b/assets/script/theme.js
index 45512fb..0150abe 100644
--- a/assets/script/theme.js
+++ b/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 bottom = Math.floor(Math.random() * 150);
- var img = document.createElement("img");
- img.className = "tree";
- img.height = 300;
- img.alt = "";
- img.style.position = "fixed";
- img.style.left = left + "px";
- img.style.bottom = bottom + "px";
- document.body.appendChild(img);
+ var left = x + Math.floor(Math.random() * 240 / 2);
+ var bottom = Math.floor(Math.random() * 150);
+
+ for (var i = 0; i < 2; i++) {
+ var theme = ["light", "dark"][i];
+ var img = document.createElement("img");
+ img.src = "/assets/img/tree_" + theme + (window.SVGElement ? ".svg" : ".png");
+ img.className = theme + " tree";
+ img.height = 300;
+ 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
- deselectThemeButton(document.querySelector(".theme-btn.selected"));
- selectThemeButton(target);
+ // Enable / disable the right stylesheets
+ var themeStyles = document.getElementsByClassName("theme-style");
+ 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
diff --git a/assets/style/dark-mode.css b/assets/style/dark-mode.css
index d39d031..14eefb6 100644
--- a/assets/style/dark-mode.css
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/assets/style/detect-dark-mode.css b/assets/style/detect-dark-mode.css
index 847dc7f..56aa881 100644
--- a/assets/style/detect-dark-mode.css
+++ b/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;
+}
+
diff --git a/assets/style/light-mode.css b/assets/style/light-mode.css
index 139a2ed..6f9a47b 100644
--- a/assets/style/light-mode.css
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/assets/style/main.css b/assets/style/main.css
index 8accae1..b3cfe8f 100644
--- a/assets/style/main.css
+++ b/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 {
- text-decoration: none;
- cursor: default;
+.theme-btn:hover {
+ text-decoration: none;
}
+.theme-check {
+ display: none;
+}
+
/* Main section */
#main-and-sidebar {
@@ -249,4 +256,4 @@ object {
}
img {
border: none; /* Fix ico images on internet explorer */
-}
\ No newline at end of file
+}
diff --git a/inc/head.inc b/inc/head.inc
index cc71824..98d0e88 100644
--- a/inc/head.inc
+++ b/inc/head.inc
@@ -7,14 +7,9 @@
Reimar
-
-
-
-
-
-
-
-
+stylesheet" href="assets/style/detect-dark-mode.css" data-theme="auto" title="Auto">
+stylesheet" href="/assets/style/light-mode.css" data-theme="light" title="Light">
+stylesheet" href="/assets/style/dark-mode.css" data-theme="dark" title="Dark">