fix: move theme class to root node to prevent white flash (#392)

lxndrblz · Nov 18, 2022 · c36e1d8 · c36e1d8
1 parent d35f57f
commit c36e1d8
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 32 deletions.
diff --git a/assets/js/anatole-theme-switcher.js b/assets/js/anatole-theme-switcher.js
@@ -1,11 +1,11 @@
 const getStoredThemeStyle = () => localStorage.getItem('theme');
 
 const setThemeClass = (style) => {
-  const body = document.body;
-  const prevTheme = [...body.classList].find((c) => c.match(/theme--(light|dark)/));
+  const html = document.documentElement;
+  const prevTheme = [...html.classList].find((c) => c.match(/theme--(light|dark)/));
   if (!prevTheme) return;
-  body.classList.remove(prevTheme);
-  body.classList.add(`theme--${style}`);
+  html.classList.remove(prevTheme);
+  html.classList.add(`theme--${style}`);
 };
 
 const setThemeStyle = (style) => {
@@ -28,16 +28,6 @@ const switchTheme = () => {
   }
 };
 
-const initTheme = () => {
-  const currThemeStyle = getStoredThemeStyle();
-  if (currThemeStyle) {
-    setThemeStyle(currThemeStyle);
-    return;
-  }
-  const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-  if (!userPrefersDark) return;
-  setThemeStyle('dark');
-};
 
 document.addEventListener(
   'DOMContentLoaded',
@@ -50,4 +40,12 @@ document.addEventListener(
 
 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', switchTheme, false);
 
-document.addEventListener('DOMContentLoaded', () => initTheme());
+const currThemeStyle = getStoredThemeStyle();
+if (currThemeStyle) {
+  setThemeStyle(currThemeStyle);
+} else {
+  const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  if (userPrefersDark) {
+    setThemeStyle('dark');
+  }
+}
diff --git a/assets/scss/partials/layout/_body.scss b/assets/scss/partials/layout/_body.scss
@@ -2,12 +2,8 @@
   width: 100%;
   margin: 0 auto;
   // work around to style body
-  &.theme--dark {
-    color: $primary--darkmode;
-    background-color: $accent--darkmode;
-  }
-  &.theme--light {
-    color: $primary--lightmode;
-    background-color: $accent--lightmode;
+  @include themed() {
+    color: t('primary');
+    background-color: t('accent');
   }
 }
diff --git a/...resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.content b/...resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.content
diff --git a/...te/resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.json b/...te/resources/_gen/assets/scss/scss/anatole.rtl.scss_97af51e696731e38130ed73ef4f4756e.json
@@ -1 +1 @@
-{"Target":"scss/main.rtl.min.e137f9eb3f0f908b136886b05cefbccc97dd271959ef5d6748a7511abc3d8111.css","MediaType":"text/css","Data":{"Integrity":"sha256-4Tf56z8PkIsTaIawXO+8zJfdJxlZ711nSKdRGrw9gRE="}}
+{"Target":"scss/main.rtl.min.a5eecfb30c244001796ebc324fb94c5c70ec99f77efddd26487bb075c44eb931.css","MediaType":"text/css","Data":{"Integrity":"sha256-pe7PswwkQAF5brwyT7lMXHDsmfd+/d0mSHuwdcROuTE="}}
diff --git a/...ite/resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.content b/...ite/resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.content
diff --git a/...leSite/resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.json b/...leSite/resources/_gen/assets/scss/scss/anatole.scss_dcc8b7002348ef29d44bd1c4b6ae0aca.json
@@ -1 +1 @@
-{"Target":"scss/main.min.b2e0cb07595e3519ab1193bb421914e06c0e26b0cc561fef23b3c6131d4d2ffa.css","MediaType":"text/css","Data":{"Integrity":"sha256-suDLB1leNRmrEZO7QhkU4GwOJrDMVh/vI7PGEx1NL/o="}}
+{"Target":"scss/main.min.5794be192d21535bdd301561e043a96b6adbad2b5c08279deff459e4661c613f.css","MediaType":"text/css","Data":{"Integrity":"sha256-V5S+GS0hU1vdMBVh4EOpa2rbrStcCCed7/RZ5GYcYT8="}}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -3,17 +3,17 @@
   dir="{{ .Site.Language.LanguageDirection | default "ltr" }}"
   lang="{{- site.Language.Lang -}}"
   data-theme="{{- .Site.Params.displayMode -}}"
-  class="html"
->
-  {{- partial "head.html" . -}}
-  <body
     {{ if eq .Site.Params.displayMode "dark" }}
-      class="body theme--dark"
+      class="html theme--dark"
 
     {{ else }}
-      class="body theme--light"
+      class="html theme--light"
 
     {{ end }}
+>
+  {{- partial "head.html" . -}}
+  <body
+      class="body"
   >
     <div class="wrapper">
       <aside