Complete Guide to Customizing Themes in Sushify Next.js - 19 Pre-built Color Themes

Introduction

One of the most powerful features of Sushify Next.js is its flexible theming system. With 19 pre-built color themes ranging from minimalist designs to bold cyberpunk aesthetics, you can instantly transform your application's look and feel with a single line of code. In this comprehensive guide, you'll learn everything about customizing themes, switching between color schemes, and creating your own custom themes.

Why Theme Customization Matters for Your SaaS

Theme customization is essential for modern SaaS applications:

• Brand Identity - Align your application's appearance with your brand colors and personality
• User Experience - Offer light and dark modes to reduce eye strain and improve accessibility
• Differentiation - Stand out from competitors with unique visual designs
• Flexibility - Adapt your UI for different markets, seasons, or special promotions
• Performance - CSS variable-based themes load instantly without JavaScript overhead

Sushify's Theming Architecture

Sushify Next.js uses a modern theming approach combining:

• Tailwind CSS - Utility-first CSS framework for rapid styling
• shadcn/ui - Re-usable component library with built-in theme support
• Radix UI - Accessible, unstyled component primitives
• CSS Variables - Dynamic theme switching without page reloads

This architecture provides both flexibility and performance, making theme customization effortless.

Quick Start: Switching Themes

The fastest way to customize your Sushify application is switching to one of the 19 pre-built themes.

Step 1: Locate Your Global CSS File

Navigate to your global CSS file located at:

apps/web/app/globals.css

Step 2: Change the Theme Import

Find the theme import line in your globals.css:

@import "@repo/tailwind-config/color-kits/memphis-style.css";

Replace memphis-style.css with any theme name from the table below.

Step 3: Save and Reload

Save the file and reload your application. The new theme applies instantly across all pages and components.

19 Pre-built Color Themes

Sushify Next.js comes with 19 stunning pre-built themes.

💡 Tip: Visit the Themes Gallery to see interactive demos of all available color themes.

Example Usage

@tailwind base;
@tailwind components;
@tailwind utilities;
@import "@repo/tailwind-config/color-kits/cyberpunk.css";

/* Your custom styles below */

All themes include automatic support for both light and dark modes.

Understanding Theme Structure

CSS Variables System

Sushify themes use CSS variables (custom properties) for maximum flexibility. Here's how it works:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    /* ... more variables */
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    /* ... dark mode overrides */
  }
}

HSL Color Format

Sushify uses HSL (Hue, Saturation, Lightness) color values:

• Hue (0-360): Color type (red, blue, green, etc.)
• Saturation (0-100%): Color intensity
• Lightness (0-100%): Brightness level

Example: 222.2 47.4% 11.2% represents a deep blue color.

Tailwind Integration

CSS variables map to Tailwind classes in tailwind.config.ts:

theme: {
  extend: {
    colors: {
      background: "hsl(var(--background))",
      foreground: "hsl(var(--foreground))",
      primary: {
        DEFAULT: "hsl(var(--primary))",
        foreground: "hsl(var(--primary-foreground))",
      },
      // ... more color tokens
    },
  },
}

This allows you to use semantic color names in your components:

<div className="bg-background text-foreground">
  <button className="bg-primary text-primary-foreground">
    Click me
  </button>
</div>

Creating Custom Themes

Want to create your own unique theme? Follow these steps:

Step 1: Create a New Theme File

Create a new CSS file in the color-kits directory:

touch packages/tailwind-config/color-kits/my-custom-theme.css

Step 2: Define Your Color Variables

@layer base {
  :root {
    /* Background colors */
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;

    /* Primary brand colors */
    --primary: 270 95% 65%;
    --primary-foreground: 0 0% 100%;

    /* Secondary colors */
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;

    /* Accent colors */
    --accent: 180 95% 50%;
    --accent-foreground: 0 0% 100%;

    /* UI elements */
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 270 95% 65%;

    /* Status colors */
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    /* Radius for rounded corners */
    --radius: 0.5rem;
  }

  .dark {
    /* Dark mode overrides */
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --primary: 270 95% 75%;
    --primary-foreground: 240 10% 3.9%;
    /* ... continue with dark mode values */
  }
}

