Hace tiempo que el tema oscuro se ha convertido en un estándar para muchas aplicaciones aunque no siempre es imprescindible. En este artículo explicaré cómo aplicar un tema oscuro con Angular Material y cómo permitir que el usuario lo cambie. También incluyo ejemplos de SCSS y TypeScript para facilitar la implementación.
Primero configure el tema general de Material. Un ejemplo de SCSS para el tema base sería:
html { @include mat.theme(( color: mat.$azure-palette, typography: Roboto, )); }
Con esto estará usando el tema claro por defecto. Para soportar modo oscuro aprovechamos la propiedad CSS color-scheme y la capacidad interna de Angular Material para alternar light y dark:
html { color-scheme: light dark; @include mat.theme(( color: mat.$azure-palette, typography: Roboto, )); }
Al establecer color-scheme: light dark el modo por defecto se adapta a la preferencia del sistema del usuario. Además puede sobrescribir propiedades específicas cuando el modo oscuro está activo, por ejemplo el fondo:
html { color-scheme: light dark; @include mat.theme(( color: mat.$azure-palette, typography: Roboto, )); @media (prefers-color-scheme: dark) { @include mat.theme(( color: mat.$azure-palette ), $overrides: ( background: darkblue ) ); } }
Si desea que el usuario cambie el tema manualmente cree un control toggle o select con las opciones system, light y dark. Un ejemplo sencillo en TypeScript con signal y Renderer2 para aplicar el estilo al body:
public readonly theme = signal(system); private readonly _renderer = inject(Renderer2); constructor() { effect(() => this._setTheme(this.theme())); } private _setTheme(theme: ThemeMode) { this._renderer.setProperty(document.body.style, color-scheme, theme === system ? light dark : theme); }
La idea es almacenar la preferencia del usuario en local storage o en su perfil y restaurarla en cada carga. También puede ofrecer un modo system que respete la preferencia del sistema y un modo manual para forzar claro u oscuro.
Como bonus puede mejorar la transición visual entre temas usando la experimental API startViewTransition cuando el navegador la soporte. Un ejemplo de uso en un componente:
constructor(@Inject(DOCUMENT) private readonly _document: Document) { effect(() => { const theme = this.theme(); if (!this._document.startViewTransition) { this._setTheme(theme); return; } this._document.startViewTransition(() => { this._setTheme(theme); }); }); }
Y un ejemplo de animación CSS para la nueva vista:
::view-transition-old(root) { animation-delay: 500ms; } ::view-transition-new(root) { animation: circle-in 500ms; } @keyframes circle-in { from { clip-path: circle(0% at 50% 0%); } to { clip-path: circle(120% at 50% 0%); } }
Con estos cambios tendrá un control completo sobre el tema oscuro en Angular Material y podrá ofrecer una experiencia pulida tanto para usuarios que siguen la preferencia del sistema como para los que eligen manualmente.
Sobre nosotros: en Q2BSTUDIO somos una empresa de desarrollo de software y aplicaciones a medida especializada en soluciones tecnológicas avanzadas. Ofrecemos servicios de software a medida, aplicaciones a medida, inteligencia artificial, ia para empresas, agentes IA y desarrollo de experiencias con Power BI. También ayudamos a las organizaciones con ciberseguridad, servicios cloud aws y azure y servicios inteligencia de negocio para tomar decisiones basadas en datos.
Si necesita integrar un tema oscuro como parte de una aplicación a medida o quiere que su producto incluya capacidades de inteligencia artificial o ciberseguridad contacte con Q2BSTUDIO. Podemos diseñar software a medida, integrar agentes IA, implementar soluciones de inteligencia artificial y servicios cloud aws y azure, y crear paneles con power bi para exponer indicadores clave.
Palabras clave para mejorar el posicionamiento: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA, power bi.
Si quiere que implementemos esta funcionalidad en su proyecto o desea una consultoría sobre seguridad, cloud o inteligencia artificial, en Q2BSTUDIO estamos preparados para ayudarle con soluciones personalizadas y escalables.
