# Studio de thèmes

Vous voulez aller plus loin que les préréglages ? Dans le studio ci-dessous, choisissez un préréglage comme point de départ, ajustez vos couleurs jeton par jeton, l'aperçu est mis à jour en temps réel, puis exportez un fichier scss à déposer directement dans votre projet — inutile de recompiler la bibliothèque de composants.

Couleur principale

--lh-primary-color

--lh-primary-color-hover

--lh-primary-color-active

--lh-primary-color-bg

--lh-primary-color-border

Dérivés du principal

--lh-color-on-primary

--lh-selected-color

Couleurs fonctionnelles

--lh-success-color

--lh-warning-color

--lh-danger-color

--lh-info-color

Texte

--lh-text-primary

--lh-text-regular

--lh-text-secondary

Fond

--lh-bg-color

--lh-bg-color-page

Bordure

--lh-border-color-base

--lh-border-color-light

Aperçu en direct

标签标签标签

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

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

# Adopter le thème exporté

Le fichier exporté par le studio ressemble à ceci (la source des jetons se trouve dans @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);
}

Deux méthodes d'adoption :

Méthode 1 : import statique (recommandée) — déposez le lh-theme.scss exporté dans votre projet et importez-le à l'entrée :

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

@use '@lh-ui/share/styles/index.scss' contient déjà tous les styles de composants et les jetons de thème, une seule ligne suffit ; le bloc sombre est de la même source que le mécanisme de préréglages de share, il bascule automatiquement sous data-theme="dark".

Méthode 2 : injection à l'exécution — surchargez localement avec la propriété themeVars de LhConfigProvider (les clés sont transmises sous forme abrégée, le préfixe --lh- est ajouté automatiquement), ce qui convient à la juxtaposition de plusieurs thèmes sur une même page :

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

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

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

Le code d'exemple utilise systématiquement les noms de paquets npm (@lh-ui/vue2 / @lh-ui/share), prêt à être copié ; le présent site de documentation s'exécute quant à lui sur les sources locales de la famille, de sorte que les modifications sont immédiatement visibles.

# Points d'attention

Une couleur primaire claire doit déclarer explicitement --lh-color-on-primary : du texte blanc sur une couleur primaire claire n'atteint pas le contraste AA (4.5:1), c'est pourquoi les préréglages 松花绿 (vert pin) et 藤黄 (gamboge) utilisent du texte couleur encre. Le champ « Texte sur couleur primaire » du studio correspond à ce jeton.
Lorsque --lh-selected-color est laissé vide, la chaîne par défaut de --lh-primary-color-active s'applique ; avec une couleur primaire claire, le texte sélectionné doit souvent être foncé séparément (les préréglages en témoignent également).
Le gate de contraste : la commande pnpm verify:theme de share recalcule le contraste AA de chaque préréglage à partir des paires réellement consommées ; pour un thème personnalisé, il est recommandé d'effectuer la même auto-vérification en suivant les explications de Thèmes.

← Thèmes