Añada el modo oscuro a ASP.NET Core en sólo UNA línea de código

Presentación de la función de modo oscuro en ASP.NET Core

Tim comienza el tutorial abordando un requisito común en las aplicaciones web modernas: activar el modo oscuro en ASP.NET Core. Tanto si utilizas Blazor, MVC o Razor Pages, Bootstrap 5.3 introduce la compatibilidad con temas oscuros de una forma muy sencilla.

Como explica Tim, esta función de modo oscuro puede activarse con una sola línea de código, lo que la convierte en una solución rápida y eficaz para los desarrolladores que deseen mejorar la interfaz de usuario de su sitio web. La nueva compatibilidad con el modo oscuro es especialmente útil para los usuarios que prefieren un tema claro o una interfaz oscura en función de la configuración de su sistema o de sus preferencias personales.

Comprobación de la versión de Bootstrap en una aplicación web de Blazor

Tim utiliza Visual Studio para mostrar un proyecto de aplicación web de Blazor. Navega hasta la carpeta wwwroot y abre el archivo bootstrap.min.css para confirmar que la aplicación utiliza la versión 5.3.3 de Bootstrap. En el minuto 1:01, señala que se requiere la versión 5.3 o superior para soportar el modo oscuro.

Si tu proyecto ya utiliza esta versión o una posterior, no es necesario actualizar Bootstrap ni incluir herramientas adicionales. Se trata de un paso crucial porque las versiones más antiguas de Bootstrap no admiten el cambio de tema mediante el atributo data-bs-theme.

Una línea de código para activar el tema oscuro

En este punto, Tim abre el archivo App.razor. Resalta la etiqueta y demuestra cómo aplicar un tema oscuro a toda la aplicación utilizando un atributo HTML:

data-bs-theme="oscuro"

Esta sencilla adición indica a Bootstrap que aplique el esquema de color oscuro en todas sus páginas y elementos. Tim ejecuta la aplicación antes y después de añadir la línea para mostrar el contraste. A las 2:03, activa el modo oscuro y confirma que el tema se actualiza al instante.

Ajuste de CSS personalizado en modo oscuro

Tim señala que, aunque esta línea cambia el color de fondo y el tema, el CSS existente puede entrar en conflicto con el tema oscuro. Por ejemplo, el texto en blanco, los tamaños de fuente o los fondos codificados en sus archivos CSS no se ajustarán automáticamente.

Como señala Tim en el minuto 2:34, cuantos más estilos personalizados hayas escrito, más tendrás que editar y probar. Por eso recomienda empezar con el modo oscuro al principio del desarrollo, cuando hay que ajustar menos elementos.

Cambio entre temas claros y oscuros

En el minuto 2:50, Tim destaca que también se puede alternar entre temas claros y oscuros. Al cambiar el atributo a data-bs-theme="luz", se activa de nuevo el tema light:

data-bs-theme="luz"

Tim sugiere a los desarrolladores que permitan a los usuarios elegir el tema que prefieran, por ejemplo, añadiendo un conmutador mediante JavaScript o lógica de servidor.

Los usuarios esperan cada vez más la posibilidad de cambiar entre temas claros y oscuros, especialmente en aplicaciones de Windows o dispositivos móviles en los que se detecta automáticamente el esquema de color preferido.

Cómo solucionar conflictos de diseño en ASP.NET Core

Uno de los retos habituales, explica Tim, son los estilos incoherentes de ciertos elementos, como la barra de navegación superior. En el minuto 3:12, muestra cómo un archivo CSS específico de diseño (MainLayout.razor.css) anula las propiedades predeterminadas de Bootstrap.

Encuentra un selector .top-row que establece un color directamente, que no responde a la configuración del tema. Su solución: eliminar la propiedad de color para que Bootstrap pueda gestionar el estilo en función del tema actual (3:47).

Después de eliminar la anulación, el tema oscuro tiene un aspecto más limpio. Y cuando vuelve a cambiar al tema claro, sigue funcionando, lo que demuestra que Bootstrap aplica dinámicamente los valores de color en función del tema elegido.

Uso de reglas CSS específicas para cada tema

En el minuto 4:17, Tim ofrece otro consejo útil: los desarrolladores pueden utilizar la detección de temas dentro de su CSS para aplicar estilos diferentes en función del modo activo. Esto le permite responder al valor data-bs-theme y dar estilo a su aplicación en consecuencia.

Por ejemplo, se puede ajustar el tamaño de la fuente, el color del texto o incluso las imágenes en función de si el usuario ha seleccionado el modo oscuro o claro. Esto añade flexibilidad para quienes deseen una nueva experiencia temática sin tener que crear dos hojas de estilo distintas.

Aplicación del modo oscuro en proyectos MVC

A continuación, Tim pasa a un proyecto ASP.NET MVC más antiguo para mostrar cómo habilitar el modo oscuro en aplicaciones que aún no utilizan Bootstrap 5.3. Cuando abre el archivo CSS de Bootstrap, se da cuenta de que es la versión 5.1.0, que no admite el modo oscuro (5:07).

Actualización de Bootstrap en MVC con CDN

Tim recomienda sustituir el archivo local de Bootstrap por la versión CDN del sitio web GetBootstrap. En el minuto 5:51, pega los enlaces CDN en la vista _Layout.cshtml, actualizando los includes CSS y JavaScript.

De este modo, la aplicación MVC admite ahora el cambio de temas, gracias a la nueva versión de Bootstrap. También señala que las CDN pueden ayudar a acelerar el sitio web, especialmente para quienes lo visitan por primera vez.

Ajuste del estilo de navegación para el modo oscuro

Tras activar el tema oscuro, Tim descubre que algunos estilos de la barra de navegación entran en conflicto con él. En el minuto 6:40, elimina las clases navbar-light y bg-white que fuerzan los colores claros, lo que altera la apariencia oscura.

Una vez eliminada, la barra de navegación se adapta correctamente al modo oscuro. Sin embargo, Tim advierte de que puede ser necesario tratar manualmente otros elementos de texto o componentes con colores anulados (6:57). Aquí es donde es posible que desee escribir CSS temático o utilizar variables CSS para facilitar la gestión.

Resumen: Compatibilidad con temas de Bootstrap 5.3

Tim concluye reiterando que Bootstrap 5.3 es totalmente compatible con los temas oscuros y claros, pero es posible que tu CSS personalizado no lo sea. Si has estructurado tus estilos correctamente, utilizando clases y evitando colores codificados, el cambio de temas será más sencillo.

A las 8:00, subraya que basta con añadir:

data-bs-theme="oscuro"

a su etiqueta activa el modo oscuro en todo su sitio web ASP.NET. Incluso puede aplicar el atributo a un elemento específico, como una tabla, una tarjeta o una sección, lo que le permite combinar temas en una sola página.

Consejo final de Tim Corey

Si te tomas en serio Bootstrap o la tematización en ASP.NET Core, Tim también tiene un curso completo de Bootstrap que profundiza en conceptos como los sistemas de diseño, las estrategias de tematización y las mejores prácticas de accesibilidad.

Siguiendo el tutorial de Tim Corey video, puede implementar el modo oscuro en su aplicación ASP.NET Core en un solo paso y ajustarlo mediante CSS personalizado, detección de temas y funcionalidad de alternancia. Tanto si estás creando aplicaciones para Windows, la web u otras plataformas, este método te ofrece la flexibilidad necesaria para cambiar de tema sin esfuerzo y mantener contentos a tus usuarios.