Add a new theme

Theming with ZippyStarter is a piece of cake, simply choose a theme, then copy and paste.

Theme configuration

Themes are configured with CSS custom properties, this means you will have a lot of control over the styling, and can apply your own look and feel quite easily.

Either grab one of the shadcn/ui themes, use my handy shadcn ui theme generator, or hand-craft 🎨 your own theme from scratch.

Adding a shadcn/ui theme

If you like the look-and-feel of shadcn/ui's themes, you'll be pleased to know that they are compatible with ZippyStarter, and all of them can be found in the file: public/themes.css. Once located, you'll be able to use them with ZippyStarter.

Before changing themes, you can preview and switch between all of them by using the theme customizer.

Each theme comes with a dark and light mode, and once you've made your mind up, you can change the default themes by following these steps (they apply to any theme regardless of name):

Step 1

In one window open up: public/themes.css and in the other open up: @src/app/globals.css

Step 2: Light mode

In public/themes.css you'll see themes in the following format:

.theme-zinc {}
.dark .theme-zinc {}

Copy everything between the curly braces from the theme you want, e.g. .theme-zinc {} and paste them between the :root {} curly braces in @src/app/globals.css — this is light-mode.

Step 3: Dark mode

Copy everything between the curly braces .dark .theme-zinc {} and past them between the .dark {} curly braces in @src/app/globals.css — this is dark-mode.