Step 3: Import Your Custom Theme

Update your globals.css:

@import "@repo/tailwind-config/color-kits/my-custom-theme.css";

Step 4: Test Light and Dark Modes

Verify your theme works in both modes by toggling the theme switcher in your application.

Advanced Theme Customization

Adjusting Border Radius

Change the global border radius for all components:

:root {
  --radius: 0.5rem; /* Default */
  /* Try: 0rem (sharp), 1rem (very rounded) */
}

Custom Gradient Backgrounds

Add gradient backgrounds to your theme:

:root {
  --gradient-primary: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
}

Use in components:

<div className="bg-[var(--gradient-primary)]">
  Gradient background
</div>

Typography Customization

Customize font families in tailwind.config.ts:

theme: {
  extend: {
    fontFamily: {
      sans: ['Inter', 'system-ui', 'sans-serif'],
      mono: ['Fira Code', 'monospace'],
    },
  },
}

Configuring Dark Mode

Enabling Theme Toggle

Sushify includes built-in theme configuration in config/index.ts:

ui: {
  enabledThemes: ["light", "dark"], // Available themes
  defaultTheme: "light", // Default theme
}

Theme Toggle Options

Light Mode Only:

enabledThemes: ["light"],
defaultTheme: "light",

Dark Mode Only:

enabledThemes: ["dark"],
defaultTheme: "dark",

Both Modes (User Choice):

enabledThemes: ["light", "dark"],
defaultTheme: "light",

Dark Mode Implementation

Sushify uses class-based dark mode:

export default {
  darkMode: ["class"],
  // ... rest of config
}

The theme toggle component automatically adds/removes the dark class on the <html> element.

Troubleshooting Common Issues

Theme Not Updating

Problem: Changed the theme import but colors didn't update.

Solution:

1. Clear browser cache (Cmd+Shift+R or Ctrl+Shift+F5)
2. Restart development server: pnpm dev
3. Check for CSS syntax errors in terminal

Dark Mode Not Working

Problem: Dark mode toggle doesn't change colors.

Solution:

1. Verify darkMode: ["class"] in tailwind.config.ts
2. Ensure .dark selectors exist in your theme CSS
3. Check that dark mode is enabled in config/index.ts

Colors Look Wrong

Problem: Theme colors appear incorrect or washed out.

Solution:

1. Verify HSL values are in correct format: hue saturation% lightness%
2. Check that you're using hsl(var(--variable)) in Tailwind config
3. Ensure @layer base wrapper exists in theme CSS

Theme Gallery Not Showing

Problem: Can't access /themes page to preview themes.

Solution:

1. Verify route exists in your application
2. Check if marketing pages are enabled in config/index.ts:

ui: {
  marketing: {
    enabled: true,
  },
}

Real-World Theme Examples

E-commerce Application

Use soft, trustworthy colors:

@import "@repo/tailwind-config/color-kits/pastel.css";

Developer Tool

Use code-editor inspired themes:

@import "@repo/tailwind-config/color-kits/monokai.css";

Creative Portfolio

Use bold, modern aesthetics:

@import "@repo/tailwind-config/color-kits/neo-brutalism.css";

Wellness App

Use calm, natural colors:

@import "@repo/tailwind-config/color-kits/ocean-breath.css";

Performance Considerations

Why CSS Variables?

CSS variables provide instant theme switching without:

• JavaScript overhead
• Component re-renders
• Page reloads
• Flash of unstyled content (FOUC)

Production Build

Themes are optimized in production:

pnpm build

Tailwind automatically:

• Removes unused CSS
• Minifies stylesheets
• Optimizes CSS variables

Additional Resources

• Sushify Documentation
• Tailwind CSS Documentation
• shadcn/ui Themes
• Radix UI Colors

Need Help?

If you encounter any issues or have questions about theme customization:

• Check the Sushify GitHub Issues
• Read the Styling Documentation
• Reach out to the community

Transform your SaaS application with beautiful, performant themes using Sushify Next.js!