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. Here's an example showing how to change the primary brand 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: {          // Change the primary brand color to blue          primary: "oklch(0.55 0.18 240)",          "primary-foreground": "oklch(0.98 0.01 240)",                    // Update the brand colors to match          brand: "#2563eb", // Blue-600          "brand-lighter": "#93c5fd", // Blue-300        },        dark: {          // Corresponding dark mode colors          primary: "oklch(0.65 0.16 240)",          "primary-foreground": "oklch(0.12 0.03 240)",                    // Same brand colors work for both themes          brand: "#2563eb",          "brand-lighter": "#93c5fd",        },      },    }),  ],});

Inspecting element colors in the browser

To identify the exact color values used by dashboard elements, you can use your browser's developer tools:

Right-click on any element and select "Inspect" to open the developer panel.

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

You can customize the dashboard theme colors by modifying the theme configuration in your vite.config.mts file. Here's an example showing how to change the primary brand 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: {          // Change the primary brand color to blue          primary: "oklch(0.55 0.18 240)",          "primary-foreground": "oklch(0.98 0.01 240)",                    // Update the brand colors to match          brand: "#2563eb", // Blue-600          "brand-lighter": "#93c5fd", // Blue-300        },        dark: {          // Corresponding dark mode colors          primary: "oklch(0.65 0.16 240)",          "primary-foreground": "oklch(0.12 0.03 240)",                    // Same brand colors work for both themes          brand: "#2563eb",          "brand-lighter": "#93c5fd",        },      },    }),  ],});

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

Inspecting element colors in the browser

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-lighter`	Lighter brand variant
`--brand-darker`	Darker brand variant

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

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