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 have the following for dark mode only. color: var(--secondary-low) That works well for dark mode, but not for light mode. Is there any way to adjust the value of color: based on the color scheme selected?

[תמונה] 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 icons. Create a theme component and add the following to Color Definitions tab [Screenshot 2022-10-18 at 20.56.24] Set the secondary-low color code to $dark-theme-header-icons and secondary color code to $light-theme-header-icons $dark-theme-header-icons: #e9e9e9; $light-theme-header-icons: #222; $header-icons: dark-light-choose($light-theme-header-icons, $dark-theme-header-icons); :root { --custom-header-icons: #{$header-icons}; } After this you can use this --custom-header-icons color variable to the header icons color. .d-header-icons .d-icon { width: 100%; line-height: 1.4; display: inline-block; color: var(--custom-header-icons); }

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 use the prefers-color-scheme media to change secondary to secondary-low on dark mode. Something like this: .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); } } Or you can create custom color definitions: Why might dark-light-choose() not work? - #2 by awesomerobot Hope this helps :slightly_smiling_face:

[תמונה] 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 header icons only, not all items with the --secondary color). One final question … this works if the theme is set as the dark mode theme and dark mode is activated by the OS, but not if the dark mode theme is choosen as the “Regular” theme. Any suggestions there?

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:19pm 5

This worked like a charm! Thanks!

נושא		תגובות	צפיות
How to change css item based on dark or light mode? Development	11	2629	18 ביוני,‏ 2023
Custom variables to color schemes Feature	3	648	13 בפברואר,‏ 2023
How to control if a color scheme gets the dark or the light logo? Product Support	16	1887	26 באוגוסט,‏ 2023
Use color scheme color if dark scheme, otherwise use my color in theme Development	2	1263	25 במאי,‏ 2021
Different CSS changes for different color schemes Development css	3	869	17 באוקטובר,‏ 2023

אלמנט CSS מבוסס על ערכת הצבעים שנבחרה

נושאים קשורים