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…

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

[Bild] 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 head…

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 basierend auf ausgewählter Farbpalette

Entwickler

agf1997 18. Oktober 2022 um 19:19 5

Das hat wie am Schnürchen funktioniert! Danke!

Thema		Antworten	Aufrufe
How to change css item based on dark or light mode? Development	11	2566	18. Juni 2023
Custom variables to color schemes Feature	3	633	13. Februar 2023
How to control if a color scheme gets the dark or the light logo? Support	16	1817	26. August 2023
Use color scheme color if dark scheme, otherwise use my color in theme Development	2	1248	25. Mai 2021
Different CSS changes for different color schemes Development css	3	833	17. Oktober 2023

CSS-Element basierend auf ausgewählter Farbpalette

Verwandte Themen