Dark Mode Designpar Owl-Listener

Dark Mode Design Skill.

Traduisez la hiérarchie de l’interface en surfaces sombres au lieu d’en inverser les couleurs.

Design des couleurs
Conseils de design

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

Revue de la source · Dark Mode DesignSKILL.md

Tâche UX Produit • Une hiérarchie de surfaces sombres et d’élévation • Des couleurs de texte, de bordure, d’action et d’état mises en correspondance • Des indications sur le comportement du thème et l’adaptation des médias Avant de commencer Partez d’une palette existante en mode clair, d’exemples de composants et de ressources médias. Utilisez une interface rendue pour vérifier le contraste en mode sombre, le changement de thème et le traitement des images.

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

01 Fonctionnement

Dark Mode Design : adapter une palette existante

Adaptation de palette sombre avec élévation, contraste, traitement des médias et comportement de sélection du thème.

Flux de travail fondé sur la sourcePas un test de performance d’exécution

La méthode de travail

Dark Mode Design part d’une palette claire existante. Il utilise des surfaces sombres progressivement plus claires pour exprimer l’élévation et ajuste les couleurs vives, le texte, les bordures et les états pour le nouveau fond.

La source couvre aussi les images, illustrations, logos, préférences de schéma de couleurs du système et un sélecteur manuel. Ses exemples de couleurs chiffrés sont des repères, pas des valeurs universelles. Le design doit être vérifié sur de vrais composants et dans les conditions où les utilisateurs le verront.

Livrables attendus

Une hiérarchie de surfaces sombres et d’élévation
Des couleurs de texte, de bordure, d’action et d’état mises en correspondance
Des indications sur le comportement du thème et l’adaptation des médias

Voir le brief d’exemple

Du brief à la revue

01
Lire les rôles du mode clair
Identifiez les couleurs sémantiques et les hiérarchies de composants existantes.
02
Redéfinir les surfaces
Utilisez des paliers de luminance délibérés et des accents ajustés plutôt qu’une inversion directe.
03
Examiner toute l’interface
Vérifiez le contraste des composants, les logos, les images, les préférences automatiques et un choix de thème manuel.

02 Cas d’usage

Quand l’utiliser

Partez d’une palette existante en mode clair, d’exemples de composants et de ressources médias. Utilisez une interface rendue pour vérifier le contraste en mode sombre, le changement de thème et le traitement des images.

Un bon choix

Un produit clair existantÀ utiliser lorsque le système de couleurs de base est déjà défini.
Écrans sombres inégauxRésolvez les cartes, superpositions et médias qui se disputent l’attention en mode sombre.

Limites à vérifier

Pas une création de paletteLa création de la palette d’origine du produit relève de la tâche color-system.
Les exemples demandent des mesuresLes couleurs suggérées et les plages de désaturation ne suffisent pas à établir l’accessibilité.

Apportez ces éléments

Palette actuelleFournissez les rôles sémantiques du mode clair.
Inventaire des composantsMontrez les surfaces élevées, les états et les superpositions.
Médias et préférencesIdentifiez les images de marque et le comportement attendu de sélection du thème.

03 Décisions importantes

Décisions importantes

Élévation sans ombres lourdes
La luminance des surfaces peut exprimer les couches là où les ombres sombres deviennent inefficaces.
Les médias font partie du thème
Une image lumineuse ou un logo inadapté peuvent nuire à une interface sombre par ailleurs cohérente.

04 Exemple de brief

Essayer un brief ciblé

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

Vérifier la configuration

Chargez le SKILL.md de cette tâche depuis le dépôt designer-skills dans l’emplacement de skills pris en charge par votre agent. Le fichier d’entrée n’établit aucune commande d’installation universelle.

Fichier source en amont

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/dark-mode-design/SKILL.md

Commencer par un seul livrable

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

Brief d’exemple

Utilisez dark-mode-design pour adapter ce tableau de bord clair existant. Faites correspondre sémantiquement surfaces et texte, examinez les couleurs d’avertissement et les images des graphiques, puis définissez la préférence système et la sélection manuelle. Mesurez les vraies paires de contraste et signalez les ressources nécessitant des variantes sombres.

Examiner le résultat

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

Les niveaux de surface restent distinguables.
Le contraste du texte et des états est vérifié.
Les images, logos et commandes de thème sont examinés.

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

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 de source figée 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: ui-design/skills/dark-mode-design/SKILL.md
Licence: MIT
Instantané examiné: 2026-10-07 · 9a6930cf84a8

Résumé éditorial de la source

Adaptation de palette sombre avec élévation, contraste, traitement des médias et comportement de sélection du thème.

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

06 Questions avant de commencer

Questions avant de commencer

Puis-je simplement inverser la palette ?

La source recommande explicitement de repenser les relations entre surfaces plutôt que d’inverser.

Crée-t-il la palette de marque d’origine ?

Non. Il suppose qu’une palette de base est à adapter.

Le mode automatique doit-il remplacer un sélecteur ?

La source recommande de respecter la préférence du système tout en offrant aussi un choix manuel.

OpenDesign

Faites place à la prochaine itération de design.

Gardez votre brief, vos sources et votre travail de design ensemble 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