Theming Systempar Owl-Listener

Theming System Skill.

Permettez à une bibliothèque de composants de changer d'apparence sans dupliquer sa structure.

Design systems
Thématisation

Télécharger OpenDesign Voir le guide d'utilisation

Revue de la source · Theming SystemSKILL.md

Tâche Design systems Produit • Une architecture de tokens à trois couches avec des règles de surcharge. • Une matrice de thèmes couvrant les modes de couleur, de marque ou de densité requis. • Des indications sur la couverture des composants et sur les tokens fixes ou thématisables. Avant de commencer L'implémentation s'appuie sur le système de tokens du projet ou sur des équivalents propres à la plateforme ; le changement de thème à l'exécution doit être développé et testé.

Résumé éditorial · source examinée le 2026-10-07 · pas un exemple généré

01 Fonctionnement

Prendre en charge plusieurs thèmes grâce aux tokens

Une architecture de thématisation par couches pour des composants partagés entre marques, modes de couleur et variantes de densité.

Flux de travail fondé sur la sourcePas un benchmark d'exécution

La méthode de travail

Theming System place les différences de thème dans une architecture de tokens en couches. Les valeurs brutes de la palette alimentent des rôles sémantiques, qui alimentent ensuite des tokens propres aux composants. Les surcharges de thème modifient principalement la couche sémantique, ce qui permet aux mêmes composants de servir différentes marques ou différents modes de couleur.

La source distingue les thèmes de la simple inversion des couleurs. Les surfaces sombres, l'élévation, la saturation et les variantes d'images demandent un traitement délibéré. Elle cite aussi la densité comme dimension de thème, ce qui rend la spécification pertinente au-delà de la seule couleur.

Livrables attendus

Une architecture de tokens à trois couches avec des règles de surcharge.
Une matrice de thèmes couvrant les modes de couleur, de marque ou de densité requis.
Des indications sur la couverture des composants et sur les tokens fixes ou thématisables.

Voir l'exemple de brief

Du brief à la revue

01
Séparer les couches de tokens
Identifiez les primitives brutes, les alias fondés sur l'usage et les références au niveau des composants.
02
Cartographier les surcharges de thème
Modifiez les rôles sémantiques pour chaque thème demandé tout en préservant le contrat des composants.
03
Vérifier toute la bibliothèque
Passez en revue chaque composant dans chaque thème pris en charge, y compris les images et le comportement selon les préférences du système.

02 Cas d’usage

Quand l'utiliser

L'implémentation s'appuie sur le système de tokens du projet ou sur des équivalents propres à la plateforme ; le changement de thème à l'exécution doit être développé et testé.

Un bon choix

Produits multimarquesUtile lorsque des interfaces en marque blanche ou de sous-marques doivent partager une bibliothèque de composants.
Plus que clair et sombreFournit aussi une structure pour les variantes à contraste élevé ou de densité.

Limites à vérifier

Pas un simple exercice de paletteChoisir un jeu de couleurs ne suffit pas à établir une architecture de thématisation maintenable.
Aucune certification automatique du contrasteChaque combinaison réelle de texte, de surface et d'état doit encore être testée.

Les éléments à fournir

Thèmes pris en chargeListez les marques, modes de couleur, modes de contraste et besoins de densité.
Tokens existantsFournissez la palette, les alias sémantiques et les références des composants.
Éléments de marque fixesIdentifiez les ressources ou valeurs qui ne doivent pas changer d'un thème à l'autre.

03 Décisions importantes

Les décisions importantes

Surcharger à la bonne couche
Les alias sémantiques évitent de disperser des couleurs propres à une marque dans toutes les implémentations de composants.
Les ressources font partie du thème
Les images et illustrations peuvent nécessiter des variantes ; modifier uniquement les variables CSS peut ne pas suffire à rendre le mode sombre cohérent.

04 Exemple de brief

Essayer un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Vérifier la configuration

Utilisez la méthode d'installation documentée du dépôt et conservez tous les fichiers complémentaires référencés. Cette entrée décrit une méthode de conception ciblée, et non une application exécutable.

Fichier source amont

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/theming-system/SKILL.md

L'implémentation s'appuie sur le système de tokens du projet ou sur des équivalents propres à la plateforme ; le changement de thème à l'exécution doit être développé et testé.

Commencer par un seul livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d'exécuter le skill.

Exemple de brief

Utilisez theming-system pour une bibliothèque de composants partagée par deux marques en modes clair et sombre. Définissez les couches primitive, sémantique et composant, identifiez les tokens fixes et montrez comment fonctionnent les surcharges de thème. Incluez des variantes d'images et une matrice d'assurance qualité composant par thème, sans présumer que l'inversion des couleurs suffit.

Examiner le résultat

Comparez le résultat obtenu à ces critères observables.

Les tokens de composants se résolvent via les rôles sémantiques documentés.
Les valeurs thématisables et fixes sont distinguées.
La matrice de tests inclut tous les thèmes pris en charge.

OpenDesign fournit un espace de travail de conception local pour les agents de code. Cette fiche ne signifie pas que le skill est inclus, ni que ses outils externes, identifiants et dépendances logicielles sont fournis.

Télécharger OpenDesign Lire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision figée de la source liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source: Owl-Listener
Dépôt: Owl-Listener/designer-skills
Fichier du skill: design-systems/skills/theming-system/SKILL.md
Licence: MIT
Version examinée: 2026-10-07 · 9a6930cf84a8

Résumé éditorial de la source

Une architecture de thématisation par couches pour des composants partagés entre marques, modes de couleur et variantes de densité.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'usage du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

À quel niveau les thèmes doivent-ils surcharger les tokens ?

La source place les principales surcharges dans la couche sémantique, entre les valeurs brutes et les tokens propres aux composants.

La densité peut-elle être un thème ?

Oui. La source inclut les densités confortable, compacte et aérée, aux côtés des modes de couleur et de marque.

Impose-t-il un outil d'implémentation particulier ?

Il cite les propriétés personnalisées CSS, les fichiers de tokens, les modes de variables Figma et le changement à l'exécution, sans imposer une pile technique unique.

OpenDesign

Faites de la place pour la prochaine itération de design.

Gardez votre brief, vos sources et votre travail de conception réunis dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Télécharger OpenDesign Parcourir les skills de design