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

[image] 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 [Screenshot 2022-10-18 at 20.56.24] Set the secondary-low color code to $dark-theme-header-icons and secondary color code to $light-theme-header-icons $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. .d-header-icons .d-icon { width: 100%; line-height: 1.4; display: inline-block; color: var(--custom-header-icons); }

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: .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 Hope this helps :slightly_smiling_face:

[image] Don: .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?

This worked like a charm! Thanks!

Just one more thing … will this work if I include color_definitions.scss in my theme instead of using a theme component?

Sure, that will works too. :slightly_smiling_face:

CSS element based on color scheme selected

Development

Don October 18, 2022, 8:10pm 7

Sure, that will works too.

Topic		Replies	Views
How to change css item based on dark or light mode? Development	11	2624	June 18, 2023
Custom variables to color schemes Feature	3	645	February 13, 2023
How to control if a color scheme gets the dark or the light logo? Product Support	16	1886	August 26, 2023
Use color scheme color if dark scheme, otherwise use my color in theme Development	2	1262	May 25, 2021
Different CSS changes for different color schemes Development css	3	867	October 17, 2023

CSS element based on color scheme selected

Related topics