Styles et thèmes
Couleurs, espacements et mode sombre grâce aux prompts.
Styles et thèmes est une leçon Vibe Coding gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vibe Coding, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vibe Coding comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
From 'Works' to 'Wow'
You can generate a working UI in seconds — but the difference between an amateur and a polished app is styling: color, spacing, typography, and a cohesive theme.
In this lesson you'll learn to control all of it by prompt, set up a reusable theme, and add a slick dark mode — without touching a color picker if you don't want to.
A Theme Is a Shared Recipe
A theme is a small set of design decisions — your colors, fonts, and spacing — defined once and reused everywhere. Change the theme, and the whole app updates.
Ask the AI to set up design tokens: named values like 'primary color' or 'spacing-large' that components reference instead of hard-coding.
"Set up a theme with design tokens: a primary color, a secondary
color, a neutral grey scale, a base font, and consistent spacing
steps (4, 8, 16, 24, 32px). Make all my components use these tokens
instead of hard-coded values."Choosing a Color Palette by Prompt
You don't need color theory. Describe a feeling and let the AI propose a palette, then tweak.
Ask for a primary (your brand), an accent (for highlights), and neutrals (backgrounds and text). Request the actual hex codes so you can lock them in.
"Suggest a color palette for a healthy-eating app: fresh, calm,
and trustworthy. Give me a primary, an accent, and 5 neutral greys,
as hex codes. Then apply them across all my components."Spacing: The Secret to 'Clean'
Most amateur UIs look cramped. The fix is consistent spacing and whitespace. Designers use a spacing scale (multiples of 4 or 8px) so gaps feel intentional.
If something feels 'off,' it's usually spacing. Just say "more breathing room" and the AI knows what to do.
"Increase the whitespace throughout the page. Use a consistent
8px spacing scale. Add more padding inside cards and more gap
between sections so it feels calm and uncluttered."Typography That Feels Designed
Type carries a huge amount of personality. Ask for a type scale (clear sizes for h1, h2, body, captions) and good line height for readability.
Pairing a distinctive heading font with a clean body font instantly elevates a design.
"Set up typography: use 'Inter' for body text and a slightly bolder
geometric font for headings. Define a clear scale (h1 48px, h2 32px,
h3 24px, body 16px) with comfortable line height. Apply it everywhere."Meet Tailwind (Lightly)
Most AI UI tools style with Tailwind CSS — utility classes like p-4 (padding) or text-lg (large text) written right in the markup.
You rarely write these by hand, but recognizing them helps you give precise feedback like "use a larger text size here."
<button class="px-4 py-2 rounded-lg bg-blue-600
text-white text-sm font-semibold hover:bg-blue-700">
Save
</button>Adding Dark Mode
Dark mode is expected in modern apps. The right way is to define light and dark versions of your theme tokens, then let a toggle switch between them.
Ask the AI to make colors theme-aware rather than hard-coded, so dark mode 'just works' everywhere.
"Add dark mode. Create a dark version of my color tokens: dark
backgrounds, light text, and slightly muted accents. Add a toggle
in the navbar that switches themes, and remember the user's choice."Simulating a Theme Toggle
Under the hood, switching themes is just choosing a different set of color values. Here's a tiny JavaScript model of that idea — run it to see how a toggle picks colors from a theme object.
const themes = {
light: { bg: '#ffffff', text: '#111111' },
dark: { bg: '#111111', text: '#f5f5f5' }
};
let current = 'light';
function toggle() {
current = current === 'light' ? 'dark' : 'light';
const t = themes[current];
console.log(current + ' -> bg ' + t.bg + ', text ' + t.text);
}
toggle();
toggle();Consistency Beats Cleverness
A beautiful app isn't one with the fanciest button — it's one where everything matches. Same corner radius, same shadow style, same accent color, same spacing rhythm.
When you spot inconsistency, prompt the AI to unify it across the whole app in one pass.
"Audit my app for visual inconsistencies. Make all corner radii,
shadows, button styles, and spacing consistent. Use my theme tokens
everywhere and remove any one-off hard-coded colors."Polish Details: Motion and States
Small touches signal quality: subtle hover effects, smooth transitions, and clear focus states for accessibility. Ask for gentle animation — never overdo it.
These finishing moves make a generated UI feel handcrafted.
"Add subtle polish: smooth 150ms transitions on hover, a gentle
lift on cards, and clear keyboard focus rings on buttons and inputs.
Keep animations tasteful and quick, not flashy."Practice: Restyle in Two Prompts
Take any UI you've generated and give it a whole new identity with just a palette swap and a font change. Watch how a theme-driven design transforms instantly. This is the power of styling by tokens instead of by hand.
Prompt 1: "Switch the theme to a warm sunset palette:
deep orange primary, soft pink accent, cream backgrounds."
Prompt 2: "Change headings to a bold rounded font and add
dark mode with a matching warm-dark variant."Quick Check
Why is setting up a theme with design tokens better than styling each component with hard-coded colors?
Recap: Beautiful by Prompt
You learned to control the look of an app with words: define a theme with design tokens, choose a palette by feeling, fix 'cramped' with consistent spacing, set a type scale, and add dark mode by making colors theme-aware.
Polish with subtle motion and, above all, chase consistency. Next lesson: making your beautiful design look great on phones and desktops alike — responsive design by prompt.
Questions Fréquemment Posées
La leçon « Styles et thèmes » est-elle gratuite ?
Oui — le texte complet de « Styles et thèmes » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vibe Coding, passe à CoddyKit PRO. Le cours Vibe Coding comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Styles et thèmes » ?
Couleurs, espacements et mode sombre grâce aux prompts. Tu pratiques Vibe Coding avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vibe Coding ?
Aucune expérience préalable n'est requise. Vibe Coding sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Styles et thèmes » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vibe Coding ?
Oui. Chaque leçon Vibe Coding inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.