Palette

색상 팔레트를 설정하는 함수로, 라이트 및 다크 모드를 포함하며 사용자 정의 색상 팔레트를 지원합니다.

앱 예제 Playgroundv1.0.2

소스 보기새 창에서 열기

Interactive exampleTheme 로컬 웹 예제

예제를 선택하면 현재 저장소 소스로 만든 Expo Web 화면을 불러옵니다.

웹 미지원 또는 플랫폼 종속 기능은 실제 iOS·Android 앱에서 확인하세요.

기본 사용법

import { useTheme } from '@0610studio/zs-ui';

function MyComponent() {
  const { palette } = useTheme();

  return (
    <View>
      <View style={{ backgroundColor: palette.primary.main }}>
        <ZSText color="white">Primary Main</ZSText>
      </View>
      <ZSText color="base">Base Text</ZSText>
      <ZSText color="secondary">Secondary Text</ZSText>
    </View>
  );
}

테마 모드

모드 전환

const { palette } = useTheme();

// 테마 토글
palette.toggleTheme();

// 시스템 색상 스키마 사용 여부 설정
palette.setUseSystemColorScheme(true);

// 현재 모드 확인
const currentMode = palette.mode; // 'light' | 'dark'
const isUsingSystem = palette.isUsingSystemColorScheme; // boolean

모드 확인

<Pressable onPress={palette.toggleTheme}>
  <ZSText typo="body.2">현재 모드: {palette.mode}</ZSText>
</Pressable>

색상 팔레트

각 테마 색상은 primary, secondary, danger, warning, success, information, grey와 같이 지정되어 있으며, 팔레트의 각 색상은 라이트와 다크 모드를 지원합니다.

ColorPalette 타입

type ColorPalette = {
  5: string;
  10: string;
  20: string;
  30: string;
  40: string;
  50: string;
  60: string;
  70: string;
  80: string;
  90: string;
  100: string;
  main: string;
};

ColorPaletteExtend 타입 (Primary 전용)

type ColorPaletteExtend = ColorPalette & {
  lighter: string;
  light: string;
  dark: string;
  darker: string;
};

색상 사용 예제

Primary 색상

<View style={{ backgroundColor: palette.primary.lighter }}>
  <ZSText color="white">Primary Lighter</ZSText>
</View>
<View style={{ backgroundColor: palette.primary.light }}>
  <ZSText color="white">Primary Light</ZSText>
</View>
<View style={{ backgroundColor: palette.primary.main }}>
  <ZSText color="white">Primary Main</ZSText>
</View>
<View style={{ backgroundColor: palette.primary.dark }}>
  <ZSText color="white">Primary Dark</ZSText>
</View>
<View style={{ backgroundColor: palette.primary.darker }}>
  <ZSText color="white">Primary Darker</ZSText>
</View>

팔레트 색상 (5~100)

<View style={{ backgroundColor: palette.primary[5] }}>
  <ZSText>Primary 5</ZSText>
</View>
<View style={{ backgroundColor: palette.primary[50] }}>
  <ZSText>Primary 50</ZSText>
</View>
<View style={{ backgroundColor: palette.primary[100] }}>
  <ZSText>Primary 100</ZSText>
</View>

텍스트 색상

<ZSText color="base">Base Text</ZSText>
<ZSText color="primary">Primary Text</ZSText>
<ZSText color="secondary">Secondary Text</ZSText>
<ZSText color="disabled">Disabled Text</ZSText>
<ZSText color="danger">Danger Text</ZSText>
<ZSText color="warning">Warning Text</ZSText>
<ZSText color="success">Success Text</ZSText>
<ZSText color="information">Information Text</ZSText>
<ZSText color="white">White Text</ZSText>
<ZSText color="black">Black Text</ZSText>

배경 색상

<View style={{ backgroundColor: palette.background.base }}>
  <ZSText>Base Background</ZSText>
</View>
<View style={{ backgroundColor: palette.background.layer1 }}>
  <ZSText>Layer 1 Background</ZSText>
</View>
<View style={{ backgroundColor: palette.background.layer2 }}>
  <ZSText>Layer 2 Background</ZSText>
</View>
<View style={{ backgroundColor: palette.background.neutral }}>
  <ZSText>Neutral Background</ZSText>
</View>

상태별 배경 색상

<View style={{ backgroundColor: palette.background.danger }}>
  <ZSText>Danger Background</ZSText>
</View>
<View style={{ backgroundColor: palette.background.warning }}>
  <ZSText>Warning Background</ZSText>
</View>
<View style={{ backgroundColor: palette.background.success }}>
  <ZSText>Success Background</ZSText>
</View>
<View style={{ backgroundColor: palette.background.information }}>
  <ZSText>Information Background</ZSText>
</View>

주요 색상

Main Colors

palette.mainColor.primary    // Primary 메인 색상
palette.mainColor.secondary  // Secondary 메인 색상
palette.mainColor.danger     // Danger 메인 색상
palette.mainColor.warning    // Warning 메인 색상
palette.mainColor.success    // Success 메인 색상
palette.mainColor.information // Information 메인 색상
palette.mainColor.grey       // Grey 메인 색상

모달 배경색

palette.modalBgColor // 모달 오버레이 배경색

그림자 색상

palette.elevationShadow // 그림자 색상 배열 (0~9 레벨)