Con WP Dark Mode è possibile utilizzare un'icona di interruttore mobile unica per attivare la modalità Light e Dark.
Inserisci il seguente snippet HTML nella tua pagina Web in cui si desidera che appaia l'interruttore della modalità scura personalizzata:
<div class="wp-dark-mode-switch"><div class="light">Mostra buio</div><div class="dark"> Mostra luce</div></div>
Puoi personalizzare l'aspetto e il comportamento dell'interruttore in modalità scura per adattarsi alla progettazione e ai requisiti del tuo sito Web.
1. Interruttore in modalità scura basata sul testo: Con il seguente codice, è possibile visualizzare il testo "Light Mode" quando il sito Web è in modalità Light e "Dark Mode" quando il sito Web è in modalità oscura.
<div class="wp-dark-mode-switch"><div class="light">Modalità di luce</div><div class="dark"> Modalità oscura</div></div>
2. Interruttore in modalità scura basata sull'immagine: Con il seguente codice, è possibile utilizzare più immagini per l'interruttore della modalità scura in base all'aspetto del tuo sito Web (modalità scura/modalità luce).
<div class="wp-dark-mode-switch"><div class="light"><img src="light-mode-icon.png" alt="Modalità di luce"></div><div class="dark"><img src="dark-mode-icon.png" alt="Modalità oscura"></div></div>
3. Interruttore in modalità scura a base di SVG: Con il seguente codice, è possibile più immagini SVG per l'interruttore della modalità scura in base all'aspetto del tuo sito Web (modalità Dark Modalità/Luce).
<div class="wp-dark-mode-switch"><div class="light"><svg>...</svg><!-- SVG for light mode --></div><div class="dark"><svg> ...</svg><!-- SVG for dark mode --></div></div>
