테마

CoUI 테마 시스템 가이드

테마#

CoUI는 Flutter와 Web 양쪽에서 일관된 테마 시스템을 제공합니다.

Flutter 테마#

ComponentThemeData#

모든 CoUI Flutter 컴포넌트는 ComponentThemeData를 통해 테마를 받습니다:

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
    extensions: [
      ComponentThemeData(
        button: ButtonTheme(
          borderRadius: BorderRadius.circular(8),
        ),
        badge: BadgeTheme(
          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 2),
        ),
      ),
    ],
  ),
)

개별 컴포넌트 테마#

각 컴포넌트에 로컬 테마를 적용할 수 있습니다:

ComponentTheme(
  data: ComponentThemeData(
    card: CardTheme(
      elevation: 4,
      borderRadius: BorderRadius.circular(16),
    ),
  ),
  child: MyWidget(),
)

styleValue 패턴#

Flutter 컴포넌트는 styleValue()로 테마 값을 해석합니다:

final effectiveRadius = styleValue(
  widget.borderRadius,             // 1. 위젯 직접 지정값
  theme?.borderRadius,             // 2. ComponentTheme 값
  () => BorderRadius.circular(8),  // 3. 기본값
);

Web 테마#

DaisyUI 테마#

CoUI Web은 DaisyUI의 35+ 내장 테마를 지원합니다:

<html data-theme="light">
<!-- 또는 -->
<html data-theme="dark">

Style Modifier 패턴#

Web 컴포넌트는 Style Modifier로 변형을 적용합니다:

Button(
  style: [Button.primary, Button.lg, Button.wide],
  child: text('Large Primary Button'),
)

커스텀 테마#

Tailwind CSS를 통해 커스텀 테마를 정의합니다:

[data-theme="custom"] {
  --p: 262 80% 50%;    /* primary */
  --s: 314 72% 45%;    /* secondary */
  --a: 174 72% 56%;    /* accent */
  --n: 218 14% 22%;    /* neutral */
  --b1: 0 0% 100%;     /* base-100 */
}

Light/Dark 모드#

MaterialApp(
  theme: ThemeData.light().copyWith(
    extensions: [ComponentThemeData()],
  ),
  darkTheme: ThemeData.dark().copyWith(
    extensions: [ComponentThemeData()],
  ),
  themeMode: ThemeMode.system,
)

// ThemeToggle 버튼으로 전환
ThemeController(
  child: MyApp(),
)