Colors

Theme Colors

How to change theme colors?

If you plan to set only one color (with no client change colors option). Follow a little step here

Import file:

Import ”@/config/css/{color}.css” to your Root layout: app/layout.tsx

import "./globals.css";
import "@/config/css/_default.css"; // <-- Import this line

Remove provider

Then remove the theme color provider: app/providers.tsx

import { ThemeColorProvider } from "@/providers/theme-color-provider"; // <-- Remove this line
 
export default function Providers({ 
	children
}: {
	children: React.ReactNode
}) {
	return (
		<ThemeProvider>
			<ThemeColorProvider> {/*<-- Remove this line */}
				<ThemeOptionsProvider>
					<SidebarProvider>{children}</SidebarProvider>
				</ThemeOptionsProvider>
			</ThemeColorProvider> {/*<-- Remove this line */}
		</ThemeProvider>
	);
}

Remove color toggle (Optional)

Also remove the color toggle button from top menubar (this button will disable if no theme color provider): components/sites/header/top-navbar.tsx

import { ThemeColorToggle } from '@/components/sites/theme-color-toggle' {/*<-- Remove this line */}
 
export function TopNavbar() {
 
	return (
		<nav>
            ...
            <div>
                <DropdownNotification />
                <ModeToggle />
                <ThemeColorToggle /> {/*<-- Remove this line */}
            </div>
		</nav>
	);
}

Where to find theme colors?

You can find other theme color files in: config/css

    • _default.css
    • blue.css
    • green.css
    • orange.css
    • rose.css
    • zinc.css
ConfigurationSources & Credits