CSS element based on color scheme selected

[agf1997]

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?

[Don]

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

[agf1997]

@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?

[Don]

@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

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);
}

[agf1997]

This worked like a charm! Thanks!

[agf1997]

Just one more thing … will this work if I include color_definitions.scss in my theme instead of using a theme component?

[Don]

Sure, that will works too.