테마 스튜디오

테마 스튜디오는 인터랙티브 도구입니다: 프리셋을 고르고, 토큰별로 색을 바꾸고, 실시간 미리보기를 확인한 뒤, 마지막에 바로 쓸 수 있는 SCSS 파일을 내보냅니다.

프리셋青花瓷（cerblue）松花绿（songhua）朱砂（zhusha）水墨（shuimo）藤黄（golden）사용자 지정

主色

主色

悬停

按压

主色底

主色边框

主色衍生

主色底文字

选中态文字

功能色

成功

警告

危险

信息

文本

主要文字

常规文字

次要文字

背景

容器背景

页面背景

边框

基础边框

浅边框

실시간 미리보기

주요 태그성공 태그위험 태그

선택됨

주요 텍스트·일반 텍스트·보조 텍스트

편집한 토큰은 미리보기 영역에만 적용됩니다(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; }

사용 방법

1. 프리셋 선택: 상단 드롭다운에서 5개 내장 색상 팔레트(青花瓷(청화백자) / 松花绿(pine-flower green) / 朱砂(주사) / 水墨(수묵) / 藤黄(등황))를 전환합니다. 프리셋은 자신이 선언한 토큰만 덮어쓰고, 나머지는 현재 값을 유지합니다.
2. 토큰 수정: 토큰 그룹마다 색 선택기와 hex 입력란이 있으며 둘이 동기화됩니다. "기본 파생 체인 따름" 표시가 있는 선택 토큰(예: --lh-selected-color)은 비워두면 스타일시트의 기본 파생 관계를 따릅니다.
3. 미리보기: 미리보기 영역은 실제 lh-ui 컴포넌트로 렌더링되며, 토큰이 지역 CSS 변수로 주입됩니다 (LhConfigProvider와 동일한 메커니즘). 미리보기 영역 자체에만 적용되고 사이트에는 영향을 주지 않습니다. 라이트 / 다크 전환으로 다크 대응 효과를 확인할 수 있습니다.
4. 내보내기: 복사하거나 다운로드한 SCSS 텍스트에는 :root 토큰 블록과 [data-theme='dark'] 다크 블록이 포함되어 있습니다. 다크 로직은 share의 프리셋 메커니즘과 완전히 동일합니다 (밝은 주색 프리셋은 다크에서 자동으로 주색을 밝게 올리고, 그렇지 않으면 버튼과 배경이 하나로 녹아듭니다).

내보낸 텍스트의 구조

/* lh-ui 커스텀 테마 — 테마 스튜디오가 생성 (2026-01-01) */
@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);
  /* ... */
}

• @use가 전체 토큰 기준선을 가져오고, :root 블록은 바뀐 토큰만 덮어씁니다.
• 다크 블록은 buildPresetDarkVars로 유도되며, 미리보기에서 본 것과 완전히 일치합니다.

주의 사항

<style> 요소만 작성 가능

프리셋 변수를 적용할 때는 반드시 <style> 요소로 작성해야 합니다 (명시도 0,1,0). documentElement의 인라인 style으로 쓰지 마세요 — 인라인 명시도 1,0,0,0이 모든 스타일시트보다 높아 var-dark.scss의 다크 변수 전체를 눌러, 다크 모드 색상이 왜곡됩니다. 라이브러리의 useLhPresetTheme와 이 사이트의 FOUC 방지 스크립트 모두 이 약속을 따릅니다.

밝은 주색의 명암

밝은 주색 프리셋(예: 松花绿(pine-flower green))은 --lh-color-on-primary(주색 배경에 먹 글자 사용)과 --lh-selected-color(선택 상태 글자만 따로 어둡게)를 명시적으로 선언해야 합니다. 그렇지 않으면 밝은 주색 위의 흰 글자가 AA 명암을 충족하지 못합니다. 내장 프리셋은 이미 처리되어 있으며, 커스텀 시에는 직접 확인해야 합니다.

Vue 버전과의 관계

이 페이지의 도구는 lh-ui-plus의 ThemeStudio에서 이식되었으며, 토큰 기본값, 그룹화, 다크 추출 로직이 모두 동일합니다. 내보낸 SCSS는 두 라이브러리에서 공통으로 사용할 수 있습니다 (토큰 정의는 공유 레이어 @lh-ui/share/styles/theme/common/var.scss에 있음).