# Elemento CSS basato sullo schema di colori selezionato

**URL:** <https://meta.discourse.org/t/css-element-based-on-color-scheme-selected/242218>\
**Category:** Development\
**Tags:** css\
**Created:** [18 Ottobre 2022, 3:49pm UTC](https://meta.discourse.org/t/css-element-based-on-color-scheme-selected/242218 "2022-10-18T15:49:30Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [18 Ottobre 2022, 7:02pm UTC](https://meta.discourse.org/t/css-element-based-on-color-scheme-selected/242218/4 "2022-10-18T19:02:54Z")

</div>

> [@agf1997](#):
>
> ma non se la modalità scura è scelta come tema “Normale”

Oh sì, non funzionerà così se lo schema di colori scuri è selezionabile.

* * *

Penso che la migliore opzione che puoi fare sia creare una definizione di colore personalizzata per questo e puoi usare questa variabile di colore per le icone dell’intestazione.

Crea un componente tema e aggiungi quanto segue alla scheda **Definizioni di colore**

 ![Screenshot 2022-10-18 at 20.56.24](https://global.discourse-cdn.com/meta/original/4X/d/4/1/d4125320b31a9011425739a5fa9d72fd097531e8.png)

Imposta il codice colore `secondary-low` su `$dark-theme-header-icons` e il codice colore `secondary` su `$light-theme-header-icons`

```scss
$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};
}

```

Dopo questo, puoi usare questa variabile di colore `--custom-header-icons` per il colore delle icone dell’intestazione.

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

```

---

_[View the full topic](https://meta.discourse.org/t/css-element-based-on-color-scheme-selected/242218)._