# CSS-element gebaseerd op geselecteerd kleurenschema

**URL:** https://meta.discourse.org/t/css-element-based-on-color-scheme-selected/242218
**Category:** Development
**Tags:** css
**Created:** [18 oktober 2022 om 15:49 UTC](https://meta.discourse.org/t/css-element-based-on-color-scheme-selected/242218 "2022-10-18T15:49:30Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [18 oktober 2022 om 17:01 UTC](https://meta.discourse.org/t/css-element-based-on-color-scheme-selected/242218/2 "2022-10-18T17:01:04Z")

</div>

Hello,

There are several ways to do it.

For example:

You can change the color scheme colors on `admin/customize/colors/`. Just select your dark mode color scheme and change the `secondary` color code.

> Note: This will change the secondary color everywhere not just on the header icons.

* * *

Or you can use the `prefers-color-scheme` media to change `secondary` to `secondary-low` on dark mode.

Something like this:

```scss
.d-header-icons .d-icon {
  width: 100%;
  line-height: 1.4;
  display: inline-block;
  color: var(--secondary);
  @media (prefers-color-scheme: dark) {
    color: var(--secondary-low);
  }
}

```

* * *

Or you can create custom color definitions: [Why might dark-light-choose() not work? - #2 by awesomerobot](https://meta.discourse.org/t/why-might-dark-light-choose-not-work/172232/2)

* * *

Hope this helps 🙂

---

_[View the full topic](https://meta.discourse.org/t/css-element-based-on-color-scheme-selected/242218)._