Maison > interface Web > js tutoriel > Générateur de thèmes Shadcn UI, avec couleurs OKLCH et géométrie sacrée ancienne.

Générateur de thèmes Shadcn UI, avec couleurs OKLCH et géométrie sacrée ancienne.

Susan Sarandon
Libérer: 2025-01-01 00:27:11
original
727 Les gens l'ont consulté

Shadcn UI Theme generator, with OKLCH colors and ancient sacred geometry.

Bonjour amis développeurs !
Après avoir créé le générateur de thème VSCode, je voulais donner à l'algorithme du générateur de couleurs d'autres applications, j'ai donc créé un générateur de thème pour l'interface utilisateur Shadcn. Vous pouvez désormais générer des thèmes de couleurs pour votre prochain projet avec Shadcn UI en utilisant d'anciens modèles de géométrie sacrée et des équations mathématiques modernes mélangées à la théorie des couleurs. J'améliorerai la section d'aperçu qui imite actuellement un tableau de bord, différents types de cartes et une simulation d'un simple réseau social.

Les couleurs sont générées à l'aide de l'espace de couleurs oklch et vous pouvez copier les variables de couleur générées pour les coller directement dans le fichier principal css de votre projet. Comme vous le savez peut-être, ces variables sont indépendantes du framework, donc peu importe si vous utilisez l'interface utilisateur Shadcn d'origine ou l'une de ses variantes (Svelte, Vue et autres), la configuration de ces variables de couleur fonctionnera dans n'importe laquelle d'entre elles.

Vous pouvez consulter le projet sur le générateur de thèmes Shadcn UI. Et, comme d'habitude, vous pouvez plonger dans le code du dépôt.

J'ai également étendu l'utilitaire permettant à l'algorithme de générer des thèmes pour le terminal Warp. Vous générez et randomisez jusqu'à ce que vous soyez satisfait du résultat, puis téléchargez le thème dans votre dossier .warp/themes. Après cela, il suffit de sélectionner le thème dans les paramètres du terminal -> apparence. Découvrez le générateur de thèmes Warp, le code est dans le même référentiel que la communauté des thèmes VSCode.

Maintenant, je me rapproche de mon rêve d'avoir un générateur de thème pour tout ce dont le thème peut être personnalisé. :)

J'apprécie vraiment votre lecture et tous vos commentaires ou suggestions.
À bientôt dans le prochain !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal