Themes Config Exports

Exported constants and utilities from the themes configuration module

Overview

The themes configuration module exports several constants and utilities for working with themes in the tweakcn Theme Picker system.

All exports are from registry/nextjs/lib/themes-config.ts

---

themes

Array of all available theme configurations.

Type Signature

export const themes: ThemeConfig[];

Description

Contains 43 pre-built theme configurations including popular themes like Catppuccin, Vercel, GitHub, and many custom designs. Each theme includes light and dark mode color definitions and font specifications.

Example Themes

Default Theme

{
  name: "default",
  title: "Default",
  primaryLight: "oklch(0.2050 0 0)",
  primaryDark: "oklch(0.9220 0 0)",
  fontSans: "ui-sans-serif, system-ui, sans-serif"
}

Usage

import { themes } from "@/lib/themes-config";

// Get all theme names
const themeNames = themes.map(t => t.name);

// Find a specific theme
const vercelTheme = themes.find(t => t.name === "vercel");

// Count total themes
console.log(`${themes.length} themes available`); // 43 themes available

---

sortedThemes

Alphabetically sorted themes with “Default” kept first.

Type Signature

export const sortedThemes: ThemeConfig[];

Implementation

export const sortedThemes = [
  themes[0],
  ...themes.slice(1).sort((a, b) => a.title.localeCompare(b.title)),
];

Description

Sorts themes alphabetically by their title property while keeping the “Default” theme at the first position. Used by the ThemeSwitcher component to display themes in a consistent, user-friendly order.

Usage

import { sortedThemes } from "@/lib/themes-config";

// Render themes in sorted order
sortedThemes.forEach((theme, index) => {
  console.log(`${index + 1}. ${theme.title}`);
});
// Output:
// 1. Default
// 2. Amber Minimal
// 3. Bold Tech
// ...

---

themeNames

Array of all theme names (identifiers).

Type Signature

export const themeNames: string[];

Implementation

export const themeNames = themes.map((t) => t.name);

Description

Extracts just the name property from each theme configuration. Useful for validation, lookups, and type narrowing.

Example Values

[
  "default",
  "amber-minimal",
  "bold-tech",
  "bubblegum",
  "caffeine",
  "candyland",
  "catppuccin",
  // ... 36 more themes
]

Usage

import { themeNames } from "@/lib/themes-config";

// Validate theme name
function isValidTheme(name: string): boolean {
  return themeNames.includes(name);
}

// Type guard
if (isValidTheme("catppuccin")) {
  // Safe to use
}

---

allThemeValues

All theme variant strings for next-themes integration.

Type Signature

export const allThemeValues: string[];

Implementation

export const allThemeValues = themes.flatMap((t) => [
  `${t.name}-light`,
  `${t.name}-dark`,
]);

Description

Generates all possible theme values by creating both -light and -dark variants for each theme. This array is passed to next-themes to register all available theme options.

Example Values

[
  "default-light",
  "default-dark",
  "amber-minimal-light",
  "amber-minimal-dark",
  "bold-tech-light",
  "bold-tech-dark",
  // ... 80 more variants (43 themes × 2 modes)
]

Usage

import { allThemeValues } from "@/lib/themes-config";
import { ThemeProvider } from "next-themes";

// Pass to ThemeProvider
<ThemeProvider themes={allThemeValues}>
  {children}
</ThemeProvider>

---

DEFAULT_THEME

The default theme value applied on initial load.

Type Signature

export const DEFAULT_THEME: string;

Value

export const DEFAULT_THEME = "default-dark";

Description

Defines the initial theme used when no user preference is stored. Set to "default-dark" to provide a dark mode experience by default.

Usage

import { DEFAULT_THEME } from "@/lib/themes-config";
import { ThemeProvider } from "next-themes";

<ThemeProvider defaultTheme={DEFAULT_THEME}>
  {children}
</ThemeProvider>

---

Complete Import Example

import {
  themes,
  sortedThemes,
  themeNames,
  allThemeValues,
  DEFAULT_THEME,
  type ThemeConfig
} from "@/lib/themes-config";

// Use all exports together
function ThemeUtility() {
  console.log(`Total themes: ${themes.length}`);
  console.log(`Default: ${DEFAULT_THEME}`);
  console.log(`All variants: ${allThemeValues.length}`);
  
  return (
    <div>
      {sortedThemes.map(theme => (
        <ThemeCard key={theme.name} config={theme} />
      ))}
    </div>
  );
}

See Also

• ThemeConfig - Interface definition for theme objects
• ThemeProvider - Provider component configuration
• ThemeSwitcher - Theme selection UI component