Open Grawl opened 4 years ago
I faced this issue because dark theme in Quasar is made using JS. In SSR mode, CSS and HTML are rendered before JS is loaded.
A way to solve this issue is to use (prefers-color-scheme: dark)
instead (or with) CSS classes.
So, instead of this:
body.body--dark {
color: white;
background: hsl(0deg 0% 7%);
}
It should be this:
@media (prefers-color-scheme: dark) {
body {
color: white;
background: hsl(0deg 0% 7%);
}
}
To add dark theme toggle, postcss-dark-theme-class
can be used.
I encountered this issue today as well. I was able to do quite a hacky fix It fixed the background flashing white issue i was having I have my settings for dark mode in Vuex stored in a cookie so I'm extracting that cookie and using the isDark value from my Vuex store named settings
// src-ssr/extension.js
function modifyResponseBody (req, res, next) {
var oldSend = res.send
res.send = function () {
let state = { settings: { isDark: false } }
try {
state = JSON.parse(JSON.parse(require('cookie').parse(req.headers.cookie || '').qs))
} catch (e) {}
if (state && state.settings && state.settings.isDark) {
arguments[0] = arguments[0].replace(/body--light/gm, 'body--dark')
}
oldSend.apply(res, arguments)
}
next()
}
module.exports.extendApp = function ({ app, ssr }) {
app.use(modifyResponseBody)
/*
Extend the parts of the express app that you
want to use with development server too.
Example: app.use(), app.get() etc
*/
}
oh wow cool
It's actual?)
I think so, because "dark theme" is still enabled using JavaScript.
Describe the bug
FOUDT: Flash of Unstyled Dark Theme
Codepen/jsFiddle/Codesandbox: https://codesandbox.io/s/peaceful-spence-jmu5d
To Reproduce Steps to reproduce the behavior using given sandbox:
(prefers-color-scheme: dark)
media query and turn it onExpected behavior App is rendered in dark theme as initial render
Platform (please complete the following information): OS: macOS Catalina 10.15.5 (19F101) Node: >= 10.17.0 NPM: >= 6.13.4 Yarn: >= 1.19.1 Browsers: Chrome 84.0.4147.89, Safari 13.1.1 (15609.2.9.1.2)