Skip to main content

​
Export Modal

Click the Download button in the toolbar to open the export modal. The modal provides extensive customization options for exporting your theme.

​
Export Formats

Theme Gen supports exporting to five different formats, each optimized for specific use cases:
Standard CSS custom properties that work with any framework.Use Case: Vanilla CSS, any framework, or as a foundation for other formatsLight Mode Only:
:root {
  --color-text: #2d2d2d;
  --color-background: #fcfcfc;
  --color-primary: #3b82f6;
  --color-container: #f0f0f0;
  --color-accent: #8b5cf6;
  --color-success: #10b981;
  --color-error: #ef4444;
  --color-warning: #f59e0b;
  --color-onPrimary: #ffffff;
  --color-onContainer: #1a1a1a;
  --color-onAccent: #ffffff;
  --color-onSuccess: #ffffff;
  --color-onError: #ffffff;
  --color-onWarning: #1a1a1a;
  --color-border: #d4d4d4;
  --color-muted: #737373;
  --color-ring: #3b82f6;
}
Both Modes:
:root {
  --color-text: #2d2d2d;
  --color-background: #fcfcfc;
  /* ... light mode colors ... */
}

.dark {
  --color-text: #ededed;
  --color-background: #1a1a1a;
  /* ... dark mode colors ... */
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #ededed;
    --color-background: #1a1a1a;
    /* ... dark mode colors ... */
  }
}
The “both” option includes a .dark class selector and a media query for automatic system theme detection.

​
Color Formats

Choose how colors are represented in your exported code:
Hexadecimal color codes - The most common format
--color-primary: #3b82f6;
  • ✓ Universal browser support
  • ✓ Compact representation
  • ✓ Easy to copy/paste
  • ✗ Not human-readable
  • ✗ Can’t adjust individual channels in CSS

​
Mode Options

Control which theme modes to include in your export:
1

Light Mode Only

Exports only the light theme colors. Use this when:
  • Your application doesn’t support dark mode
  • You’re exporting a specific light theme variant
  • Building a design system with separate files per mode
2

Dark Mode Only

Exports only the dark theme colors. Use this when:
  • Your application only uses dark mode
  • You’re exporting a specific dark theme variant
  • Building a design system with separate files per mode
3

Both Modes

Exports both light and dark themes. The format depends on your export format:
  • CSS Variables: Includes .dark class and media query
  • Tailwind v3: Config + CSS variables for both modes
  • Tailwind v4: @variant dark with nested @theme
  • SCSS: Separate variable prefixes ($light-* and $dark-*)
  • SwiftUI: Struct with .light and .dark static properties
  • React Native: Separate lightColors and darkColors exports
The “both” option is recommended for most projects. It ensures your theme works in both light and dark modes with proper system integration.

​
Copying to Clipboard

Click the Copy button in the top-right corner of the code preview to copy the generated code to your clipboard. The button shows a checkmark for 2 seconds to confirm the copy succeeded. 
// From ExportModal.tsx
const copyToClipboard = async () => {
  try {
    await navigator.clipboard.writeText(generateExportCode());
    dispatch({ type: 'SET_COPIED', payload: true });
    setTimeout(() => dispatch({ type: 'SET_COPIED', payload: false }), 2000);
  } catch (err) {
    console.error("Failed to copy: ", err);
  }
};

​
Usage Examples

  1. Export as CSS Variables in Both Modes
  2. Create app/globals.css:
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Paste light mode variables */
}

.dark {
  /* Paste dark mode variables */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Paste dark mode variables again */
  }
}
  1. Use in components:
<div className="bg-[var(--color-background)] text-[var(--color-text)]">
  <button className="bg-[var(--color-primary)] text-[var(--color-onPrimary)]">
    Click me
  </button>
</div>
  1. Export as Tailwind (v3) in Both Modes
  2. Paste the config into tailwind.config.js
  3. Add the CSS variables to your global stylesheet
  4. Use Tailwind classes:
<div className="bg-background text-text">
  <button className="bg-primary text-onPrimary">
    Click me
  </button>
  <div className="bg-container text-text border border-border">
    Card content
  </div>
</div>
  1. For dark mode, add the dark: prefix:
<button className="bg-primary dark:bg-primary hover:opacity-90">
  Hover me
</button>
  1. Export as React Native in Both Modes with RGB format
  2. Create theme.ts and paste the exported code
  3. Create a theme hook:
import { useColorScheme } from 'react-native';
import { lightColors, darkColors } from './theme';

export function useTheme() {
  const colorScheme = useColorScheme();
  return colorScheme === 'dark' ? darkColors : lightColors;
}
  1. Use in components:
import { useTheme } from './hooks/useTheme';

function MyScreen() {
  const colors = useTheme();
  
  return (
    <View style={{ backgroundColor: colors.background }}>
      <Text style={{ color: colors.text }}>Hello!</Text>
      <TouchableOpacity
        style={{ backgroundColor: colors.primary }}
      >
        <Text style={{ color: colors.onPrimary }}>Press me</Text>
      </TouchableOpacity>
    </View>
  );
}
  1. Export as SwiftUI in Both Modes with HEX format
  2. Create Theme.swift and paste the exported code
  3. Use in views:
import SwiftUI

struct ContentView: View {
    @Environment(\.colorScheme) var colorScheme
    
    var colors: AppColors {
        colorScheme == .dark ? .dark : .light
    }
    
    var body: some View {
        VStack(spacing: 16) {
            Text("Welcome")
                .foregroundColor(colors.text)
            
            Button(action: { }) {
                Text("Click me")
                    .foregroundColor(colors.onPrimary)
                    .padding()
                    .background(colors.primary)
                    .cornerRadius(8)
            }
        }
        .padding()
        .background(colors.background)
    }
}

​
Tips

Export both modes even if you only support oneThis future-proofs your theme. If you decide to add dark mode later, you’ll already have a well-matched palette.
Choose the right color format for your stack:
  • Web projects: OKLCH (modern) or HSL (universal)
  • CSS-in-JS: RGB or HEX
  • React Native: RGB (OKLCH not supported)
  • Sass/Less: HEX or RGB
  • Design tools: HEX
Store your exported theme in version control:
src/
  styles/
    theme.css          # Exported CSS variables
    colors.scss        # Exported SCSS
  config/
    tailwind.config.js # Exported Tailwind config
Commit theme changes with clear messages:
git commit -m "feat: update theme colors for better contrast"
Consider storing the Theme Gen URL in your README so team members can modify the theme:
## Theme

Edit theme: https://themegen.com/?colors=2d2d2d-fcfcfc-3b82f6-f0f0f0-8b5cf6&mode=light

​
Next Steps

Sharing Themes

Learn how to share and save your themes

Creating Themes

Learn the theme creation workflow

API Reference

Integrate Theme Gen into your build process

Build docs developers (and LLMs) love

Get started for freeTalk to us