How to Customize Themes, Colors, and UI Styles in Lovable Projects

Why theming in Lovable requires understanding CSS variables and shadcn/ui

Lovable generates projects using shadcn/ui, a component library built on Radix UI primitives and styled with Tailwind CSS. The theming system works through CSS custom properties (variables) defined in your globals.css file. When you change a theme variable, every component that references it updates automatically. The Design view → Themes tab provides a visual interface for editing these variables. You can change primary colors, background colors, fonts, spacing, and border radius — all without writing code. These changes cost no credits and take effect immediately in the preview. However, the visual Themes tab covers common settings. For advanced customization — like creating a complete dark mode toggle, adding custom color palettes beyond the defaults, or overriding specific component styles — you need to edit the CSS variables directly in globals.css or update the Tailwind configuration. Understanding this two-layer system (visual Themes tab for common changes, CSS variables for everything else) is key to getting the exact look you want.

• Theme changes in Design view not reflected — browser cache showing old styles
• Custom CSS overridden by shadcn/ui default styles — CSS specificity conflict
• Dark mode not toggling — the dark class not applied to the HTML root element
• Tailwind classes not matching theme colors — custom color names not registered in tailwind.config.ts
• Font changes not applying — custom font not loaded before the page renders

Error messages you might see

Before you start

• A Lovable project open in the editor
• Familiarity with the Design view (click + next to Preview → Design view)
• Your desired color palette (hex codes or HSL values)
• If adding custom fonts: the font files uploaded to /public/fonts or a Google Fonts URL

How to fix it

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
}

:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --primary: 262 83% 58%;  /* Custom purple primary */
  --primary-foreground: 0 0% 100%;
  --secondary: 240 5% 96%;
  --accent: 262 83% 90%;   /* Lighter purple for accents */
  --ring: 262 83% 58%;     /* Focus rings match primary */
}
.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --primary: 262 83% 68%;  /* Slightly lighter purple for dark mode */
  --primary-foreground: 0 0% 100%;
  --secondary: 240 4% 16%;
  --accent: 262 83% 20%;
  --ring: 262 83% 68%;
}

// No dark mode support
function App() {
  return <div className="min-h-screen">...</div>;
}

// Dark mode toggle with localStorage persistence
import { useState, useEffect } from 'react';
import { Moon, Sun } from 'lucide-react';
import { Button } from '@/components/ui/button';
function ThemeToggle() {
  const [isDark, setIsDark] = useState(() => {
    const saved = localStorage.getItem('theme');
    return saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches);
  });
  useEffect(() => {
    document.documentElement.classList.toggle('dark', isDark);
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
  }, [isDark]);
  return (
    <Button variant="ghost" size="icon" onClick={() => setIsDark(!isDark)}>
      {isDark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
    </Button>
  );
}

// Default tailwind.config.ts — no custom colors
export default {
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {},
  },
};

// Extended with custom brand colors referencing CSS variables
export default {
  darkMode: 'class',
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
          light: 'hsl(var(--accent))',
        },
      },
    },
  },
};

Complete code example

1import { useState, useEffect } from 'react';
2import { Moon, Sun } from 'lucide-react';
3import { Button } from '@/components/ui/button';
4
5/**
6 * Theme toggle component for light/dark mode.
7 * Persists preference in localStorage.
8 * Falls back to system preference on first visit.
9 *
10 * Usage: <ThemeToggle /> — place in your header/nav.
11 * Requires .dark CSS variables defined in globals.css.
12 */
13export function ThemeToggle() {
14  const [isDark, setIsDark] = useState(() => {
15    if (typeof window === 'undefined') return false;
16    const saved = localStorage.getItem('theme');
17    if (saved) return saved === 'dark';
18    // Respect system preference as default
19    return window.matchMedia('(prefers-color-scheme: dark)').matches;
20  });
21
22  useEffect(() => {
23    const root = document.documentElement;
24    if (isDark) {
25      root.classList.add('dark');
26    } else {
27      root.classList.remove('dark');
28    }
29    localStorage.setItem('theme', isDark ? 'dark' : 'light');
30  }, [isDark]);
31
32  return (
33    <Button
34      variant="ghost"
35      size="icon"
36      onClick={() => setIsDark((prev) => !prev)}
37      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
38    >
39      {isDark ? (
40        <Sun className="h-5 w-5 transition-transform" />
41      ) : (
42        <Moon className="h-5 w-5 transition-transform" />
43      )}
44    </Button>
45  );
46}

Best practices to prevent this

• Start with the Design view → Themes tab for color, font, and spacing changes — it is the fastest method and costs no credits
• Use HSL values for CSS variables — they make it easy to create lighter and darker variants of the same hue
• Always define both :root (light) and .dark (dark) variables in globals.css so dark mode works out of the box
• Reference CSS variables in Tailwind config (hsl(var(--primary))) to keep Tailwind classes in sync with your theme
• Persist the user's dark mode preference in localStorage and respect prefers-color-scheme as the initial default
• Test theme changes across all major components (buttons, forms, cards, navigation) — not just the homepage
• Use the Visual Edits tab (Design view) for one-off style overrides on specific elements without writing CSS

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns