Este artículo es un artículo espejo de traducción automática, por favor haga clic aquí para saltar al artículo original.

Architect_Programmer_Code Red Agrícola»Arquitecto › Diseño front-end y web › Bastidor frontal › Basado en bootstrap para activar el modo noche oscura (oscuro)...
Vista: 6129|Respuesta: 4

[Bootstrap] Activar el modo oscuro (oscuro) basado en Bootstrap

[Copiar enlace]
Publicado en 4/4/2023 9:32:35 | | | |
Requisitos: Vi un pequeño icono de bombilla y una luna en la esquina derecha de algunas webs, haz clic en el icono de la bombilla para obtener el modo luz, haz clic en el icono de la luna para ver el modo noche (modo oscuro), tiene muy buena pinta, mi web está basada en el desarrollo del framework front-end Bootstrap, busca materiales y tutoriales relacionados.

bootstrap4：El inicio de sesión del hipervínculo es visible.
bootstrap5：El inicio de sesión del hipervínculo es visible.
Documentación del tutorial：El inicio de sesión del hipervínculo es visible.

El código compila los cuatro métodos del cuerpo de trabajo original (y un total de seis variantes)

Modo de conmutación manual:El inicio de sesión del hipervínculo es visible.
Sigue el cambio automático de sistemas operativos:El inicio de sesión del hipervínculo es visible.




(Especialmente como el iPhone cambia entre día y noche, el modo oscuro es adecuado para ambientes con poca luz, lo que puede proteger mejor los ojos del usuario sin molestar a los demás y también ahorrar más energía.) ）

Según el tutorial de documentación, intenta introducirlo en nuestra web, primero mira las representaciones de la siguiente manera:



Introduciendo estilos en la cabeza, el código es el siguiente:

Código HTML de icono de botón:

Código js de modo alternado:

(Fin)




Anterior:Cambiar a acceso abierto al puerto especificado en Linux
Próximo:La herramienta Cassowary para pruebas de estrés de solicitudes HTTP

Publicaciones relacionadas
 Propietario| Publicado en 7/4/2023 21:08:11 |


Utiliza el siguiente comando para comprobar si está en modo oscuro:

 Propietario| Publicado en 7/4/2023 21:09:46 |
Podemos usar el oyente de eventos para detectar el cambio de patrón, y el código de implementación se ve así:

 Propietario| Publicado en 21/7/2025 14:38:40 |
Xiaozha Publicado el 7-4-2023 a las 21:09
Podemos usar el oyente de eventos para detectar el cambio de patrón, y el código de implementación se ve así:
Para cambios en el modo de monitorización, consulte:El inicio de sesión del hipervínculo es visible.
 Propietario| Publicado en 21/7/2025 16:16:34 |
Darkmode.js Añadir el modo oscuro/nocturno a tu sitio web en segundos:El inicio de sesión del hipervínculo es visible.
Renuncia:
Todo el software, materiales de programación o artículos publicados por Code Farmer Network son únicamente para fines de aprendizaje e investigación; El contenido anterior no se utilizará con fines comerciales o ilegales; de lo contrario, los usuarios asumirán todas las consecuencias. La información de este sitio proviene de Internet, y las disputas de derechos de autor no tienen nada que ver con este sitio. Debes eliminar completamente el contenido anterior de tu ordenador en un plazo de 24 horas desde la descarga. Si te gusta el programa, por favor apoya el software genuino, compra el registro y obtén mejores servicios genuinos. Si hay alguna infracción, por favor contáctanos por correo electrónico.
Mail To:help@itsvse.com