Fluent UI React v9를 사용한 빠른 브랜드 라이트 및 다크 모드

Teams 앱, Office 추가 기능 또는 모든 종류의 Microsoft 365 통합을 구축할 때 항상 앱 브랜드를 유지하고 호스팅 앱 UX에 맞추는 균형이 있습니다.

그러나 경험을 구축하고 앱에 브랜드 색상만 있을 수 있는 경우 최종 고객이 추가 기능, 확장 또는 앱을 사용하여 일관된 경험을 할 수 있도록 호스팅 애플리케이션 UX에 맞추는 것이 좋습니다.

이는 Fluent UI React v9과 함께 브랜드 테마 기능을 사용하여 쉽게 달성할 수 있습니다.

라이브러리에는 고유한 브랜드 변형을 제공할 수 있는 기능이 내장된 라이트 모드 및 다크 모드가 함께 제공됩니다.

1. BrandVariants 객체 생성

BrandVariant 인터페이스는 16스톱의 색상 팔레트입니다. 색상 팔레트를 만드는 데 사용할 수 있는 도구가 있지만(향후 더 쉽게 만들 예정입니다.) 이 예에서는 여기에 간단한 도구를 만들었습니다.

const myBrand = {
"10":"#000000",
"20":"#011800",
"30":"#002700",
"40":"#00360c",
"50":"#004612",
"60":"#005618",
"70":"#00671f",
"80":"#007826",
"90":"#218935",
"100":"#3e9949",
"110":"#59a85e",
"120":"#73b776",
"130":"#8ec68f",
"140":"#aad5a9",
"150":"#c6e4c5",
"160":"#e2f2e2"
};

2. 밝고 어두운 테마 만들기

사용자 정의BrandVariants 개체가 있으면 각각 createLightTheme 및 createDarkTheme를 호출하는 밝은 테마와 어두운 테마를 만듭니다.

const light = createLightTheme(myBrand);
const dark = createDarkTheme(myBrand);

3. FluentProvider에 테마 전달

이제 밝은 테마와 어두운 테마가 있으므로 애플리케이션의 FluentProvider에 전달할 수 있으며 해당 범위 내의 모든 구성 요소는 사용자 지정BrandVariants.에서 색상을 선택합니다.

<FluentProvider theme={light}>
  <Button appearance="primary">Button</Button>
  <Switch defaultChecked label="Switch" />
  <TabList defaultSelectedValue="tab1">
    <Tab value="tab1">Tab 1</Tab>
    <Tab value="tab2">Tab 2</Tab>
    <Tab value="tab3">Tab 2</Tab>
  </TabList>
  <Slider defaultValue={50} />
</FluentProvider>

여기에서 가장 좋은 부분은 Fluent UI React v9가 각 구성 요소를 개별적으로 재정의할 필요가 없도록 나머지, 가리키기 및 누름 상태의 구성 요소 전체에 BrandVariants 값을 적용한다는 것입니다.

그래서 당신은 그것을 가지고 있습니다. Microsoft 365 앱, 추가 기능 및 확장에 대한 브랜드 색상을 사용하여 밝고 어두운 모드 지원을 만드는 빠른 방법입니다.

항상 그렇듯이 여기에서 전체 CodesandBox를 찾을 수 있습니다.


Fluent UI React v9에 대한 자세한 내용:

GitHub: https://github.com/microsoft/fluentui

문서: https://react.fluentui.dev

트위터:

즐기다!