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 <html> element instead of <body>, 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
2024-10-06 18:12:16 +02:00 · 2024-01-11 16:57:37 +01:00 · 2024-01-11 16:57:37 +01:00 · 922aa83a10
commit 922aa83a10
parent 195a00a783
4 changed files with 20 additions and 11 deletions
--- 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)
--- 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
        
--- 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
-
--- a/src/css/include.sass
+++ b/src/css/include.sass
@ -1,3 +1,3 @@
 =dark-mode()
-    body[theme=dark] &
+    html[theme=dark] &
        @content