Met WP Dark Mode kunt u een uniek drijvende schakelaarpictogram gebruiken om te schakelen tussen de lichtmodus en de donkere modus.
Plaats het volgende HTML -fragment in uw webpagina waar u de aangepaste donkere modusschakelaar wilt laten verschijnen:
<div class="wp-dark-mode-switch"><div class="light">Duisternis zien</div><div class="dark"> Licht laten zien</div></div>
U kunt het uiterlijk en het gedrag van de Dark Mode -schakelaar aanpassen om aan het ontwerp en de vereisten van uw website te voldoen.
1. Tekstgebaseerde donkere modusschakelaar: Met de volgende code kunt u de tekst "Lichtmodus" weergeven wanneer de website in de lichtmodus en de "Dark Mode" -tekst staat wanneer de website in de donkere modus staat.
<div class="wp-dark-mode-switch"><div class="light">Lichtmodus</div><div class="dark"> Donkere modus</div></div>
2.. Beeldgebaseerde donkere modusschakelaar: Met de volgende code kunt u meerdere afbeeldingen gebruiken voor de schakelaar van de donkere modus op basis van het uiterlijk van uw website (Dark Mode/Light -modus).
<div class="wp-dark-mode-switch"><div class="light"><img src="light-mode-icon.png" alt="Lichtmodus"></div><div class="dark"><img src="dark-mode-icon.png" alt="Donkere modus"></div></div>
3. SVG-gebaseerde Dark Mode Switch: Met de volgende code kunt u meerdere SVG -afbeeldingen voor de schakelaar van de donkere modus op basis van het uiterlijk van uw website (Dark Mode/Light -modus).
<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>