테마

lh-ui 패밀리의 테마 체계는 @lh-ui/share 에 정의됩니다(유일한 소스). Vue2 라이브러리는 CSS 변수로 소비합니다.

CSS 변수

모든 토큰의 이름은 --lh-* 이고, @lh-ui/vue2/theme.css 가 :root 에 주입합니다.

:root {
  --lh-primary-color: #2B4C7C;
  --lh-bg-color: #FAF6F0;
  --lh-text-color: #2C2A26;
  /* 전체 목록은 share 저장소의 theme 소스 참조 */
}

다크 모드

<link rel="stylesheet" href="@lh-ui/vue2/theme-dark.css" />

<html data-theme="dark">

.dark class 형식도 지원합니다. 변수는 ConfigProvider 또는 :root 에서 연달아 적용되며, 컴포넌트 자체는 중복 선언하지 않습니다.

ConfigProvider 국부 커스터마이징

<template>
  <LhConfigProvider :theme-vars="{ 'primary-color': '#4A6741' }">
    <LhButton type="primary">죽청 버튼</LhButton>
  </LhConfigProvider>
</template>

우선순위: 컴포넌트 자체 themeVars > componentTheme[컴포넌트명] > 전역 themeVars. bg-pattern 문양은 추가로 patternComponents 화이트리스트의 제어를 받습니다.

프리셋 테마와 프리셋 전환

@lh-ui/vue2/theme 가 share 의 TS 프리셋(青花瓷(ceramic blue), 松花绿(pine-flower green) 등)을 전달하고, useLhPresetTheme 가 짝을 이룹니다.

import { useLhPresetTheme } from '@lh-ui/vue2'

const { preset, setPreset, presets, themeVars } = useLhPresetTheme()
setPreset('songhua') // :root 에 기록; themeVars 는 ConfigProvider 에 넘겨 국부적으로 적용할 수도 있음

useLhTheme 가 명/암 전환(data-theme + localStorage 지속화)을 담당합니다.