From 63250c6ac93e073ecae389a080e93972549bd1eb Mon Sep 17 00:00:00 2001 From: Mark Dumay <61946753+markdumay@users.noreply.github.com> Date: Mon, 12 Aug 2024 14:48:21 +0200 Subject: [PATCH 1/2] Reduce screen flickering when using color mode --- assets/js/critical/color.js | 5 ++++- assets/scss/common/_styles.scss | 2 +- assets/scss/components/_navbar.scss | 8 +++++++- layouts/_default/baseof.html | 2 +- 4 files changed, 13 insertions(+), 4 deletions(-) diff --git a/assets/js/critical/color.js b/assets/js/critical/color.js index 98dde411e..6121e209d 100644 --- 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 -}} \ No newline at end of file diff --git a/assets/scss/common/_styles.scss b/assets/scss/common/_styles.scss index d61733131..fbcecabf8 100644 --- 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 index 86c00a87b..a5cb1a42d 100644 --- 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 index dfca2634d..e2e578754 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -36,11 +36,11 @@ + {{- partial "footer/scripts.html" (dict "filename" "js/critical.bundle.js" "match" "js/critical/**.js" "header" true "page" .) -}} {{ block "head" . }}{{ end -}} - {{- partial "footer/scripts.html" (dict "filename" "js/critical.bundle.js" "match" "js/critical/**.js" "header" true "page" .) -}}
{{- partial "assets/navbar.html" (dict From 77fe046beacf9f5c65bff5cee6446977c61595f7 Mon Sep 17 00:00:00 2001 From: Mark Dumay <61946753+markdumay@users.noreply.github.com> Date: Mon, 12 Aug 2024 14:48:47 +0200 Subject: [PATCH 2/2] Bump package release --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0f02fef37..5d67e0984 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@gethinode/hinode", - "version": "0.25.3", + "version": "0.25.4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@gethinode/hinode", - "version": "0.25.3", + "version": "0.25.4", "license": "MIT", "dependencies": { "@fullhuman/postcss-purgecss": "^6.0.0", diff --git a/package.json b/package.json index d0db8860c..803be954c 100644 --- 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",