No specific class for dark mode

[merefield (Robert)]

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)

[awesomerobot (Kris)]

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.

[merefield (Robert)]

Thanks for your suggestion.

Yeah, doesn’t need to be a class so long as I can distinguish in CSS.

@awesomerobot

this would need to be added to color_definitions.scss

Dumb question: how can I do that from within a Theme Component or Plugin?

[awesomerobot (Kris)]

In a remote theme or component you can create a file common/color_definitions.scss — if you’re looking to add CSS via the admin panel there’s a section there:

[merefield (Robert)]

Thanks @awesomerobot!