Temas en Ignite UI for Web Components

    Ignite UI for Web Components se envía con cuatro temas distintos: Bootstrap, Material, Fluent e Indigo. Todos los temas de componentes están integrados en los componentes, sin embargo, se requiere un archivo de estilo global para que funcionen las paletas, la tipografía y otras configuraciones globales.

    Loading a Theme

    Para habilitar un tema, debe cargarse un archivo de tema. Dependiendo de la configuración de tu proyecto, puedes elegir entre ambosimport​link.

    Aquí está la lista completa de todos los temas incluidos y su ruta:

    Nombre Variante Ubicación
    **Bootstrap*- Luz igniteui-webcomponents/themes/light/bootstrap.css
    **Material*- Luz igniteui-webcomponents/themes/light/material.css
    **Fluido*- Luz igniteui-webcomponents/themes/light/fluent.css
    **Añil*- Luz igniteui-webcomponents/themes/light/indigo.css
    **Bootstrap*- Oscuro igniteui-webcomponents/themes/dark/bootstrap.css
    **Material*- Oscuro igniteui-webcomponents/themes/dark/material.css
    **Fluido*- Oscuro igniteui-webcomponents/themes/dark/fluent.css
    **Añil*- Oscuro igniteui-webcomponents/themes/dark/indigo.css

    Runtime Theme Switching

    [!Note] Changing the theme at runtime also requires you to replace the global stylesheet from the table above.

    Ignite UI for Web Components allows you to switch the component themes at runtime by using the ConfigureTheme function exported by the library.

    Calling it and passing one of the four valid themes - bootstrap, material, fluent, or indigo as a string will change the loaded component styles;

    import { configureTheme } from "igniteui-webcomponents";

// Sets material as the theme to be used by all components
configureTheme("material");

    [!Note] This only tells components to switch their internal styles to the desired theme, you should also switch the global theme file to one of the listed files above.

    API References

    • ConfigureTheme