tweakcn/theme-picker
Customization

Customizing Themes

tweakcn/theme-picker themes are fully customizable. Learn how to modify colors, fonts, and other properties to match your brand.

Modifying Colors

The easiest way to customize a theme is to modify the CSS variables directly. All colors use OKLCH format.

styles/themes/custom.csscss
1/* Start with an existing theme and modify */
2[data-theme="custom-light"] {
3  /* Change primary to your brand color */
4  --primary: oklch(0.60 0.22 250);  /* A custom blue */
5  --primary-foreground: oklch(1 0 0);
6
7  /* Keep other variables from base theme
8     or customize each one */
9  --background: oklch(0.98 0 0);
10  --foreground: oklch(0.20 0 0);
11
12  /* Accent can complement primary */
13  --accent: oklch(0.75 0.15 250);
14  --accent-foreground: oklch(0.15 0 0);
15}

Custom Fonts

Change the typography by updating the font variables and loading your preferred fonts.

styles/themes/custom.csscss
1[data-theme="custom-light"],
2[data-theme="custom-dark"] {
3  /* Your custom font stack */
4  --font-sans: "Your Font", system-ui, sans-serif;
5  --font-serif: "Your Serif", Georgia, serif;
6  --font-mono: "Your Mono", monospace;
7}

Remember to load the fonts in your layout:

app/layout.tsxtsx
1import { Your_Font } from "next/font/google"
2
3const yourFont = Your_Font({
4  subsets: ["latin"],
5  variable: "--font-sans",
6})
7
8export default function Layout({ children }) {
9  return (
10    <html className={yourFont.variable}>
11      {/* ... */}
12    </html>
13  )
14}

Border Radius

Adjust the --radius variable to change the roundness of all components:

Custom radius examplescss
1/* Sharp corners */
2--radius: 0;
3
4/* Slightly rounded */
5--radius: 0.25rem;
6
7/* Default rounded */
8--radius: 0.5rem;
9
10/* More rounded */
11--radius: 0.75rem;
12
13/* Very rounded (pill-like buttons) */
14--radius: 1rem;

0

0.25rem

0.5rem

0.75rem

Shadow Customization

tweakcn/theme-picker themes include a shadow scale system. Customize the shadow color and intensity:

Shadow customizationcss
1[data-theme="custom-light"] {
2  /* Shadow base settings */
3  --shadow-color: hsl(220 30% 20%);
4  --shadow-opacity: 0.1;
5
6  /* Or define each level */
7  --shadow-sm: 0 1px 2px hsl(220 30% 20% / 0.05);
8  --shadow: 0 1px 3px hsl(220 30% 20% / 0.1),
9            0 1px 2px hsl(220 30% 20% / 0.06);
10  --shadow-md: 0 4px 6px hsl(220 30% 20% / 0.1);
11  --shadow-lg: 0 10px 15px hsl(220 30% 20% / 0.1);
12  --shadow-xl: 0 20px 25px hsl(220 30% 20% / 0.1);
13}

Creating a New Theme

To create a completely new theme, start with a base theme and customize all variables:

styles/themes/brand.csscss
1/* Brand Theme - Light */
2[data-theme="brand-light"] {
3  /* Background and foreground */
4  --background: oklch(0.98 0.01 220);
5  --foreground: oklch(0.15 0.02 220);
6
7  /* Cards and surfaces */
8  --card: oklch(1 0 0);
9  --card-foreground: oklch(0.15 0.02 220);
10  --popover: oklch(1 0 0);
11  --popover-foreground: oklch(0.15 0.02 220);
12
13  /* Brand colors */
14  --primary: oklch(0.55 0.20 220);
15  --primary-foreground: oklch(1 0 0);
16  --secondary: oklch(0.92 0.02 220);
17  --secondary-foreground: oklch(0.25 0.02 220);
18
19  /* Neutral tones */
20  --muted: oklch(0.94 0.01 220);
21  --muted-foreground: oklch(0.45 0.01 220);
22  --accent: oklch(0.94 0.01 220);
23  --accent-foreground: oklch(0.25 0.02 220);
24
25  /* Semantic colors */
26  --destructive: oklch(0.55 0.22 25);
27  --destructive-foreground: oklch(1 0 0);
28
29  /* Borders and inputs */
30  --border: oklch(0.88 0.01 220);
31  --input: oklch(0.92 0.01 220);
32  --ring: oklch(0.55 0.20 220);
33
34  /* Typography and sizing */
35  --font-sans: "Inter", system-ui, sans-serif;
36  --font-mono: "JetBrains Mono", monospace;
37  --radius: 0.5rem;
38}
39
40/* Brand Theme - Dark */
41[data-theme="brand-dark"] {
42  --background: oklch(0.15 0.02 220);
43  --foreground: oklch(0.95 0.01 220);
44  /* ... continue with dark mode values ... */
45}

Register Your Theme

Update your ThemeProvider to include your custom theme:

components/theme-provider.tsxtsx
1const themes = [
2  // Existing themes
3  "catppuccin-light",
4  "catppuccin-dark",
5  // Your custom theme
6  "brand-light",
7  "brand-dark",
8]
9
10const DEFAULT_THEME = "brand-dark"
11
12export function ThemeProvider({ children }) {
13  return (
14    <NextThemesProvider
15      attribute="data-theme"
16      themes={themes}
17      defaultTheme={DEFAULT_THEME}
18      enableSystem={false}
19    >
20      {children}
21    </NextThemesProvider>
22  )
23}

Tips for Great Themes

Contrast Ratios

Ensure foreground colors have at least 4.5:1 contrast ratio against backgrounds for accessibility.

Consistent Hues

Keep related colors (like muted and accent) in similar hue ranges for visual harmony.

Test Both Modes

Always check your customizations in both light and dark modes to ensure consistency.

Font Pairing

Choose fonts that complement each other. Sans-serif for UI, serif for headings or content.