> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/BankkRoll/tweakcn-theme-picker/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<Note>
  All exports are from `registry/nextjs/lib/themes-config.ts`
</Note>

***

## themes

Array of all available theme configurations.

### Type Signature

```typescript theme={null}
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

<CodeGroup>
  ```typescript Default Theme theme={null}
  {
    name: "default",
    title: "Default",
    primaryLight: "oklch(0.2050 0 0)",
    primaryDark: "oklch(0.9220 0 0)",
    fontSans: "ui-sans-serif, system-ui, sans-serif"
  }
  ```

  ```typescript Catppuccin theme={null}
  {
    name: "catppuccin",
    title: "Catppuccin",
    primaryLight: "oklch(0.55 0.25 297.02)",
    primaryDark: "oklch(0.79 0.12 304.77)",
    fontSans: "Montserrat, sans-serif"
  }
  ```

  ```typescript Vercel theme={null}
  {
    name: "vercel",
    title: "Vercel",
    primaryLight: "oklch(0 0 0)",
    primaryDark: "oklch(1 0 0)",
    fontSans: "Geist, sans-serif"
  }
  ```
</CodeGroup>

### Usage

```typescript theme={null}
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

```typescript theme={null}
export const sortedThemes: ThemeConfig[];
```

### Implementation

```typescript theme={null}
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

```typescript theme={null}
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

```typescript theme={null}
export const themeNames: string[];
```

### Implementation

```typescript theme={null}
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

```typescript theme={null}
[
  "default",
  "amber-minimal",
  "bold-tech",
  "bubblegum",
  "caffeine",
  "candyland",
  "catppuccin",
  // ... 36 more themes
]
```

### Usage

```typescript theme={null}
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

```typescript theme={null}
export const allThemeValues: string[];
```

### Implementation

```typescript theme={null}
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

```typescript theme={null}
[
  "default-light",
  "default-dark",
  "amber-minimal-light",
  "amber-minimal-dark",
  "bold-tech-light",
  "bold-tech-dark",
  // ... 80 more variants (43 themes × 2 modes)
]
```

### Usage

```typescript theme={null}
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

```typescript theme={null}
export const DEFAULT_THEME: string;
```

### Value

```typescript theme={null}
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

```typescript theme={null}
import { DEFAULT_THEME } from "@/lib/themes-config";
import { ThemeProvider } from "next-themes";

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

***

## Complete Import Example

```typescript theme={null}
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](/api/theme-config) - Interface definition for theme objects
* [ThemeProvider](/api/theme-provider) - Provider component configuration
* [ThemeSwitcher](/api/theme-switcher) - Theme selection UI component