Dark theme from CSS media query

[cloakedninjas]

@josdejong What are your thoughts on providing the dark theme via @media (prefers-color-scheme: dark) instead of having to add the jse-theme-dark class?

[josdejong]

If there is an easier or more flexible way to work with a custom theme I'm in for it.

What I like about the current solution is that you can programmatically control what theme is used by adding/remove a class name. So you can toggle not only dark theme, but any custom theme.

Is there a way to allow for both? I.e. be able to load the dark theme CSS and have control over whether to use it or not both via JS (toggling a classs) and via CSS (like using @media)?

[cloakedninjas]

So given the scenario that the user has their device set to dark theme, but visits a website that embeds jsoneditor and toggle it to light theme - then we would need a second CSS class .jse-theme-light and it would need to be formed something like this:

@media (prefers-color-scheme: dark) {
 .jse-theme-light {
    --jse-theme: light;

    /* over all fonts, sizes, and colors */
    --jse-theme-color: #FFF;
   
    ... rest of theme variables
  }
}

The app I currently work on does this, we just let the OS / browser guide us to which theme to render, but we provide our users a way to render the app in a specific theme from their preference page.

If you wanted, this feature could be provided in a separate CSS file that developers opt-in to e.g.

@import 'node_modules/vanilla-jsoneditor/themes/jse-theme-auto.css';

... But given the widespread adoption of light / dark themes in at the OS level and browser level... I'm not sure you'd want to go against the grain.

[josdejong]

I'm totally for using @media (prefers-color-scheme: dark). What I mostly see in practice is giving people three options: light, dark, or system default. How can we cater for that?

I was reading up on the following two articles that describe how to achieve this:

• https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web
• https://javascript.plainenglish.io/how-to-make-a-system-light-dark-theme-selector-4e70322205d7

They both come up with about the same solution to allow toggling system/light/dark, see this example "Overriding OS Settings". However the solution involves repeating all theme variables twice. I'm not sure yet how we could prevent that and provide a `jse-theme-dark.css that supports both being loaded based on either the system preference or a choice. Any ideas?

[josdejong]

Any idea on how to go about this?

Maybe we should deliver two different files, one for each purpose, and have an internal built tool that can generate one from the other.

[AlexRMU]

It would be great if you could set up everything that is possible.

People often do something like this:
https://ui.shadcn.com/themes
https://www.skeleton.dev/

That means you'll get a lot of css variables and 2 basic themes. For example, there is no default theme. You can:

• use themes/auto.css which uses both themes and switches them using a media query
• use themes/light.css or themes/dark.css and be sure to add the appropriate class (you can use both and switch between them easily)
• create your own theme

[josdejong]

Yes, that is similar to the example in "Overriding OS Settings". However, this solution requires defining all variables twice. That is not very maintenance friendly, so I'm looking for a way that allows defining the variables only once. Any idea?