From 93b6cba2f27410274585bd44eb032954f5695522 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Fri, 17 Oct 2025 11:00:43 -0400 Subject: [PATCH 1/2] [UX] Minimize dark-mode flash, an initial and simple no-JS solution --- assets/js/dark-mode.js | 2 ++ layouts/_partials/head.html | 20 ++++++++++++++++++++ layouts/baseof.html | 3 ++- 3 files changed, 24 insertions(+), 1 deletion(-) diff --git a/assets/js/dark-mode.js b/assets/js/dark-mode.js index 2b480b1c94..333358fdf5 100644 --- a/assets/js/dark-mode.js +++ b/assets/js/dark-mode.js @@ -34,6 +34,8 @@ setTheme(getPreferredTheme()) + document.documentElement.removeAttribute('data-theme-init') + const showActiveTheme = (theme, focus = false) => { const themeSwitcher = document.querySelector('#bd-theme') diff --git a/layouts/_partials/head.html b/layouts/_partials/head.html index 04a55e6f8f..6a68ff5db7 100644 --- a/layouts/_partials/head.html +++ b/layouts/_partials/head.html @@ -1,6 +1,26 @@ {{/* cSpell:ignore docsearch opengraph outputformat */ -}} + +{{ if .Site.Params.ui.showLightDarkModeMenu -}} +{{/* Browser hints before CSS loads */ -}} + + + + +{{/* Styles to set canvas colors and avoid transitions */ -}} + +{{ end -}} + {{ range .AlternativeOutputFormats -}} {{ end -}} diff --git a/layouts/baseof.html b/layouts/baseof.html index e390629146..023868faf4 100644 --- a/layouts/baseof.html +++ b/layouts/baseof.html @@ -2,7 +2,8 @@ + class="no-js" + {{- if .Site.Params.ui.showLightDarkModeMenu }} data-theme-init{{ end }}> {{ partial "head.html" . }} From 14656c13ceb50fdae9a3759fd406907090124be0 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Fri, 17 Oct 2025 11:17:06 -0400 Subject: [PATCH 2/2] Set td theme color before CSS loads --- layouts/_partials/head.html | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/layouts/_partials/head.html b/layouts/_partials/head.html index 6a68ff5db7..258ed642ea 100644 --- a/layouts/_partials/head.html +++ b/layouts/_partials/head.html @@ -19,6 +19,21 @@ {{/* Avoid transitions until theme CSS is loaded */ -}} html[data-theme-init] * { transition: none !important; } + +{{/* Set theme attribute before CSS loads to prevent flash */ -}} + {{ end -}} {{ range .AlternativeOutputFormats -}}