Merge pull request #1085 from gethinode/develop

Reduce screen flickering when using color mode
gethinode · Aug 12, 2024 · 1dfce3d · 1dfce3d
2 parents 54e0f72 + 145b2c2
commit 1dfce3d
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 7 deletions.
diff --git a/assets/js/critical/color.js b/assets/js/critical/color.js
@@ -61,7 +61,6 @@
   })
 
   window.addEventListener('DOMContentLoaded', () => {
-    setTheme(getTheme())
     const light = (document.documentElement.getAttribute('data-bs-theme') === 'light')
 
     document.querySelectorAll('.ball').forEach(ball => {
@@ -71,6 +70,7 @@
     document.querySelectorAll('.navbar-mode-selector').forEach(chk => {
       chk.checked = light
       chk.addEventListener('change', function () {
+        document.documentElement.setAttribute('data-bs-theme-animate', 'true')
         toggleTheme()
       })
     })
@@ -87,6 +87,9 @@
       chk.checked = light
     })
   });  
+
+  // initialize theme directly when script is invoked
+  setTheme(getTheme())
 })()
 
 {{- end -}}
diff --git a/assets/scss/common/_styles.scss b/assets/scss/common/_styles.scss
@@ -1,5 +1,5 @@
 @if $enable-dark-mode {
-    body { 
+    [data-bs-theme-animate="true"] body { 
         transition: background-color 0.5s, color 0.5s; 
     }
 }

diff --git a/assets/scss/components/_navbar.scss b/assets/scss/components/_navbar.scss
@@ -1,11 +1,17 @@
 // stylelint-disable annotation-no-unknown
 
 // Source: https://jsfiddle.net/njhgr40m/
+
+@if $enable-dark-mode {
+    [data-bs-theme-animate="true"] .navbar {
+        transition: 0.5s ease-in-out;
+    }
+}
+
 .navbar {
     --bs-navbar-expanded-color: var(--bs-body-bg);
     --bs-navbar-toggler-color: var(--bs-navbar-hover-color);
 
-    transition: 0.5s ease-in-out;
     background-color: transparent;
 
     @each $state, $val in $theme-colors {

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -36,11 +36,11 @@
 <!doctype html>
 <html lang="{{ .Site.Language.Lang }}" class="no-js">
     <head>
+        {{- partial "footer/scripts.html" (dict "filename" "js/critical.bundle.js" "match" "js/critical/**.js" "header" true "page" .) -}}
         {{ block "head" . }}{{ end -}}
     </head>
 
     <body>
-        {{- partial "footer/scripts.html" (dict "filename" "js/critical.bundle.js" "match" "js/critical/**.js" "header" true "page" .) -}}
         <div class="d-flex flex-column min-vh-100">
             <div class="d-flex flex-column {{ if $fullCover }} fullscreen{{ end }}{{ if .IsHome }} {{ .Site.Params.home.style }}{{ end }}">
                 {{- partial "assets/navbar.html" (dict

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.25.3",
+  "version": "0.25.4",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",