Try and fix white theme flashing by defering transition styles
MODIFY
website/src/_includes/scripts/index.js
website/src/_includes/scripts/index.js
@@ -7,17 +7,14 @@ window.addEventListener(
const mobileMatchMedia = matchMedia("(max-width: 768px)");
isMobile = mobileMatchMedia.matches;
- mobileMatchMedia.addEventListener(
- "change",
- (e) => {
+ mobileMatchMedia.addListener((e) => {
isMobile = e.matches;
// Close the mobile sidebar when switching from mobile to desktop
if (isMobileSidebarVisible && !isMobile && isMobileSidebarVisible) {
toggleMobileSidebar();
}
- },
- );
+ });
},
);
@@ -408,6 +405,7 @@ function toggleColorSchemeSwitch() {
const newScheme = currentScheme === "dark" ? "light" : "dark";
window.localStorage.setItem("data-theme", newScheme);
+ document.documentElement.classList.add("transition");
document.documentElement.setAttribute("data-theme", newScheme);
}

MODIFY
website/src/styles/_global.scss
website/src/styles/_global.scss
@@ -4,9 +4,12 @@ html {
}
html {
+ background: var(--background-color);
+}
+
+html.transition {
@include transition-timing;
transition-property: background;
- background: var(--background-color);
}
body {

Try and fix white theme flashing by defering transition styles (#895)