Add support for alternative stylesheets
This commit is contained in:
parent
206fd6ef2f
commit
f7fcf6788c
@ -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
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 */
|
||||
}
|
||||
}
|
||||
|
||||
11
inc/head.inc
11
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="stylesheet" href="/assets/style/dark-mode.css">
|
||||
<?php else : ?>
|
||||
<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 ?>
|
||||
<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="<?= $_COOKIE["theme"] != "light" ? "alternate " : "" ?>stylesheet" href="/assets/style/light-mode.css" data-theme="light" title="Light">
|
||||
<link class="theme-style" rel="<?= $_COOKIE["theme"] != "dark" ? "alternate " : "" ?>stylesheet" href="/assets/style/dark-mode.css" data-theme="dark" title="Dark">
|
||||
<!--[if lt IE 6]><style>.container { box-shadow: none !important; }</style><![endif]-->
|
||||
<!--[if lte IE 9]>
|
||||
<script src="/assets/script/compatibility.js"></script>
|
||||
|
||||
@ -3,29 +3,24 @@
|
||||
<aside>
|
||||
<div class="section container" style="font-size: 14px;">
|
||||
<h2>Theme</h2>
|
||||
<?php
|
||||
// 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): ?>
|
||||
<?php foreach (["auto", "light", "dark"] as $theme): ?>
|
||||
<picture class="light">
|
||||
<source type="image/svg+xml" srcset="/assets/icons/light-mode/theme-<?= $name ?>.svg">
|
||||
<img class="icon" src="/assets/icons/light-mode/theme-<?= $name ?>.png" alt="">
|
||||
<source type="image/svg+xml" srcset="/assets/icons/light-mode/theme-<?= $theme ?>.svg">
|
||||
<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">
|
||||
<img class="icon" src="/assets/icons/dark-mode/theme-<?= $name ?>.png" alt="">
|
||||
<source type="image/svg+xml" srcset="/assets/icons/dark-mode/theme-<?= $theme ?>.svg">
|
||||
<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">
|
||||
<?= ucwords($name) . ($condition ? "" : " ✓") ?>
|
||||
</a>
|
||||
<span id="<?= $theme ?>-theme">
|
||||
<a class="theme-btn" data-theme="<?= $theme ?>" href="/api/set_theme/<?= $name ?>.php">
|
||||
<?= ucwords($theme) ?>
|
||||
</a>
|
||||
<span class="theme-check">✓</span>
|
||||
</span>
|
||||
<br>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user