Créateur de Thèmes VS Code

Vous avez toujours voulu créer votre propre thème pour Visual Studio Code mais les fichiers JSON vous intimidaient ? Ce projet est fait pour vous !

VS Code theme Studio est une application web intuitive qui simplifie le processus de conception de thèmes de couleurs personnalisés pour VS Code. Elle fournit une interface conviviale avec des sélecteurs de couleurs interactifs et un aperçu en temps réel de votre création dans une simulation de l'éditeur. Oubliez l'édition manuelle de fichiers de configuration complexes ; avec cet outil, vous pouvez donner vie à votre palette de couleurs parfaite de manière visuelle et télécharger le fichier de thème prêt à l'emploi en quelques secondes.

Que vous soyez un développeur cherchant à personnaliser votre environnement de codage ou un designer souhaitant partager son esthétique, cet outil rend la création de thèmes accessible à tous.

Démonstration

(Une vidéo de démonstration sera ajoutée ici prochainement)

Fonctionnalités

• Aperçu en direct : Visualisez les modifications de votre thème en temps réel dans une maquette de l'éditeur VS Code.
• Sélecteurs de couleurs interactifs : Choisissez et modifiez facilement les couleurs des différents éléments de l'interface.
• Exportation JSON : Générez et téléchargez le fichier JSON complet du thème, prêt à être utilisé dans VS Code.

Stack Technique

• Framework : Next.js
• Langage : TypeScript
• Gestionnaire de paquets : Bun
• Style : Tailwind CSS
• Composants d'interface : shadcn/ui
• Tests E2E : Playwright

Pour Commencer

Suivez ces instructions pour obtenir une copie locale fonctionnelle.

Prérequis

Assurez-vous d'avoir Bun installé sur votre machine.

Installation

1. Clonez le dépôt :

   git clone https://github.com/derfoj_/vs-code-theme-studio.git

2. Naviguez vers le répertoire du projet :

   cd vs-code-theme-studio

3. Installez les dépendances :

   bun install

Lancer le serveur de développement

Pour démarrer le serveur de développement, exécutez :

bun dev

Ouvrez http://localhost:3000 avec votre navigateur pour voir le résultat.

Comment l'utiliser

1. Ouvrez l'application dans votre navigateur.
2. Utilisez les contrôles dans le panneau Éditeur de Thème pour ajuster les couleurs des divers composants de l'interface.
3. L'Aperçu VS Code se mettra à jour instantanément pour refléter vos modifications.
4. Lorsque vous êtes satisfait de votre thème, cliquez sur le bouton "Générer le Thème".
5. Un fichier theme.json sera téléchargé.
6. Pour utiliser votre nouveau thème dans VS Code :
   • Copiez le fichier JSON téléchargé dans votre dossier d'extensions VS Code (~/.vscode/extensions sur macOS/Linux, %USERPROFILE%\.vscode\extensions sur Windows) à l'intérieur d'un nouveau dossier représentant votre thème.
   • Suivez la documentation officielle de VS Code pour installer un thème à partir d'une extension locale.

Licence

Ce projet est sous licence MIT.