Ignite UI for Web Components의 테마

Ignite UI for Web Components Bootstrap, Material, Fluent, Indigo의 네 가지 테마와 함께 제공됩니다. 모든 구성 요소 테마는 구성 요소에 내장되어 있지만 팔레트, 타이포그래피 및 기타 글로벌 구성이 작동하려면 글로벌 스타일 파일이 필요합니다.

Loading a Theme

To enable a theme, a theme file should be loaded. Depending on your project configuration you can either import or link.

모든 번들 테마와 해당 경로의 전체 목록은 다음과 같습니다.

이름	변종	위치
부트스트랩	빛	igniteui-webcomComponents/themes/light/bootstrap.css
재료	빛	igniteui-웹 구성 요소/테마/빛/material.css
유창한	빛	igniteui-웹 구성 요소/테마/빛/fluent.css
남빛	빛	igniteui-웹 구성 요소/테마/light/indigo.css
부트스트랩	어두운	igniteui-웹 구성 요소/테마/어두운/bootstrap.css
재료	어두운	igniteui-웹 구성 요소/테마/어두운/material.css
유창한	어두운	igniteui-webcomComponents/themes/dark/fluent.css
남빛	어두운	igniteui-웹 구성 요소/테마/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