# CSS element based on color scheme selected
**URL:** https://meta.discourse.org/t/css-element-based-on-color-scheme-selected/242218
**Category:** Development
**Tags:** css
**Created:** [October 18, 2022, 3:49pm UTC](https://meta.discourse.org/t/css-element-based-on-color-scheme-selected/242218 "2022-10-18T15:49:30Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@agf1997](https://meta.discourse.org/u/agf1997)
#### Post date: [October 18, 2022, 3:49pm UTC](https://meta.discourse.org/t/css-element-based-on-color-scheme-selected/242218/1 "2022-10-18T15:49:30Z")
I’m trying to figure out out to set a color of an element based on the color scheme selected. The following works well for my light mode, but not so well in my dark mode.
```plaintext
.d-header-icons .d-icon {
width: 100%;
line-height: 1.4;
display: inline-block;
color: var(--secondary);
}
```
I’d prefer to have the following for dark mode only.
```plaintext
color: var(--secondary-low)
```
That works well for dark mode, but not for light mode. Is there any way to adjust the value of `color:` based on the color scheme selected?
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [October 18, 2022, 5:01pm UTC](https://meta.discourse.org/t/css-element-based-on-color-scheme-selected/242218/2 "2022-10-18T17:01:04Z")
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 🙂
---
### Author:  [@agf1997](https://meta.discourse.org/u/agf1997)
#### Post date: [October 18, 2022, 6:39pm UTC](https://meta.discourse.org/t/css-element-based-on-color-scheme-selected/242218/3 "2022-10-18T18:39:22Z")
> [@Don](#):
>
> ```plaintext
> .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);
> }
> }
>
> ```
Thanks for the guidance.
This appears to be exactly what I would like to do (change header icons only, not all items with the `--secondary` color). One final question … this works if the theme is set as the dark mode theme and dark mode is activated by the OS, but not if the dark mode theme is choosen as the “Regular” theme. Any suggestions there?
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [October 18, 2022, 7:02pm UTC](https://meta.discourse.org/t/css-element-based-on-color-scheme-selected/242218/4 "2022-10-18T19:02:54Z")
> [@agf1997](#):
>
> but not if the dark mode theme is choosen as the “Regular” theme
Oh yes that is not going to work like that if the dark color scheme is selectable.
* * *
I think the best option you can do is create a custom color definition for this and you can use this color variable for header icons.
Create a theme component and add the following to **Color Definitions** tab
Set the `secondary-low` color code to `$dark-theme-header-icons` and `secondary` color code to `$light-theme-header-icons`
```scss
$dark-theme-header-icons: #e9e9e9;
$light-theme-header-icons: #222;
$header-icons: dark-light-choose($light-theme-header-icons, $dark-theme-header-icons);
:root {
--custom-header-icons: #{$header-icons};
}
```
After this you can use this `--custom-header-icons` color variable to the header icons color.
```scss
.d-header-icons .d-icon {
width: 100%;
line-height: 1.4;
display: inline-block;
color: var(--custom-header-icons);
}
```
---
### Author:  [@agf1997](https://meta.discourse.org/u/agf1997)
#### Post date: [October 18, 2022, 7:19pm UTC](https://meta.discourse.org/t/css-element-based-on-color-scheme-selected/242218/5 "2022-10-18T19:19:44Z")
This worked like a charm! Thanks!
---
### Author:  [@agf1997](https://meta.discourse.org/u/agf1997)
#### Post date: [October 18, 2022, 8:01pm UTC](https://meta.discourse.org/t/css-element-based-on-color-scheme-selected/242218/6 "2022-10-18T20:01:59Z")
Just one more thing … will this work if I include `color_definitions.scss` in my theme instead of using a theme component?
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [October 18, 2022, 8:10pm UTC](https://meta.discourse.org/t/css-element-based-on-color-scheme-selected/242218/7 "2022-10-18T20:10:02Z")
Sure, that will works too. 🙂
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [November 17, 2022, 8:10pm UTC](https://meta.discourse.org/t/css-element-based-on-color-scheme-selected/242218/8 "2022-11-17T20:10:39Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.