Multi Theme Setup With ShadCN?

Question

I want to implement multi-theme setup with shadcn and next-themes. Instead of just light & dark themes I would like to have red, blue, green, etc. Where each of them have their own light and dark variants.

I have been looking at the [next-themes multi-theme example repo](https://github.com/pacocoursey/next-themes/tree/main/examples/multi-theme), but I cannot get it to work with even the simplest example.

As far as I can see I have everything setup the same as in their example repo, and have tried messing with the ThemeProvider configuration, etc. It is worth noting that my tailwind.config.ts is setup as shadcn does it by default and I still use tailwindcss v3.

If you have any ideas, any help is appreciated 🙏

// layout.tsx
export default async function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html
      lang="en"
      suppressHydrationWarning
    >
      <body>
        <ThemeProvider
          defaultTheme="red"
          enableColorScheme
          themes={["default", "red"]}
          attribute={"class"}
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
  }
  
  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
  }

  html[data-theme="red"] {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
  }

  html[data-theme="red"] .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
  }
}

Multi Theme Setup With ShadCN?

0 Replies