No support for dark mode

[tedw]

Description

The design system doesn’t appear to support the prefers-color-scheme: dark CSS media feature. Not sure if this is on the roadmap but would be a nice feature, though I know it’s not a trivial update.

Here’s a simple example showing the basic idea:

html {
  --bg-color: get-theme('background-color');
  --text-color: get-theme('body-text-color');
  background-color: var(--bg-color);
  color: var(--text-color);
  
}

@media screen and (prefers-color-scheme: dark) {
  html {
    --bg-color: get-theme('background-color-inverse');
    --text-color: get-theme('body-text-color-inverse');
  }
}

I suppose one approach would be to create alternate $theme-colors-mozilla and $theme-colors-firefox maps for dark mode, then create CSS vars for them like in the example above and have the get-theme() function reference the CSS vars instead of hex codes. I think that would avoid having to refactor everything but it would limit browser support.

Steps to reproduce

Enable dark mode.

Expected result

Theme colors should update to dark background with light text.

Actual result

Nothing happens.

Environment

All

[stephaniehobson]

We would like to do this and #841 makes this easier but realistically this is not on the roadmap.