From 0ff45cd63679b84b6109fb184298dfa5bc281d3b Mon Sep 17 00:00:00 2001 From: Vincent Ogloblinsky Date: Wed, 1 Nov 2023 17:43:54 +0100 Subject: [PATCH] fix(dark-mode): avoid flickering when navigating between pages closes #1397 --- src/resources/js/menu.js | 55 ------------------------------------- src/templates/page.hbs | 58 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 58 insertions(+), 55 deletions(-) diff --git a/src/resources/js/menu.js b/src/resources/js/menu.js index 83ce4f08..984c65d0 100644 --- a/src/resources/js/menu.js +++ b/src/resources/js/menu.js @@ -266,60 +266,5 @@ document.addEventListener('DOMContentLoaded', function () { }, 300); } } - // Dark mode toggle button - var useDark = window.matchMedia('(prefers-color-scheme: dark)'); - var darkModeState = useDark.matches; - var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input'); - var $darkModeToggles = document.querySelectorAll('.dark-mode-switch'); - var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state'); - - function checkToggle(check) { - for (var i = 0; i < $darkModeToggleSwitchers.length; i++) { - $darkModeToggleSwitchers[i].checked = check; - } - } - - function toggleDarkMode(state) { - if (window.localStorage) { - localStorage.setItem('compodoc_darkmode-state', state); - } - - checkToggle(state); - - const hasClass = document.body.classList.contains('dark'); - - if (state) { - for (var i = 0; i < $darkModeToggles.length; i++) { - $darkModeToggles[i].classList.add('dark'); - } - if (!hasClass) { - document.body.classList.add('dark'); - } - } else { - for (var i = 0; i < $darkModeToggles.length; i++) { - $darkModeToggles[i].classList.remove('dark'); - } - if (hasClass) { - document.body.classList.remove('dark'); - } - } - } - - useDark.addEventListener('change', function (evt) { - toggleDarkMode(evt.matches); - }); - if (darkModeStateLocal) { - darkModeState = darkModeStateLocal === 'true'; - } - toggleDarkMode(darkModeState); - - if ($darkModeToggles.length > 0) { - for (var i = 0; i < $darkModeToggleSwitchers.length; i++) { - $darkModeToggleSwitchers[i].addEventListener('change', function (event) { - darkModeState = !darkModeState; - toggleDarkMode(darkModeState); - }); - } - } }, 0); }); diff --git a/src/templates/page.hbs b/src/templates/page.hbs index 66b07c36..26dbea44 100644 --- a/src/templates/page.hbs +++ b/src/templates/page.hbs @@ -17,6 +17,64 @@ {{/if}} +
{{data.documentationMainName}}