Theme Setup

​

Theming Implementation

The theme system is built using Tailwind CSS V4

​

Applying Styles

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

// some-component.tsx
return (
	<div className="bg-black dark:bg-white text-secondary-foreground">
		{/* 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.

Use TweakCN to customize your own theme including colors, radius, modes…

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

​

Email Theme Customization

This guide explains how to customize the email theme colors in your application by modifying the config.ts file inside the src/config folder. The email theme settings control the appearance of emails sent from your application, including colors for icons, primary elements, and text. In the config.ts file, you’ll find the theme configuration section that includes email theming options:

export const config = {
	// ... other configuration options

	theme: {
		general: "light", // The general theme of your application ('light' | 'dark' | 'system')
		email: {
			icons: "#333333", // Color for icons in emails
			primary: "#333333", // Primary color for buttons and highlights
			text: "#333333", // Text color in emails
		},
	},

	// ... other configuration options
};

​

Example Customizations

​

Corporate Blue Theme

email: {
  icons: '#2563EB',
  primary: '#3B82F6',
  text: '#1E3A8A',
},

​

Modern Dark Theme

email: {
  icons: '#9CA3AF',
  primary: '#4B5563',
  text: '#1F2937',
},

​

Vibrant Brand Theme

email: {
  icons: '#8B5CF6',
  primary: '#6D28D9',
  text: '#4C1D95',
},