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