CSS element based on color scheme selected

Development

AI-generated summary

CSS Element Based on Color Scheme Selected

The discussion revolves around setting the color of an element based on the selected color scheme. agf1997 wants to adjust the color property of .d-header-icons .d-icon to use var(--secondary-low) in dark mode and var(--secondary) in light mode.

Don provides three possible solutions:

  1. Changing the secondary color code in admin/customize/colors/ (this will affect all elements using --secondary color).
  2. Using the prefers-color-scheme media query to change the color based on the OS theme setting.
  3. Creating custom color definitions.

agf1997 finds the second solution promising but notes that it doesn’t work when the dark mode theme is chosen as the “Regular” theme. Don suggests creating a custom color definition using a theme component and provides an example.

agf1997 confirms that the custom color definition solution works. Additionally, they ask if including color_definitions.scss in their theme would work instead of using a theme component, and Don confirms that it would.

1

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?

2

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:

3

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?

4

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
Screenshot 2022-10-18 at 20.56.241089×496 39.2 KB

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

This worked like a charm! Thanks!

6

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

7

Sure, that will works too. :slightly_smiling_face: