CSS element based on color scheme selected

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