A single Lovable chat prompt will add a CSS-variable based theming system, a React ThemeProvider that persists the user choice, a simple ThemeSwitcher UI, and the App wiring so themes work in Preview and Publish. Paste the prompts below (one at a time) into your Lovable chat to make the edits; then use Preview to test and Publish when you’re satisfied.

Create base theme CSS

Prompt for Lovable: Create a new file at src/styles/themes.css containing CSS variables for a default theme and a dark theme. Include comments that show where to add additional theme classes.

// Create src/styles/themes.css
:root {
  /* // default (light) theme tokens */
  --bg: #ffffff;
  --text: #1f2937;
  --primary: #2563eb;
  --muted: #6b7280;
  --surface: #f9fafb;
}

.theme-dark {
  /* // dark theme overrides */
  --bg: #0f172a;
  --text: #e6eef8;
  --primary: #60a5fa;
  --muted: #94a3b8;
  --surface: #071020;
}

/* // Utility to apply variables globally */
html, body, #root {
  height: 100%;
  background: var(--bg);
  color: var(--text);
}

Create a ThemeContext provider

Prompt for Lovable: Add a React context at src/contexts/ThemeContext.tsx that provides current theme, toggleTheme, and persists selection in localStorage.

// Create src/contexts/ThemeContext.tsx
import React, { createContext, useContext, useEffect, useState } from 'react';

// // Supported theme keys should match CSS classes in themes.css
type ThemeKey = 'default' | 'dark';

type ThemeContextType = {
  theme: ThemeKey;
  setTheme: (t: ThemeKey) => void;
  toggleTheme: () => void;
};

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [theme, setThemeState] = useState<ThemeKey>(() => {
    // // hydration-safe default
    try {
      const stored = localStorage.getItem('theme');
      return (stored as ThemeKey) || 'default';
    } catch {
      return 'default';
    }
  });

  useEffect(() => {
    // // apply class on documentElement
    const root = document.documentElement;
    // // remove previous / set new
    root.classList.remove('theme-dark');
    if (theme === 'dark') root.classList.add('theme-dark');
    try {
      localStorage.setItem('theme', theme);
    } catch {}
  }, [theme]);

  const setTheme = (t: ThemeKey) => setThemeState(t);
  const toggleTheme = () => setThemeState((s) => (s === 'dark' ? 'default' : 'dark'));

  return <ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>{children}</ThemeContext.Provider>;
};

export const useTheme = () => {
  const ctx = useContext(ThemeContext);
  if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
  return ctx;
};

Add a ThemeSwitcher component

Prompt for Lovable: Create src/components/ThemeSwitcher.tsx that displays current theme and a button to toggle. Use the useTheme hook.

// Create src/components/ThemeSwitcher.tsx
import React from 'react';
import { useTheme } from '../contexts/ThemeContext';

export const ThemeSwitcher: React.FC = () => {
  const { theme, toggleTheme } = useTheme();
  return (
    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
      <span aria-hidden>Theme:</span>
      <button onClick={toggleTheme} style={{ padding: '6px 10px', cursor: 'pointer' }}>
        {theme === 'dark' ? 'Dark' : 'Light'}
      </button>
    </div>
  );
};

Wire provider and import CSS in the app entry

Prompt for Lovable: Update the app entry file to import src/styles/themes.css and wrap the app with ThemeProvider. Modify src/main.tsx or src/index.tsx depending on your project: add the import and wrap <App /> with <ThemeProvider>.

// Edit src/main.tsx (or src/index.tsx)
// Add at top:
import './styles/themes.css';
import { ThemeProvider } from './contexts/ThemeContext';

// Wrap the root render:
root.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

Place ThemeSwitcher in the UI

Prompt for Lovable: Edit src/App.tsx (or a header component) to render <ThemeSwitcher /> so testers can change themes in Preview.

// Edit src/App.tsx
import { ThemeSwitcher } from './components/ThemeSwitcher';

function App() {
  return (
    <div style={{ padding: 20 }}>
      <header style={{ marginBottom: 20 }}>
        <ThemeSwitcher />
      </header>
      {/* // rest of app */}
    </div>
  );
}
export default App;

