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

مطور

agf1997 18 أكتوبر 2022، 7:19م 5

لقد نجح هذا الأمر بشكل رائع! شكرًا لك!

الموضوع		الردود	مرات العرض
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	1248	25 مايو 2021
Different CSS changes for different color schemes Development css	3	833	17 أكتوبر 2023

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

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