Color Theme

Introduction to Color Themes

ZapStart allows you to easily switch between different color themes using CSS variables. By default, the primary theme is set to orange, but you can choose from a variety of predefined color themes or create your own. Changing this one variable will update the color scheme of your entire application. All components and styles in ZapStart are designed to work seamlessly with the color themes, ensuring a consistent look and feel across your project.

Available Color Themes

ZapStart includes several built-in color themes. Each theme consists of a primary color, a secondary color, and additional hover and background styles. The available themes are:

  • Orange (default)
  • Green
  • Red
  • Yellow
  • Purple
  • Teal
  • Pink
  • Indigo
  • Cyan
  • Lime

How to Apply a Theme

To apply a different color theme, simply add the appropriate theme class to the root element of your page. For example, to apply the green theme, you would wrap your layout in a body with the class theme-green.

layout.tsx
...
<body className="theme-green">
  <Providers>
    {isDocsPage ? (
      <DocsLayout>{children}</DocsLayout>
    ) : (
      <Layout>{children}</Layout>
    )}
  </Providers>
</body>

Customizing Themes

You can customize any theme by modifying the CSS variables defined for each color. Below is an example of the CSS for the default orange theme:

global.css
.theme-orange {
  --primary-color: #f97316; /* Orange theme color */
  --primary-color-rgb: 249, 115, 22; /* RGB values of the orange theme color */
  --secondary-color: #9a3412; /* Darker orange color */
}

Conclusion

Using predefined color themes in ZapStart is a quick way to change the look and feel of your application. You can also easily customize themes by editing the CSS variables for each theme. Experiment with different themes to create a unique visual identity for your project!