Requisitos del Proyecto: Modo Oscuro
Objetivo:
Implementar un modo oscuro en una página web utilizando HTML, CSS y JavaScript.
Requisitos Funcionales:
La página web debe tener un diseño inicial en modo claro.
Se debe proporcionar un botón que permita cambiar entre el modo claro y el modo oscuro.
Al hacer clic en el botón de cambio de modo, el diseño de la página web debe cambiar de modo claro a modo oscuro, y viceversa.
En modo oscuro, el texto y los elementos de la página web deben ser visibles y legibles.
El cambio de modo debe ser suave y atractivo visualmente.
Requisitos Técnicos:
La estructura de la página web debe estar escrita en HTML5 y debe ser semánticamente correcta.
Los estilos de la página web deben estar definidos utilizando CSS3.
Se debe utilizar el siguiente CSS como base para los estilos de la página web:
Se debe definir una función llamada toggleDarkMode() en JavaScript para cambiar los estilos de la página web para el modo oscuro.
Se debe establecer un evento de clic en el botón para alternar entre el modo claro y oscuro.
Al cambiar al modo oscuro, se deben ajustar los estilos del fondo, texto, borde y color de los botones para que se ajusten al tema oscuro.
Al cambiar de modo oscuro a modo claro, se deben restablecer los estilos al estado original del modo claro.
Se deben agregar y eliminar clases para el cuerpo de la página (dark-mode) al cambiar entre modos para facilitar la gestión de estilos.
Se debe proporcionar una implementación que garantice una transición suave entre los modos claro y oscuro.
Entrega:
El código fuente del proyecto debe ser entregado en un repositorio de control de versiones, como GitHub.
Se debe incluir un archivo README.md con instrucciones claras para ejecutar y probar el proyecto.
Se debe proporcionar una demostración en vivo del proyecto, ya sea mediante un enlace a una página web o a través de una plataforma de alojamiento en la nube.
Estos requisitos proporcionan una guía completa para desarrollar el proyecto de Modo Oscuro, abarcando los aspectos de HTML, CSS y JavaScript, así como los requisitos de entrega.
HTML:
Blog creado por Andy
Comments