# No specific class for dark mode

**URL:** https://meta.discourse.org/t/no-specific-class-for-dark-mode/254984
**Category:** Development
**Tags:** css
**Created:** [February 13, 2023, 1:46pm UTC](https://meta.discourse.org/t/no-specific-class-for-dark-mode/254984 "2023-02-13T13:46:31Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [February 13, 2023, 1:46pm UTC](https://meta.discourse.org/t/no-specific-class-for-dark-mode/254984/1 "2023-02-13T13:46:31Z")

</div>

Continuing the discussion from [How to add a specific body class for the dark (or light) mode?](https://meta.discourse.org/t/how-to-add-a-specific-body-class-for-the-dark-or-light-mode/220062/10):

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](https://meta.discourse.org/t/locations-plugin/69742/841))

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [February 13, 2023, 3:39pm UTC](https://meta.discourse.org/t/no-specific-class-for-dark-mode/254984/2 "2023-02-13T15:39:00Z")

</div>

Would this accomplish what you need? this would need to be added to `color_definitions.scss`

```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.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [February 13, 2023, 3:43pm UTC](https://meta.discourse.org/t/no-specific-class-for-dark-mode/254984/3 "2023-02-13T15:43:20Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [February 13, 2023, 3:56pm UTC](https://meta.discourse.org/t/no-specific-class-for-dark-mode/254984/4 "2023-02-13T15:56:39Z")

</div>

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](https://global.discourse-cdn.com/meta/original/4X/8/c/8/8c8e5caf3e2d595c69171eb01bbb38fbcbfec19e.png)

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [February 13, 2023, 3:58pm UTC](https://meta.discourse.org/t/no-specific-class-for-dark-mode/254984/5 "2023-02-13T15:58:23Z")

</div>

Thanks @awesomerobot!

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [March 15, 2023, 3:59pm UTC](https://meta.discourse.org/t/no-specific-class-for-dark-mode/254984/6 "2023-03-15T15:59:00Z")

</div>

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