Elemento CSS basado en el esquema de color seleccionado

[agf1997]

Estoy tratando de averiguar cómo establecer el color de un elemento basándome en el esquema de color seleccionado. Lo siguiente funciona bien para mi modo claro, pero no tan bien para mi modo oscuro.

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

Preferiría tener lo siguiente solo para el modo oscuro.

color: var(--secondary-low)

Eso funciona bien para el modo oscuro, pero no para el modo claro. ¿Hay alguna manera de ajustar el valor de color: basándose en el esquema de color seleccionado?

[Don]

Hola,

Hay varias maneras de hacerlo.

Por ejemplo:

Puedes cambiar los colores del esquema de colores en admin/customize/colors/. Simplemente selecciona tu esquema de colores en modo oscuro y cambia el código de color secondary.

Nota: Esto cambiará el color secundario en todas partes, no solo en los iconos del encabezado.

---

O puedes usar el medio prefers-color-scheme para cambiar secondary a secondary-low en modo oscuro.

Algo como esto:

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

---

O puedes crear definiciones de color personalizadas: Why might dark-light-choose() not work? - #2 by awesomerobot

---

Espero que esto ayude

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

Gracias por la orientación.

Esto parece ser exactamente lo que me gustaría hacer (cambiar solo los iconos del encabezado, no todos los elementos con el color --secondary). Una última pregunta… esto funciona si el tema está configurado como el tema del modo oscuro y el modo oscuro se activa por el sistema operativo, pero no si el tema del modo oscuro se elige como el tema “Regular”. ¿Alguna sugerencia al respecto?

[Don]

@agf1997

pero no si el tema del modo oscuro se elige como el tema “Normal”

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

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

[agf1997]

¡Esto funcionó a la perfección! ¡Gracias!

[agf1997]

Solo una cosa más… ¿funcionará esto si incluyo color_definitions.scss en mi tema en lugar de usar un componente de tema?

[Don]

Claro, eso también funcionará.