Dashboard Theming

The Vendure dashboard uses a modern theming system based on CSS custom properties and Tailwind CSS . This guide shows you how to customize the colors and styles by modifying the theme variables in the Vite plugin.

The dashboard also uses the same theming methodology as shadcn/ui

It also uses the shadcn theme provider implementation for Vite

Using Themes in Your Components

The Vendure dashboard provides a simple way to access theme variables in your components. Here's how to use them:

Using Tailwind Classes

The easiest way to use theme colors is through Tailwind variable CSS classes:

Tsx

function ProductIdWidgetComponent() {    return (        <div className="text-sm">            <p>                This is a custom widget for the product:                <strong className="ml-1 text-foreground">{product.name}</strong>            </p>            <p className="mt-2 text-muted-foreground">Product ID: {product.id}</p>        </div>    );}

Customizing Theme Colors

You can customize the dashboard theme colors by modifying the theme configuration in your vite.config.mts file. The primary tokens style primary actions, while the brand tokens are reserved for identity moments such as logos and branded accents.

Typescript

// vite.config.mtsimport { vendureDashboardPlugin } from "@vendure/dashboard/plugin";import { defineConfig } from "vite";// ...other importsexport default defineConfig({  plugins: [    vendureDashboardPlugin({      vendureConfigPath: "./src/vendure-config.ts",      adminUiConfig: { apiHost: "http://localhost", apiPort: 3000 },      gqlOutputPath: "./src/gql",      // Theme section      theme: {        light: {          // Primary action colors          primary: "oklch(0.55 0.18 240)",          "primary-foreground": "oklch(0.98 0.01 240)",                    // Brand identity colors          brand: "oklch(0.55 0.18 240)",          "brand-foreground": "oklch(0.98 0.01 240)",        },        dark: {          // Corresponding dark mode colors          primary: "oklch(0.65 0.16 240)",          "primary-foreground": "oklch(0.12 0.03 240)",                    // Brand colors can be tuned independently for dark mode          brand: "oklch(0.65 0.16 240)",          "brand-foreground": "oklch(0.12 0.03 240)",        },      },    }),  ],});

Dashboard Theming

The dashboard also uses the same theming methodology as shadcn/ui

Using Themes in Your Components

The Vendure dashboard provides a simple way to access theme variables in your components. Here's how to use them:

Using Tailwind Classes

The easiest way to use theme colors is through Tailwind variable CSS classes:

Tsx

function ProductIdWidgetComponent() {    return (        <div className="text-sm">            <p>                This is a custom widget for the product:                <strong className="ml-1 text-foreground">{product.name}</strong>            </p>            <p className="mt-2 text-muted-foreground">Product ID: {product.id}</p>        </div>    );}

Customizing Theme Colors

Typescript

// vite.config.mtsimport { vendureDashboardPlugin } from "@vendure/dashboard/plugin";import { defineConfig } from "vite";// ...other importsexport default defineConfig({  plugins: [    vendureDashboardPlugin({      vendureConfigPath: "./src/vendure-config.ts",      adminUiConfig: { apiHost: "http://localhost", apiPort: 3000 },      gqlOutputPath: "./src/gql",      // Theme section      theme: {        light: {          // Primary action colors          primary: "oklch(0.55 0.18 240)",          "primary-foreground": "oklch(0.98 0.01 240)",                    // Brand identity colors          brand: "oklch(0.55 0.18 240)",          "brand-foreground": "oklch(0.98 0.01 240)",        },        dark: {          // Corresponding dark mode colors          primary: "oklch(0.65 0.16 240)",          "primary-foreground": "oklch(0.12 0.03 240)",                    // Brand colors can be tuned independently for dark mode          brand: "oklch(0.65 0.16 240)",          "brand-foreground": "oklch(0.12 0.03 240)",        },      },    }),  ],});

Variable	Description
`--background`	Main background
`--foreground`	Main text color
`--card`	Card background
`--card-foreground`	Card text
`--popover`	Popover background
`--popover-foreground`	Popover text

Variable	Description
`--primary`	Primary brand color
`--primary-foreground`	Text on primary
`--secondary`	Secondary actions
`--secondary-foreground`	Text on secondary
`--accent`	Accent elements
`--accent-foreground`	Text on accent

Variable	Description
`--destructive`	Error/danger actions
`--destructive-foreground`	Text on destructive
`--success`	Success states
`--success-foreground`	Text on success
`--muted`	Muted elements
`--muted-foreground`	Muted text

Variable	Description
`--border`	Border color
`--input`	Input background
`--ring`	Focus ring color

Variable	Description
`--chart-1`	Chart color 1
`--chart-2`	Chart color 2
`--chart-3`	Chart color 3
`--chart-4`	Chart color 4
`--chart-5`	Chart color 5

Dashboard Theming

Using Themes in Your Components

Using Tailwind Classes

Customizing Theme Colors

Dashboard Theming

Using Themes in Your Components

Using Tailwind Classes

Customizing Theme Colors

Inspecting element colors in the browser

Available Theme Variables

Core Colors

Interactive Colors

Semantic Colors

Border and Input Colors

Chart Colors

Sidebar Colors

Brand Colors

Typography

Border Radius

Variable	Description
`--sidebar`	Sidebar background
`--sidebar-foreground`	Sidebar text
`--sidebar-primary`	Sidebar primary
`--sidebar-primary-foreground`	Text on sidebar primary
`--sidebar-accent`	Sidebar accent
`--sidebar-accent-foreground`	Text on sidebar accent
`--sidebar-border`	Sidebar border
`--sidebar-ring`	Sidebar focus ring

Variable	Description
`--brand`	Primary brand color
`--brand-foreground`	Content displayed on a brand-colored surface

Variable	Description
`dev-mode`	Dev-mode ring
`dev-mode-foreground`	Dev-mode foreground

Variable	Description
`--font-sans`	Sans-serif font
`--font-mono`	Monospace font