Test and publish in Lovable

Next steps in Lovable

• Use Preview to interactively test the ThemeSwitcher and verify the CSS variables toggle the look.
• Publish when satisfied so the theme files are live.
• If you need additional build-time changes (PostCSS/Tailwind token mapping), export to GitHub from Lovable and make those edits outside Lovable (terminal required) — label that as outside Lovable when you ask for those steps.

Best Practices for Theming and Styling in Lovable Projects

Use a token-driven approach (central CSS variables or a small design-tokens module), keep tokens separate from component styles, implement theme switching by toggling a root class (or CSS media query), persist user preference in localStorage, test changes with Lovable Preview, and use GitHub sync only when you must add packages or run commands outside Lovable.

Quick actionable guidance:

• Centralize tokens: put colors/spacing/typography in one file (CSS variables or a tokens.ts).
• Make themes semantic: components use semantic variables like --bg, --text, --accent rather than raw colors.
• Support prefers-color-scheme and a manual toggle that persists to localStorage.
• Test in Lovable Preview before Publish, and use GitHub sync only if you must add third-party styling libraries (outside Lovable terminal).

Lovable prompts to implement these best practices

Paste each of these prompts into Lovable’s chat (one at a time). They instruct Lovable to create/update files and wire a simple theme system.

Please create src/styles/tokens.css with these contents.
// Root semantic tokens for light + dark; used by components via var(...)
:root {
  --bg: #ffffff;
  --text: #0f172a;
  --muted: #6b7280;
  --accent: #2563eb;
  --radius: 8px;
}

[data-theme="dark"] {
  --bg: #0b1220;
  --text: #e6eef8;
  --muted: #9aa8bf;
  --accent: #60a5fa;
  --radius: 8px;
}

Please create src/styles/global.css and import tokens.css, apply variables globally.
// Global styles that use tokens
@import './tokens.css';

html, body, #root {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Please update src/App.tsx to initialize theme from localStorage, respect prefers-color-scheme, and add a small toggle button in the header.
// Add or replace code inside src/App.tsx to import theme utils and global.css
import React, {useEffect, useState} from 'react';
import './styles/global.css';
import {initTheme, setTheme} from './utils/theme';

export default function App() {
  const [theme, setThemeState] = useState(initTheme());

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);

  return (
    <div>
      <header style={{padding:16, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
        <h1>My App</h1>
        <div>
          <button onClick={() => { const next = theme === 'dark' ? 'light' : 'dark'; setTheme(next); setThemeState(next); }}>
            Toggle Theme
          </button>
        </div>
      </header>
      <main style={{padding:16}}>
        {/* App content */}
      </main>
    </div>
  );
}

Please create src/utils/theme.ts to handle initTheme, setTheme, and persistence.
// Minimal theme manager using localStorage and prefers-color-scheme
export function initTheme() {
  try {
    const stored = localStorage.getItem('theme');
    if (stored === 'light' || stored === 'dark') return stored;
  } catch (e) {
    // ignore
  }
  // follow OS preference
  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}

export function setTheme(name) {
  try {
    localStorage.setItem('theme', name);
  } catch (e) {
    // ignore
  }
  document.documentElement.setAttribute('data-theme', name);
}

Please update one example component: create src/components/Button.module.css and src/components/Button.tsx to use semantic tokens.
// Button.module.css
.button {
  background: var(--accent);
  color: white;
  padding: 8px 12px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
}
// Button.tsx
import React from 'react';
import styles from './Button.module.css';

export default function Button(props) {
  return <button className={styles.button} {...props} />;
}

```

Notes & practical tips:

• Preview frequently: use Lovable Preview to test token changes and theme toggles on different pages.
• Accessibility: verify color contrast after edits (tools in your browser). Prefer semantic tokens so you can tune contrast globally.
• When adding styling libraries (Tailwind, styled-components): this requires package installs — do that via GitHub sync/export and run the install/build outside Lovable (terminal required). Then import in Lovable and use Preview.
• Secrets UI: theming rarely needs secrets. If you store theme flags per user server-side, use Lovable Secrets for API keys and store user preferences in your backend (not in Secrets).