The discussion revolves around adding specific CSS for dark mode in Discourse, particularly for external widgets like a leaflet map. merefield asks if it’s still not possible to target dark mode directly via CSS without a dedicated class. awesomerobot suggests using @if #{schemeType()} == dark in color_definitions.scss to apply styles conditionally, and explains how to implement this in a Theme Component or Plugin. merefield clarifies that a class isn’t necessary as long as CSS can distinguish between light and dark modes, and awesomerobot provides guidance on where to add the code, including via the admin panel’s CSS section as shown in the screenshot.
Continuing the discussion from How to add a specific body class for the dark (or light) mode?:
Is this still the case?
I’d like to add specific CSS for an external widget (a leaflet map) when dealing with a dark theme, is it still not possible to identify using just a CSS selector?
Of course I can just create a Theme Component to apply the changes and assume the admin just adds that to the Dark Scheme, but that won’t switch automatically … (which is the current solution)
Would this accomplish what you need? this would need to be added to color_definitions.scss
@if #{schemeType()} == dark {
body {
background: red;
}
} @else {
body {
background: blue;
}
}
A class does seem like it would be useful though, we can probably add one.
Thanks for your suggestion.
Yeah, doesn’t need to be a class so long as I can distinguish in CSS.
Dumb question: how can I do that from within a Theme Component or Plugin?
Thanks @awesomerobot!
