From 8d9b41f43181d4b0fe2078ae1049bf8613247e1d Mon Sep 17 00:00:00 2001 From: kukimik <53443372+kukimik@users.noreply.github.com> Date: Mon, 11 Mar 2024 23:37:29 +0100 Subject: [PATCH] Fix white flashes on page load in dark mode We set the class indicating that dark mode is enabled before the page is rendered (the script is called inside ``). The class is now set on the `` element instead of `` because `document.body` is not ready yet when the script is executed. --- dhall-docs/src/Dhall/data/assets/index.css | 3 +-- dhall-docs/src/Dhall/data/assets/index.js | 13 ++++++------- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/dhall-docs/src/Dhall/data/assets/index.css b/dhall-docs/src/Dhall/data/assets/index.css index 595b7eb85..1e825419f 100644 --- a/dhall-docs/src/Dhall/data/assets/index.css +++ b/dhall-docs/src/Dhall/data/assets/index.css @@ -187,7 +187,7 @@ span.of-type-token { color: #EBEBEB; } -body.dark-mode { +.dark-mode body { background-color: #484848; } @@ -215,7 +215,6 @@ body.dark-mode { color: #D4D4D4; } - .dark-mode a.copy-to-clipboard { color: #bdbdbd !important; } diff --git a/dhall-docs/src/Dhall/data/assets/index.js b/dhall-docs/src/Dhall/data/assets/index.js index ccb85a89a..23b310d3f 100644 --- a/dhall-docs/src/Dhall/data/assets/index.js +++ b/dhall-docs/src/Dhall/data/assets/index.js @@ -2,16 +2,15 @@ const DARK_MODE_OPT = 'dark-mode' const DARK_MODE_ACTIVE = 'dark-mode-active' const DARK_MODE_INACTIVE = 'dark-mode-inactive' +if (localStorage.getItem(DARK_MODE_OPT) == DARK_MODE_ACTIVE) { + document.documentElement.classList.add('dark-mode') +} + function onReady() { - if (localStorage.getItem(DARK_MODE_OPT) == DARK_MODE_ACTIVE) { - document.body.classList.add('dark-mode') - } else { - document.body.classList.remove('dark-mode') - } document.getElementById('switch-light-dark-mode') .addEventListener('click', () => { - document.body.classList.toggle('dark-mode') - if (document.body.classList.contains('dark-mode')) { + document.documentElement.classList.toggle('dark-mode') + if (document.documentElement.classList.contains('dark-mode')) { localStorage.setItem(DARK_MODE_OPT, DARK_MODE_ACTIVE) } else { localStorage.setItem(DARK_MODE_OPT, DARK_MODE_INACTIVE)