Con WP Dark Mode puede usar un icono de interruptor flotante único para alternar entre el modo de luz y el modo oscuro.
Inserte el siguiente fragmento HTML en su página web donde desea que aparezca el interruptor de modo oscuro personalizado:
<div class="wp-dark-mode-switch"><div class="light">Mostrar oscuro</div><div class="dark"> Mostrar la luz</div></div>
Puede personalizar la apariencia y el comportamiento del cambio de modo oscuro para adaptarse al diseño y los requisitos de su sitio web.
1. interruptor de modo oscuro basado en texto: Con el siguiente código, puede mostrar el texto del "modo de luz" cuando el sitio web está en modo de luz y el texto del "modo oscuro" cuando el sitio web está en modo oscuro.
<div class="wp-dark-mode-switch"><div class="light">Modo de luz</div><div class="dark"> Modo oscuro</div></div>
2. Interruptor de modo oscuro basado en imágenes: Con el siguiente código, puede usar varias imágenes para el interruptor de modo oscuro en función de la apariencia de su sitio web (modo oscuro/modo de luz).
<div class="wp-dark-mode-switch"><div class="light"><img src="light-mode-icon.png" alt="Modo de luz"></div><div class="dark"><img src="dark-mode-icon.png" alt="Modo oscuro"></div></div>
3. Interruptor de modo oscuro basado en SVG: Con el siguiente código, puede múltiples imágenes SVG para el interruptor de modo oscuro en función de la apariencia de su sitio web (modo oscuro/modo de luz).
<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>
