Elemento CSS basado en el esquema de color seleccionado

Desarrollador
4

Oh, sí, eso no va a funcionar así si el esquema de color oscuro es seleccionable.

Creo que la mejor opción que puedes hacer es crear una definición de color personalizada para esto y puedes usar esta variable de color para los iconos del encabezado.

Crea un componente de tema y agrega lo siguiente a la pestaña Definiciones de color

Screenshot 2022-10-18 at 20.56.24
Screenshot 2022-10-18 at 20.56.241089×496 39.2 KB

Establece el código de color secondary-low en $dark-theme-header-icons y el código de color secondary en $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};
}

Después de esto, puedes usar esta variable de color --custom-header-icons para el color de los iconos del encabezado.

.d-header-icons .d-icon {
  width: 100%;
  line-height: 1.4;
  display: inline-block;
  color: var(--custom-header-icons);
}