BuildFlow

Theme Generator

The Theme Generator is a powerful tool that allows you to create and customize Shadcn-compatible themes for both light and dark modes. Easily adjust colors and see real-time previews of your changes.

How to Use the Theme Generator

Follow these steps to create your custom theme:

  1. Choose between light and dark mode using the toggle switch.
  2. Use the color pickers to adjust individual color variables.
  3. Preview your changes in real-time on the component display.
  4. Switch between light and dark modes to ensure both look good.
  5. When satisfied, export your custom CSS variables.

Features

  • Full compatibility with Shadcn UI components.
  • Real-time preview of color changes.
  • Separate customization for light and dark modes.
  • Export functionality for easy integration into your project.
  • Wide range of customizable color variables.

Customizable Color Variables

You can customize the following color variables for both light and dark modes:

  • Background
  • Foreground
  • Card background and foreground
  • Popover background and foreground
  • Primary and secondary colors
  • Muted colors
  • Accent colors
  • Destructive colors
  • Border and input colors
  • Ring color
  • Radius
  • Chart colors (1-5)

Exporting Your Theme

Once you are happy with your custom theme:

  1. Click the Export CSS Variables button.
  2. Copy the generated CSS code.
  3. Paste the code into your projects global CSS file.
  4. Your custom theme will now be applied to all Shadcn UI components.

Tips for Creating Great Themes

  • Ensure sufficient contrast between background and text colors for readability.
  • Test your theme with various components to ensure consistency.
  • Consider accessibility guidelines when choosing colors.
  • Use the chart colors to create visually appealing and distinct data visualizations.
  • Experiment with different color combinations to find a unique style for your project.

With the Theme Generator, you have the power to create unique, beautiful, and consistent themes for your web applications. Start customizing your Shadcn UI components today!