Sintassi

Significato dei valori principali:

• normal: utilizza lo schema di colore predefinito del browser. (valore legacy)

• light: indica che l’elemento è progettato per funzionare in modalità chiara.

• dark: indica che l’elemento è progettato per funzionare in modalità scura.

• light dark: supporta entrambi gli schemi, con priorità al tema chiaro.

• dark light: supporta entrambi gli schemi, con priorità al tema scuro.

Nota: Il valore color-scheme influisce anche su elementi nativi come caselle di input, moduli e scrollbar.

Esempio proprietà: color-scheme

Codice Esempio: color-scheme

CODE: CSS

1. .color-scheme-example {

2.   color-scheme: light dark;

3.   background-color: Canvas;

4.   color: CanvasText;

5.   padding: 20px;

6.   border: 2px solid;

7.   border-color: CanvasText;

8.   border-radius: 8px;

9.   font-size: 18px;

10. }

Contenuto Esempio: color-scheme

  
  <style>
    .color-scheme-example {
      color-scheme: light dark;
      background-color: Canvas;
      color: CanvasText;
      padding: 20px;
      border: 2px solid;
      border-color: CanvasText;
      border-radius: 8px;
      font-size: 18px;
    }
  </style>

  <div class="color-scheme-example">
    Questo elemento si adatta automaticamente al tema del sistema operativo.
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser