테마 스튜디오

사전 정의된 테마만으로 부족하다면, 아래 스튜디오에서 사전 설정을 출발점으로 삼아 토큰마다 하나씩 자신만의 색 조합을 조정해 보세요. 미리보기 영역에 실시간으로 반영되고, 마지막에 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 自定义主题 —— 由主题定制台生成（2026-10-15）
 * 令牌定义见 @lh-ui/share/styles/theme/common/var.scss；暗色块与预设机制同源
 *（浅主色下 --lh-color-on-primary / --lh-selected-color 需显式声明，否则白字不达 AA） */
@use '@lh-ui/share/styles/index.scss';

:root {
  --lh-primary-color: #2B4C7C;
  --lh-primary-color-hover: #3D649E;
  --lh-primary-color-active: #1F3A5F;
  --lh-primary-color-bg: #E8EDF3;
  --lh-primary-color-border: #D4DCE8;
  --lh-color-on-primary: #FFFFFF;
  --lh-success-color: #5B8C5A;
  --lh-warning-color: #C4A35A;
  --lh-danger-color: #B23A3A;
  --lh-info-color: #7A7A7A;
  --lh-text-primary: #2C2C2C;
  --lh-text-regular: #5A5A5A;
  --lh-text-secondary: #8A8A8A;
  --lh-bg-color: #FAF6F0;
  --lh-bg-color-page: #F5F0EB;
  --lh-border-color-base: #D8D3CC;
  --lh-border-color-light: #E5E0D8;
}

[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);
  --lh-primary-color: color-mix(in srgb, #2B4C7C 55%, #fff);
  --lh-primary-color-hover: color-mix(in srgb, var(--lh-primary-color) 70%, #fff);
  --lh-primary-color-active: color-mix(in srgb, var(--lh-primary-color) 85%, #000);
  --lh-color-on-primary: #101410;
}

내보낸 테마 적용하기

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

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.ts
import './lh-theme.scss'

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

방식 2: 런타임 주입 — LhConfigProvider의 themeVars로 부분적으로 덮어씁니다 (키는 축약형이며, 자동으로 --lh- 접두사가 붙습니다). 같은 페이지에 여러 테마를 나란히 둘 때 적합합니다:

vue

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

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

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

주의 사항

밝은 주색을 쓸 때는 --lh-color-on-primary를 명시적으로 선언해야 합니다: 흰 글자는 밝은 주색 위에서 AA 대비도 (4.5:1)에 도달하지 못하며, 사전 정의 테마에서도 松花绿 (송화록) / 藤黄 (등황)은 이 때문에 먹 글자를 사용합니다. 스튜디오의 "주색 배경 글자" 필드가 이 토큰에 해당합니다.
--lh-selected-color를 비워두면 --lh-primary-color-active의 기본 연쇄를 따라갑니다. 밝은 주색에서는 선택된 글자에 더 자주 별도로 진하게 처리해야 합니다 (사전 정의 테마에도 반영되어 있습니다).
대비도 게이트: share의 pnpm verify:theme가 실제 사용 조합을 기준으로 각 사전 정의 테마의 AA 대비도를 다시 계산합니다. 사용자 정의 테마도 사전 정의된 테마의 주석을 참고해 한 번씩 점검하기를 권장합니다.

테마 스튜디오 ​

내보낸 테마 적용하기 ​

주의 사항 ​

테마 스튜디오

내보낸 테마 적용하기

주의 사항