Mit WP Dark Mode können Sie ein eindeutiges Symbol für schwimmendes Schalter verwenden, um den Hellmodus und den Dunklen Modus zu wechseln.
Fügen Sie den folgenden HTML -Snippet in Ihre Webseite ein, auf der der benutzerdefinierte Dark -Modus -Switch angezeigt werden soll:
<div class="wp-dark-mode-switch"><div class="light">Zeigen Sie dunkel</div><div class="dark"> Licht zeigen</div></div>
Sie können das Aussehen und das Verhalten des Dark -Modus -Schalters an das Design und die Anforderungen Ihrer Website anpassen.
1. Textbasierter Dunkelmodusschalter: Mit dem folgenden Code können Sie den Text "Light -Modus" anzeigen, wenn sich die Website im Lichtmodus und im Dunklen Modus -Text befindet, wenn sich die Website im Dunklen Modus befindet.
<div class="wp-dark-mode-switch"><div class="light">Lichtmodus</div><div class="dark"> Dunkler Modus</div></div>
2. Bildbasierter Dunkelmodusschalter: Mit dem folgenden Code können Sie mehrere Bilder für den Dark -Modus -Switch basierend auf dem Erscheinungsbild Ihrer Website (Dunkelmodus/Lichtmodus) verwenden.
<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="Dunkler Modus"></div></div>
3. SVG-basierter Dark-Modus-Switch: Mit dem folgenden Code können Sie mehrere SVG -Bilder für den Dark -Modus -Switch basierend auf dem Erscheinungsbild Ihrer Website (Dark -Modus/Lichtmodus).
<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>
