Help Needed: Assigning Separate CSS Roots for Light and Dark Modes in Discourse

Dev
1

Here’s a professional translation for your message:

I am currently using Discourse Color Scheme Toggle.

On my localhost, I have both light and dark modes enabled. I’ve already set up a CSS root specifically for my site. However, I’m not sure how to assign one CSS root for light mode and the other for dark mode.

Could anyone help me with this?

2

Hey,

I’m not exactly sure if I understand your context correctly. Let me know if not.
You can wrap your :root with the following CSS:

/* Light by default */
:root {
  --background-color: white;
  --text-color: black;
  ...
}

/* Dark */
@media (prefers-color-scheme: dark) {
  :root {
     --background-color: black;
     --text-color: white;
     ...
   }
}

prefers-color-scheme: light also exists.

3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.