Themes

By using the Tailwind CSS plugin, or the pre-built stylesheet, your default border, text and background colors will be changed.

Light/Dark Modes

We supports light/dark modes with next-themes. The Theme Provider is a part of Root Layout.

src/app/layout.tsx

import { ThemeProvider } from "@/components/providers/theme-provider"
 
export default async function RootLayout({ children, params }: Props) {
    return (
        ...

        <ThemeProvider
            enableSystem
            attribute="class"
            defaultTheme="system"
            disableTransitionOnChange
        >
            {children}
        </ThemeProvider>
        ...
    )
}

We use a CSS variables for customize a theme color. The background variable is used for the background color of the component and the foreground variable is used for the text color. see official documentation

Themes

Light/Dark Modes

CSS Variables

On this page