Correct way to edit CSS for light and dark modes

Support
1

I need to edit a load of CSS for light and dark modes, i have read a few posts on the forum which say there is no reliable way of doing it. including

However a lot of these are old posts. Is there an easy way in 2026? I have tested using these

@container style(--scheme-type: light) {
  body {
    background: #ffffff !important;
  }
}
@container style(--scheme-type: dark) {
.sidebar-wrapper {
   background: #000000 !important;
}
}

But not sure if this is correct but it works .

2

The container query will work, but to simplify you can use the native light-dark() function in CSS to do this too:

.my-thing {
  background: light-dark(#fff, #000);
  color: light-dark(#222, #eee);
}

Generally in Discourse we rely on color variables that automatically change to avoid setting specific colors this way (--primary, --secondary, etc)… this allows colors to work no matter the color scheme.

You can see some examples here: https://meta.discourse.org/styleguide/atoms/colors and how they change if you switch to dark/light modes. These variables are set up by color palettes in /admin/config/colors

3

Awesome thanks so much Kris. BTW that link doesn’t work