mirrors/caddy-website
1
0
Fork 0
mirror of https://github.com/caddyserver/website.git synced 2025-04-22 04:56:17 -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
parent c24f50cad3
commit f830794fc4
No known key found for this signature in database
GPG key ID: 2A349DD577D586A5
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); // 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 // when the system theme changes, apply that to our site if system theme is configured
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches }) => { window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches }) => {
@ -74,11 +74,12 @@ function setTheme(theme) {
theme = "system"; theme = "system";
} }
localStorage.setItem("theme", theme); localStorage.setItem("theme", theme);
$('#current-theme').innerText = theme; ready(function() { $('#current-theme').innerText = theme; });
if (theme == "system") { let lightOrDarkTheme = theme;
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light"; 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. // applyTheme simply adds or removes the 'dark' class to the HTML.
@ -122,3 +123,8 @@ on('mouseover', '.button', (e) => {
elem.remove(); elem.remove();
}, 1000); }, 1000);
}); });
// immediately set the configured theme to avoid flash
setTheme(getTheme());