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
Catppuccin
Vercel
{ 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