extern/heynote
1
0
Fork 0
mirror of https://github.com/heyman/heynote.git synced 2024-11-25 01:13:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix "white flash" effect when resizing window in dark mode

Browse Source 
* 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
This commit is contained in:
Jonatan Heyman 2024-01-11 16:57:37 +01:00
parent 195a00a783
commit 922aa83a10
4 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/App.vue
View File

@ -37,9 +37,9 @@
const onThemeChange = (theme) => { const onThemeChange = (theme) => {
this.theme = theme this.theme = theme
if (theme === "system") { 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 { } else {
document.body.setAttribute("theme", theme) document.documentElement.setAttribute("theme", theme)
} }
} }
onThemeChange(window.heynote.themeMode.initial) onThemeChange(window.heynote.themeMode.initial)

8
src/components/StatusBar.vue
View File

@ -115,8 +115,8 @@
box-sizing: border-box box-sizing: border-box
height: 22px height: 22px
width: 100% width: 100%
background: #48b57e background: var(--status-bar-background)
color: #fff color: var(--status-bar-color)
font-family: "Open Sans" font-family: "Open Sans"
font-size: 12px font-size: 12px
padding-left: 0px padding-left: 0px
@ -126,10 +126,6 @@
align-items: center align-items: center
user-select: none user-select: none
+dark-mode
background: #0e1217
color: rgba(255, 255, 255, 0.75)
.spacer .spacer
flex-grow: 1 flex-grow: 1

17
src/css/base.sass
View File

@ -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 margin: 0
padding: 0 padding: 0
background: #f4f8f4 background: #f4f8f4
@ -25,4 +39,3 @@ input, button
#syntaxTree #syntaxTree
height: 20% height: 20%
overflow-y: auto overflow-y: auto

2
src/css/include.sass
View File

@ -1,3 +1,3 @@
=dark-mode() =dark-mode()
body[theme=dark] & html[theme=dark] &
@content @content