Theme Setup

​

Theming Implementation

The theme system is built using Tailwind CSS and a custom theme provider.

​

Tailwind CSS Configuration

The Tailwind CSS configuration file (tailwind.config.js) includes the theme-related settings:

module.exports = {
	theme: {
		extend: {
			colors: {
				primary: {
					DEFAULT: "hsl(var(--primary))",
					foreground: "hsl(var(--primary-foreground))",
				},
				// Add more custom colors here
			},
			// Add more theme-related settings here
		},
	},
};

​

Applying Styles

The theme-specific styles are applied using Tailwind CSS utility classes. For example:

// some-component.tsx
return (
	<div className="bg-primary-light dark:bg-primary-dark text-white">
		{/* Component content */}
	</div>
);

This will apply the appropriate background color based on the active theme.

​

Shadcn/ui

I love to work with Shadcn/ui to customize the theme of the app. You can choose between using CSS variables or Tailwind CSS utility classes for theming.

Go to shadcn/ui customize your own theme including colors, radius, modes…

After you customizing your theme, copy the code and change src/app/global.css …