Implement theme toggle(multi theme) feature

[sungik-choi]

Description

테마 토글 기능을 구현합니다.

NOTE: CSS-in-JS에서 static CSS(classname) 기반으로 스타일 시스템이 변경된 이후 시작할 수 있습니다.

Reasons for suggestion

현재 CSS-in-JS(styled-components)에서는 BezierProvider 에 theme 객체를 넘기는 것으로 테마 스위칭을 구현할 수 있습니다. static CSS 기반으로 스타일링 방식이 변경됨에따라 이 기능에도 변경이 필요합니다.

Proposed solution

• data attribute 혹은 className 기반으로 테마를 변경하는 기능을 구현합니다.
• 현재 BezierProvider 를 중첩함으로써 특정 테마를 제한하는 동작도 마찬가지로 구현할 수 있습니다.
• 채널 데스크 어플리케이션의 BezierProvider 에 구현되어 있는 테마 변경 로직을 일부 옮겨올 수 있습니다.
• 자바스크립트로도 현재 테마(디자인 토큰 셋)에 접근할 수 있으면 좋겠습니다. static CSS 기반으로 변경되더라도, 어플리케이션에서 JS에서 현재 테마와 CSS 값들에 접근해야하는 경우는 여전히 존재하기 때문입니다.
• 테마가 시스템 설정을 따르는 케이스에 대한 처리가 필요합니다. (perfers-color-scheme)

아래는 data attribute 기반으로 작성해본 간단한 예시 코드입니다.

const useTheme = () => {
  const [theme, setTheme] = useContext(ThemeContext)
  // 테마(토큰)과 테마 설정 함수를 반환
  return [theme, setTheme] 
}

// 이 훅이 반환하는 setter를 호출하면 DarkTheme, LightTheme 하위에서는 올바르게 동작하지 않았으면 좋겠음!
// console.error("현재 다크 테마로 고정되어 있습니다") 같은 식의 에러가 노출되면 좋겠다.

const BezierProvider = (themeToken?: DesignTokenSet) => {
  const [theme, setTheme] = useState(themeToken)
  
  // div를 렌더하지 않는 편이 좋을 수도 있음.
  // 1. Overlay 같은 케이스처럼 container를 지정
  // 2. radix-ui의 asChild 속성처럼 하위 엘리먼트에 data-bezier-theme 속성을 런타임에 주입
  return (
    <ThemeContext value={[theme, setTheme]}>
      <div data-bezier-theme={getThemeName(theme)}>
        { children }
      </div>
    </ThemeContext>
  )
}

const DarkTheme = () => (
  <ThemeContext value={[darkThemeTokenSet, () => { console.error("...") }]}>
    <div data-bezier-theme="dark">
      { children }
    </div>
  </ThemeContext>
)

const LightTheme = () =>  ( /* ... */ )

References

• https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/AppProvider/AppProvider.tsx

[sungik-choi]

radix theme: https://github.com/radix-ui/themes/blob/main/packages/radix-ui-themes/src/theme.tsx