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…

[imagem] 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 heade…

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 …

[imagem] 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 he…

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:

Elemento CSS baseado no esquema de cores selecionado

Dev

agf1997 Outubro 18, 2022, 7:19pm 5

Isso funcionou como um encanto! Obrigado!

Tópico		Respostas	Visualizações
How to change css item based on dark or light mode? Development	11	2566	18 de Junho de 2023
Custom variables to color schemes Feature	3	633	13 de Fevereiro de 2023
How to control if a color scheme gets the dark or the light logo? Support	16	1817	26 de Agosto de 2023
Use color scheme color if dark scheme, otherwise use my color in theme Development	2	1249	25 de Maio de 2021
Different CSS changes for different color schemes Development css	3	833	17 de Outubro de 2023

Elemento CSS baseado no esquema de cores selecionado

Tópicos relacionados