From 922aa83a10e2375eca4ae722dd6631ccc57f816b Mon Sep 17 00:00:00 2001 From: Jonatan Heyman Date: Thu, 11 Jan 2024 16:57:37 +0100 Subject: [PATCH] Fix "white flash" effect when resizing window in dark mode * Fix so that the background color of the page gets properly set according to the current theme. * Change so that we add the theme attribute to the element instead of , making it possible to use the +dark-mode SASS mixin in body CSS selectors * Introduce CSS variables for the status bar's background and text colors --- src/components/App.vue | 4 ++-- src/components/StatusBar.vue | 8 ++------ src/css/base.sass | 17 +++++++++++++++-- src/css/include.sass | 2 +- 4 files changed, 20 insertions(+), 11 deletions(-) diff --git a/src/components/App.vue b/src/components/App.vue index bd36f5e..4f400bc 100644 --- a/src/components/App.vue +++ b/src/components/App.vue @@ -37,9 +37,9 @@ const onThemeChange = (theme) => { this.theme = theme if (theme === "system") { - document.body.setAttribute("theme", window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light") + document.documentElement.setAttribute("theme", window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light") } else { - document.body.setAttribute("theme", theme) + document.documentElement.setAttribute("theme", theme) } } onThemeChange(window.heynote.themeMode.initial) diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue index d2622fd..9754c75 100644 --- a/src/components/StatusBar.vue +++ b/src/components/StatusBar.vue @@ -115,8 +115,8 @@ box-sizing: border-box height: 22px width: 100% - background: #48b57e - color: #fff + background: var(--status-bar-background) + color: var(--status-bar-color) font-family: "Open Sans" font-size: 12px padding-left: 0px @@ -126,10 +126,6 @@ align-items: center user-select: none - +dark-mode - background: #0e1217 - color: rgba(255, 255, 255, 0.75) - .spacer flex-grow: 1 diff --git a/src/css/base.sass b/src/css/base.sass index 12d10c8..6508cd0 100644 --- a/src/css/base.sass +++ b/src/css/base.sass @@ -1,4 +1,18 @@ -html, body +:root[theme='light'] + --status-bar-background: #48b57e + --status-bar-color: #fff + +:root[theme='dark'] + --status-bar-background: #0e1217 + --status-bar-color: rgba(255, 255, 255, 0.75) + +html + margin: 0 + padding: 0 + height: 100% + overscroll-behavior-y: none + +body margin: 0 padding: 0 background: #f4f8f4 @@ -25,4 +39,3 @@ input, button #syntaxTree height: 20% overflow-y: auto - diff --git a/src/css/include.sass b/src/css/include.sass index 1a5f167..3b5338d 100644 --- a/src/css/include.sass +++ b/src/css/include.sass @@ -1,3 +1,3 @@ =dark-mode() - body[theme=dark] & + html[theme=dark] & @content