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. [image] Kris: this would need to be added to color_definitions.scss Dumb question: how can I do that from within a Theme Component or Plugin?

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: [Screenshot 2023-02-13 at 10.55.17 AM]

No specific class for dark mode

Development

merefield (Robert) February 13, 2023, 3:43pm 3

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?

Topic		Replies	Views
Is this still the solution for checking for dark mode? Development	4	259	February 20, 2025
Is there a way to detect dark mode usage? Development	3	1838	April 16, 2023
How to add a specific body class for the dark (or light) mode? Product Support	12	4041	March 7, 2022
How to change css item based on dark or light mode? Development	11	2624	June 18, 2023
Is there a CSS way to modify specific items in dark mode? Development auto-dark	1	365	April 17, 2023

No specific class for dark mode

Related topics