사전 정의된 테마

lh-ui-plus는 5가지 국풍 사전 정의 테마를 내장했으며, 바로 사용할 수 있습니다. 두 가지 사용 방식이 있습니다:

• 전역 전환 (권장): useLhPresetTheme가 사전 설정 변수를 :root에 기록하여 사이트 전체에 적용하고 localStorage에 지속합니다.
• 부분 전환: LhConfigProvider :theme-vars는 하위 트리에만 영향을 주며, 같은 페이지 안에 여러 테마를 나란히 보여줄 때 적합합니다.

사전 설정 변수는 getThemeVars(name)(@lh-ui/vue3/theme 제공)로 가져올 수 있으며, name 값은 아래 각 섹션을 참고하세요.

사이트 수준 테마 전환

이 사이트는 상단 내비게이션 바에 "테마 사전 설정" 드롭다운을 제공하여 5가지 국풍 테마를 한 번에 전환할 수 있습니다. 선택은 localStorage['lh-docs-preset']에 지속되어 새로고침 후에도 유지됩니다.

테마 사전 설정과 라이트/다크 모드는 두 개의 독립적인 축입니다: VitePress 내비게이션 바 오른쪽의 🌙/☀️ 스위치는 라이트/다크를 전환하고, "테마 사전 설정" 드롭다운은 색 팔레트(청화자기, 진사, 송화록 등)를 전환합니다. 다크 모드에서도 사전 설정은 그대로 적용되며, 색조가 다른 다크 테마로 나타납니다.

공통 테마 속성 themeVars와 bgPattern

모든 lh-ui-plus 컴포넌트는 LhConfigProvider나 컴포넌트 자체의 themeVars 속성으로 부분 테마 덮어쓰기를 지원합니다. 문양 배경은 bgPattern 속성으로 통일 제어합니다 (문양 적용 대상은 ConfigProvider의 patternComponents 허용 목록에 따릅니다). 이 두 속성은 컴포넌트를 가로지르는 공통 기능이므로 각 컴포넌트 문서에서 일일이 예시를 들지 않고, 테마 사용자 정의와 문양 배경 시스템에서 함께 설명합니다.

청화자기 / Ceramic Blue (기본)

기본 테마, 청화자기 유약채, 맑고 단정합니다. 사전 설정 이름: cerblue.

청화자기 테마

태그

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

// getThemeVars가 반환하는 키에는 이미 --lh- 접두사가 붙어 있으며, ConfigProvider의 접두사 처리는 멱등하므로 그대로 전달할 수 있습니다
const cerblueTheme = getThemeVars('cerblue')
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">주요 버튼</LhButton>
      <LhButton type="success">성공</LhButton>
      <LhButton type="warning">경고</LhButton>
      <LhButton type="danger">위험</LhButton>
      <LhTag type="primary">태그</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

송화록 / Pine Green

대나무 숲의 푸르름, 생기가 넘칩니다. 사전 설정 이름: songhua.

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

const songhuaTheme = getThemeVars('songhua')
</script>

<template>
  <LhConfigProvider :theme-vars="songhuaTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">주요 버튼</LhButton>
      <LhTag type="primary">태그</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

진사 / Vermilion

전통 도장의 진사홍, 축제와 격식을 담습니다. 사전 설정 이름: zhusha.

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

const zhushaTheme = getThemeVars('zhusha')
</script>

<template>
  <LhConfigProvider :theme-vars="zhushaTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">주요 버튼</LhButton>
      <LhTag type="primary">태그</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

수묵 / Ink Wash

수묵 담채, 소박하고 극합니다. 사전 설정 이름: shuimo.

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

const shuimoTheme = getThemeVars('shuimo')
</script>

<template>
  <LhConfigProvider :theme-vars="shuimoTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">주요 버튼</LhButton>
      <LhTag type="primary">태그</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

등황 / Golden Autumn

늦가을 단풍의 노랑, 따뜻한 금빛. 사전 설정 이름: golden.

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch } from '@lh-ui/vue3'
import { getThemeVars } from '@lh-ui/vue3/theme'

const goldenTheme = getThemeVars('golden')
</script>

