mirrors/caddy-website
1
0
Fork 0
mirror of https://github.com/caddyserver/website.git synced 2025-04-20 12:15:08 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Avoid flash during color scheme change

Browse source
This commit is contained in:
Matthew Holt 2023-05-31 20:57:46 -06:00 • committed by Francis Lavoie
parent ad74208595
commit bc49a79d00
No known key found for this signature in database
GPG key ID: C5204D4F28147FC8
1 changed files with 16 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

22
new/resources/js/common.js
View file

@ -49,12 +49,12 @@ function cloneTemplate(tplSelector) {
// return document.importNode(elem.content, true);
}
ready(function() {
// on page load, immediately set the configured theme
setTheme(getTheme());
});
// when the system theme changes, apply that to our site if system theme is configured
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches }) => {
@ -74,11 +74,12 @@ function setTheme(theme) {
theme = "system";
}
localStorage.setItem("theme", theme);
$('#current-theme').innerText = theme;
if (theme == "system") {
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
ready(function() { $('#current-theme').innerText = theme; });
let lightOrDarkTheme = theme;
if (lightOrDarkTheme == "system") {
lightOrDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
}
applyTheme(theme);
applyTheme(lightOrDarkTheme);
}
// applyTheme simply adds or removes the 'dark' class to the HTML.
@ -122,3 +123,8 @@ on('mouseover', '.button', (e) => {
elem.remove();
}, 1000);
});
// immediately set the configured theme to avoid flash
setTheme(getTheme());