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 h…

[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…

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 …

[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 hea…

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:

Élément CSS basé sur le schéma de couleurs sélectionné

Dev

Don Octobre 18, 2022, 8:10 7

Bien sûr, cela fonctionnera aussi.

Sujet		Réponses	Vues
How to change css item based on dark or light mode? Development	11	2566	Juin 18, 2023
Custom variables to color schemes Feature	3	633	Février 13, 2023
How to control if a color scheme gets the dark or the light logo? Support	16	1819	Août 26, 2023
Use color scheme color if dark scheme, otherwise use my color in theme Development	2	1249	Mai 25, 2021
Different CSS changes for different color schemes Development css	3	833	Octobre 17, 2023

Élément CSS basé sur le schéma de couleurs sélectionné

Sujets connexes