Add support for alternative stylesheets

This commit is contained in:
ReimarPB 2023-08-13 20:32:01 +02:00
parent 206fd6ef2f
commit f7fcf6788c
7 changed files with 90 additions and 106 deletions

View File

@ -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

View File

@ -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;

View File

@ -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;
}

View File

@ -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;

View File

@ -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 {

View File

@ -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>

View File

@ -3,26 +3,21 @@
<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 ? "" : " &#10003;") ?>
</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">&#10003;</span>
</span>
<br>
<?php endforeach; ?>
</div>