How the customize the theme of your supastarter application

supastarter v2 has been designed to be fully customized in every aspect. In this guide we will show you how you can easily change the theme of supastarter to make it match your brands design.

1. Set color variables

In the /packages/config/tailwind/index.ts file you find the theme configuration of your application. The are config objects for both light and dark mode.

const lightVariables = {
  colors: {
    border: "#e2e8f0",
    input: "#e2e8f0",
    ring: "#5871bb",
    background: "#ffffff",
    foreground: "#020817",
    primary: "#5871bb",
    "primary-foreground": "#ffffff",
    secondary: "#f1f5f9",
    "secondary-foreground": "#0f172a",
    error: "#ef4444",
    "error-foreground": "#ffffff",
    success: "#39a561",
    "success-foreground": "#ffffff",
    muted: "#f8fafc",
    "muted-foreground": "#64748b",
    accent: "#f1f5f9",
    "accent-foreground": "#0f172a",
    popover: "#ffffff",
    "popover-foreground": "#020817",
    card: "#ffffff",
    "card-foreground": "#020817",
  },
};

Change these variables to adjust the colors of your application. Make sure to update the dark mode variables as well.

You might also want to change the border radius in the tailwind theme config below to make your UI components looks less/more rounded.

{
  // ...
  borderRadius: {
    lg: `0.75rem`,
    md: `calc(0.75rem - 2px)`,
    sm: "calc(0.75rem - 4px)",
  },
  // ...
}

2. Set typography

To change the typography, you need to import the new font first. You can do this in the /apps/web/app/[locale]/layout.tsx.

import { Oswald } from "next/font/google";
 
const sansFont = Oswald({
  variable: "--font-sans",
  subsets: ["latin"],
  display: "swap",
});
 
export default function RootLayout() {
  return (
    <html lang={locale}>
      <body className={`${sansFont.variable} bg-background font-sans`}>
        <NextIntlClientProvider locale={locale} messages={messages}>
          <ClientProviders>{children}</ClientProviders>
          <Toaster />
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

Learn more about how to use next/font in the offical Next.js documentation.

That's all you need to customize the default theme. Of course you can also customize every components style individually.

How the customize the theme of your supastarter application

1. Set color variables

2. Set typography

The ultimate starter kit to build a scalable and production-ready SaaS

Stay up to date