Skip to main content

Create a Theme

Define your tokens, generate the CSS, and apply your theme. Complete Quick Start first if Vortex isn't installed yet.

Define your theme

Create vortex.config.ts at your project root. This example gives the sleek theme blue primary text:

vortex.config.ts
import type { VortexThemeConfig } from "@vortexlabs/vortex";

const config: VortexThemeConfig = {
themes: {
  sleek: {
    globalTokens: {
      color: {
        brandPrimary600: { color: "oklch(52.6% 0.148 259.165)" },
        brandPrimary300: { color: "oklch(79.6% 0.11 258.37)" },
      },
    },
    semanticTokens: {
      color: {
        foregroundPrimaryDefault: {
          lightMode: "brandPrimary600",
          darkMode: "brandPrimary300",
        },
      },
    },
  },
},
};

export default config;

Global tokens hold values; semantic tokens assign them to roles. Omitted tokens inherit Vortex's defaults. Include both lightMode and darkMode when replacing a color role.

Generate the CSS

Add this script to your existing package.json if you haven't already:

package.json
"build:theme": "vortex theming --output ./src/themes"
bun run build:theme

This creates src/themes/sleek/. Run it again after config changes; edit the config rather than the generated CSS.

Apply your theme

Import the CSS in your app entry and use the same name on your existing provider:

src/App.tsx
"use client";

import { Text, VortexProvider } from "@vortexlabs/vortex";
import "./themes/sleek/globals.css";

export function App() {
return (
  <VortexProvider defaultTheme="sleek">
    <Text color="primary">Your theme is ready.</Text>
  </VortexProvider>
);
}

For Next.js, import the CSS in your root layout and set the initial theme attributes as shown in the Next.js guide.

Available tokens

globalTokens defines raw values. semanticTokens assigns them to UI roles. componentTokens controls component radius and padding.

Choose a group below for names and formats. VortexThemeConfig provides autocomplete for the full set.

Configuration reference