<template>
  <LhConfigProvider :theme-vars="goldenTheme">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">주요 버튼</LhButton>
      <LhTag type="primary">태그</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

테마 비교

테마	사전 설정 이름	주색 --lh-primary-color	주색 배경 --lh-primary-color-bg	설명
청화자기	cerblue	#2B4C7C	#E8EDF3	청화자기 유약채, 맑고 단정함
송화록	songhua	#5B8C5A	#E8F5E8	대나무 숲의 푸르름, 생기 넘침
진사	zhusha	#B23A3A	#FDF0F0	전통 도장의 진사홍, 축제와 격식
수묵	shuimo	#2C2C2C	#F5F5F5	수묵 담채, 소박하고 극함
등황	golden	#B8860B	#FBF6EA	늦가을 단풍의 노랑, 따뜻한 금빛

사전 설정은 주색 (primary) 팔레트만 덮어씁니다. --lh-primary-color-bg는 주색을 연하게 한 배경색이며, 페이지 전체 배경색이 아닙니다.

프로그래밍 방식 전환

두 가지 메커니즘이 있으며, 적용 범위에 따라 선택합니다:

• 전역 전환 (권장): useLhPresetTheme가 사전 설정 변수를 :root에 기록하여 사이트 전체에 적용하고 localStorage에 지속되어 새로고침 후에도 선택이 유지됩니다. LhConfigProvider로 감쌀 필요가 없습니다.
• 부분 전환: LhConfigProvider :theme-vars는 하위 트리에만 영향을 주며, 같은 페이지 안에 여러 테마를 나란히 보여줄 때 적합합니다.

전역 사전 설정 전환

아래 전환 버튼들은 :root에 기록되므로 문서 사이트 전체가 영향을 받습니다. 이 페이지에서 전역 전환을 따로 시연하지 않는 이유이기도 합니다.

<script setup lang="ts">
import { LhButton, useLhPresetTheme } from '@lh-ui/vue3'

const { preset, setPreset, presets } = useLhPresetTheme()
</script>

<template>
  <LhButton
    v-for="theme in presets"
    :key="theme.name"
    :type="preset === theme.name ? 'primary' : 'default'"
    @click="setPreset(theme.name)"
  >
    {{ theme.label }}
  </LhButton>
</template>

부분 적용 범위 전환

applyToRoot: false를 전달하면 전역 기록을 끄고 반환된 themeVars만 가져옵니다 (ConfigProvider 규약에 따라 --lh- 접두사가 제거된 상태). 적용 범위는 Provider가 담당합니다.

전환 버튼은 LhConfigProvider 바깥에 두어야 합니다. 그렇지 않으면 버튼 자신도 테마 색이 바뀝니다:

부분 사전 정의 테마 전환

태그

<script setup lang="ts">
import { LhConfigProvider, LhButton, LhTag, LhSwitch, useLhPresetTheme } from '@lh-ui/vue3'

const { preset, setPreset, presets, themeVars } = useLhPresetTheme({ applyToRoot: false })
</script>

<template>
  <div style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px">
    <LhButton
      v-for="theme in presets"
      :key="theme.name"
      :type="preset === theme.name ? 'primary' : 'default'"
      @click="setPreset(theme.name)"
    >
      {{ theme.label }}
    </LhButton>
  </div>
  <LhConfigProvider :theme-vars="themeVars">
    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <LhButton type="primary">주요 버튼</LhButton>
      <LhButton type="success">성공</LhButton>
      <LhButton type="warning">경고</LhButton>
      <LhButton type="danger">위험</LhButton>
      <LhTag type="primary">태그</LhTag>
      <LhSwitch />
    </div>
  </LhConfigProvider>
</template>

접두사 작성 방식: ConfigProvider의 접두사 처리는 멱등합니다. getThemeVars()(@lh-ui/vue3/theme 제공)가 반환하는 키에는 이미 --lh- 접두사가 붙어 있어 :theme-vars에 그대로 전달할 수 있고, useLhPresetTheme()이 반환하는 themeVars는 접두사가 제거된 상태입니다. 둘 다 :theme-vars에 바로 사용할 수 있으며, 재가공이 필요 없습니다.