How to avoid color flash when using 'system' media query?

[freddydumont]

From what I understand by reading theme-ui's code, the is no actual CSS media query; it's implemented in JS.

There is a color flash script, but it doesn't do anything when not using localstorage (which wouldn't make sense to use if just trying to react to the system theme: dark or light).

The global emotion CSS looks like this (simplified):

html {
  --theme-ui-colors-text: #1c1917;
  --theme-ui-colors-background: #fafafa;
}
html.theme-ui-__default,
.theme-ui-__default html {
  --theme-ui-colors-text: #1c1917;
  --theme-ui-colors-background: #fafafa;
}
html.theme-ui-dark,
.theme-ui-dark html {
  --theme-ui-colors-text: #f5f5f5;
  --theme-ui-colors-background: #171717;
}

Shouldn't it look more like this instead, when using system?

@media (prefers-color-scheme: light) {
  html {
    --theme-ui-colors-text: #1c1917;
    --theme-ui-colors-background: #fafafa;
  }
}

@media (prefers-color-scheme: dark) {
  html {
    --theme-ui-colors-text: #f5f5f5;
    --theme-ui-colors-background: #171717;
  }
}

Judging from the discussions in issues and PRs, it seems like theme-ui does things a certain way for legacy reasons. Its handling of color modes is from an era that pre-dates the color scheme media query, when you'd use a button to switch between themes.

I guess my question is: is there a way to override theme-ui's global CSS? Or even, shouldn't theme-ui simplify its handling of color modes to use a CSS media query instead of JS so that SSR'd pages don't color flash?

(or am I missing something obvious?)

Thanks

[freddydumont]

If anyone has this issue, I fixed it by injecting this script in the document head:

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.classList.add('theme-ui-dark');
} else {
  document.documentElement.classList.add('theme-ui-__default');
}

window
  .matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', (event) => {
    if (event.matches) {
      //dark mode
      document.documentElement.classList.remove('theme-ui-__default');
      document.documentElement.classList.add('theme-ui-dark');
    } else {
      //light mode
      document.documentElement.classList.remove('theme-ui-dark');
      document.documentElement.classList.add('theme-ui-__default');
    }
  });

It's kind of a hack that overrides theme-ui's handling of the media queries, but it works. No more color flash!