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…

[صورة] 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 …

[صورة] 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 بناءً على مخطط الألوان المحدد

مطور

Don 18 أكتوبر 2022، 8:10م 7

بالتأكيد، هذا سيعمل أيضًا.

الموضوع		الردود	مرات العرض
How to change css item based on dark or light mode? Development	11	2566	18 يونيو 2023
Custom variables to color schemes Feature	3	633	13 فبراير 2023
How to control if a color scheme gets the dark or the light logo? Support	16	1817	26 أغسطس 2023
Use color scheme color if dark scheme, otherwise use my color in theme Development	2	1249	25 مايو 2021
Different CSS changes for different color schemes Development css	3	833	17 أكتوبر 2023

عنصر CSS بناءً على مخطط الألوان المحدد

الموضوعات ذات الصلة