Aller au contenu principal

Studio de thèmes

Le Studio de thèmes est un outil interactif : choisir un préréglage, modifier les jetons un par un, prévisualiser en temps réel, puis exporter un fichier SCSS prêt à l'emploi.

主色
主色
悬停
按压
主色底
主色边框
主色衍生
主色底文字
选中态文字
功能色
成功
警告
危险
信息
文本
主要文字
常规文字
次要文字
背景
容器背景
页面背景
边框
基础边框
浅边框
Aperçu en direct
Étiquette principaleÉtiquette de succèsÉtiquette de danger

Texte principal·Texte normal·Texte secondaire

Les jetons que vous modifiez ne s'appliquent qu'à la zone d'aperçu (même mécanisme que ConfigProvider). Le fichier exporté fonctionne aussi en mode sombre.

Exporter SCSS

Mode d'emploi​

  1. Choisir un préréglage : la liste déroulante en haut permet de basculer entre les cinq palettes intégrées (青花瓷 (porcelaine bleue et blanche) / 松花绿 (vert pin) / 朱砂 (cinabre) / 水墨 (encre de Chine) / 藤黄 (gamboge)). Un préréglage ne surcharge que les jetons qu'il déclare ; les autres conservent leur valeur courante.
  2. Modifier les jetons : chaque jeton dispose d'un sélecteur de couleur et d'un champ hexadécimal, synchronisés l'un avec l'autre. Les jetons optionnels marqués « suit la chaîne par défaut » (comme --lh-selected-color) peuvent être laissés vides : ils suivent alors la relation de dérivation par défaut de la feuille de style.
  3. Prévisualiser : la zone de prévisualisation rend de véritables composants lh-ui, les jetons étant injectés sous forme de variables CSS locales (même mécanisme que LhConfigProvider), et agissent uniquement sur la zone de prévisualisation, sans affecter le site. La bascule clair / sombre permet de vérifier l'adaptation au mode sombre.
  4. Exporter : le texte SCSS obtenu par copie ou téléchargement contient déjà le bloc de jetons :root et le bloc sombre [data-theme='dark'] ; la logique sombre est parfaitement isomorphe au mécanisme de préréglage de share (un préréglage à primaire profond voit automatiquement sa couleur principale éclaircie en mode sombre, sans quoi les boutons se confondraient avec le fond).

Structure du texte exporté​

/* Thème personnalisé lh-ui — généré par le Studio de thèmes (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 introduit la baseline complète des jetons ; le bloc :root ne surcharge que les jetons modifiés.
  • Le bloc sombre est dérivé par buildPresetDarkVars, rigoureusement identique à ce qu'affiche la zone de prévisualisation.

Remarques​

Écrire uniquement dans un élément <style>

Lors de l'application des variables d'un préréglage, il faut écrire dans un élément <style> (spécificité 0,1,0) — jamais dans le style en ligne du documentElement : la spécificité en ligne est de 1,0,0,0, supérieure à toute feuille de style, et elle écraserait tout le bloc de variables sombres de var-dark.scss, faussant ainsi la palette du mode sombre. Le useLhPresetTheme de la bibliothèque et le script anti-scintillement de ce site respectent tous deux cette règle.

Contraste des primaires claires

Un préréglage à primaire claire, comme 松花绿 (vert pin), nécessite de déclarer explicitement --lh-color-on-primary (texte en encre sur la primaire) et --lh-selected-color (couleur distincte, plus profonde, pour le texte sélectionné) ; sans quoi le texte blanc sur une primaire claire n'atteint pas le contraste AA. Les préréglages intégrés le prennent en charge ; à vérifier par vous-même en cas de personnalisation.

Relation avec la version Vue

L'outil de cette page est porté du ThemeStudio de lh-ui-plus ; les valeurs par défaut des jetons, les groupes et la logique de dérivation sombre sont tous identiques, et le SCSS exporté est commun aux deux bibliothèques (les jetons sont définis dans la couche partagée @lh-ui/share/styles/theme/common/var.scss).