Themes

This guide covers the theme system in your MkSaaS website and how to customize your own themes.

Customizing Themes

For theme customization, you can directly modify the base theme variables, or use theme generators to create custom themes.

The base theme variables are defined in the :root selector in src/styles/globals.css. You can modify them to change the default appearance across all themes:

:root {
  --radius: 0.5rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  /* Modify other variables as needed */
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  /* Modify dark mode variables as needed */
}

Theme Generators

You can use the following theme generators to create your own custom themes, and then copy the CSS variables to your globals.css file or use shadcn cli to add and change your globals.css file:

pnpm dlx shadcn@latest add https://tweakcn.com/r/themes/twitter.json

• shadcn/ui Theme Generator
• tweakcn Theme Generator
• ui.pub Theme Generator

Video tutorial:

This screenshot shows the default theme is now the custom theme.

FAQ

Theme Switching

As of November 17, 2025, the theme switching feature has been removed from the template.

If you need the theme switching feature, you can refer to this Pull Request to restore it.

Please refer to the documentation for more details: How to Add a Theme Selector to Your Next.js App

Best Practices

• Color Contrast: Ensure that text colors have sufficient contrast with background colors for accessibility
• Test Both Modes: If you enable light and dark modes, make sure to test new themes in both modes
• Limit Theme Options: Offer a small selection of well-designed themes rather than many similar options
• Theme Consistency: Maintain consistent styling across different themes to avoid UI anomalies

Video Tutorial

Next Steps

Now that you understand how to work with themes in MkSaaS, explore these related topics: