FOUDT: Flash of Unstyled Dark Theme

[Grawl]

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:

1. Make sure your browser is supporting (prefers-color-scheme: dark) media query and turn it on
2. Go to sandbox with link given above
3. Wait until sandbox will be ready
4. See app is rendered in light theme as initial state
5. See app becoming dark after you see app in light theme

Expected 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)

[Grawl]

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.

[codenamezjames]

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
  */
}

[Grawl]

oh wow cool