# 테마 스튜디오

프리셋만 쓰고 싶지 않나요? 아래 스튜디오에서 프리셋 하나를 출발점으로 고르고, 토큰별로 자신만의 배색을 조정해 보세요. 미리 보기 영역에 즉시 반영되고, 마지막에 scss 파일 하나를 내보내 프로젝트에 바로 넣을 수 있습니다 — 컴포넌트 라이브러리를 다시 컴파일할 필요가 없습니다.

주색

--lh-primary-color

--lh-primary-color-hover

--lh-primary-color-active

--lh-primary-color-bg

--lh-primary-color-border

주색 파생

--lh-color-on-primary

--lh-selected-color

기능색

--lh-success-color

--lh-warning-color

--lh-danger-color

--lh-info-color

텍스트

--lh-text-primary

--lh-text-regular

--lh-text-secondary

배경

--lh-bg-color

--lh-bg-color-page

테두리

--lh-border-color-base

--lh-border-color-light

실시간 미리보기

标签标签标签

主要文字·常规文字·次要文字

편집한 토큰은 미리보기 영역에만 적용됩니다(ConfigProvider 와 동일한 방식). 내보낸 파일에도 다크 모드 적응이 포함되어 있습니다.

SCSS 내보내기

# 내보낸 테마 적용하기

스튜디오가 내보낸 파일은 이런 모양입니다 (토큰 소스는 @lh-ui/share/styles/theme/common/var.scss).

@use '@lh-ui/share/styles/index.scss';

:root {
  --lh-primary-color: #2B4C7C;
  /* ... */
}

[data-theme='dark'],
.dark {
  --lh-primary-color-bg: color-mix(in srgb, var(--lh-primary-color) 25%, transparent);
  --lh-selected-color: color-mix(in srgb, var(--lh-primary-color) 40%, #fff);
}

두 가지 적용 방법:

방법 1: 정적 불러오기 (권장) — 내보낸 lh-theme.scss 를 프로젝트에 넣고, 엔트리에서 불러옵니다.

// main.js
import './lh-theme.scss'

@use '@lh-ui/share/styles/index.scss' 가 모든 컴포넌트 스타일과 테마 토큰을 포함하고 있어 한 줄이면 충분합니다. 다크 블록은 share 의 프리셋 메커니즘과 같은 소스에서 와서 data-theme="dark" 에서 자동으로 전환됩니다.

방법 2: 런타임 주입 — LhConfigProvider 의 themeVars 로 국부 덮어쓰기 (키는 줄임 표기로 --lh- 접두사가 자동으로 붙음). 같은 페이지에 여러 테마를 나란히 놓을 때 적합합니다.

<template>
  <LhConfigProvider :theme-vars="{ primaryColor: '#2B4C7C', onPrimary: '#FFFFFF' }">
    <LhButton type="primary">주요 버튼</LhButton>
  </LhConfigProvider>
</template>

<script>
import { LhConfigProvider, LhButton } from '@lh-ui/vue2'

export default {
  components: { LhConfigProvider, LhButton },
}
</script>

예시 코드는 npm 패키지명(@lh-ui/vue2 / @lh-ui/share)을 사용하며, 복사해서 바로 쓸 수 있습니다. 이 문서 사이트의 실제 실행은 패밀리의 로컬 소스를 사용하므로, 변경 사항이 즉시 보입니다.

# 주의 사항

밝은 주색에는 반드시 --lh-color-on-primary 를 명시해야 합니다: 밝은 주색 위의 흰 글자는 AA 대비(4.5:1)를 충족하지 못해, 프리셋에서는 松花绿(pine-flower green) / 藤黄(gamboge yellow) 모두 먹 글자로 바뀌었습니다. 스튜디오의 「주색 바탕 글자」 필드가 이 토큰에 해당합니다.
--lh-selected-color 를 비워두면 --lh-primary-color-active 의 기본 연결을 따릅니다. 밝은 주색에서 선택된 글자는 종종 별도로 더 어둡게 해야 합니다 (프리셋에도 반영되어 있습니다).
대비 게이트: share 의 pnpm verify:theme 가 실제 사용 짝별로 각 프리셋의 AA 대비를 다시 계산합니다. 사용자 지정 테마도 테마 의 설명을 따라 한 번 점검하기를 권장합니다.

← 테마