Admin UI Theming & Branding

Theming

Much of the visual styling of the Admin UI can be customized by providing your own themes in a Sass stylesheet. For the most part, the Admin UI uses CSS custom properties to control colors and other styles. Here's a simple example which changes the color of links:

1. Install @vendure/ui-devkit
2. Create a custom stylesheet which overrides one or more of the CSS custom properties used in the Admin UI:
   my-theme.scss

   :root {  --clr-link-active-color: hsl(110, 65%, 57%);  --clr-link-color: hsl(110, 65%, 57%);  --clr-link-hover-color: hsl(110, 65%, 57%);  --clr-link-visited-color: hsl(110, 55%, 75%);}
   To get an idea of which custom properties are available for theming, take a look at the source of the Default theme and the Dark theme
3. Set this as a globalStyles extension:
   src/vendure-config.ts

   import path from 'path';import { AdminUiPlugin } from '@vendure/admin-ui-plugin';import { VendureConfig } from '@vendure/core';import { compileUiExtensions } from '@vendure/ui-devkit/compiler';export const config: VendureConfig = {    // ...    plugins: [        AdminUiPlugin.init({            app: compileUiExtensions({                outputPath: path.join(__dirname, '../admin-ui'),                extensions: [{                    globalStyles: path.join(__dirname, 'my-theme.scss')                }],            }),        }),    ],}

Some customizable styles in Clarity, the Admin UI's underlying UI framework, are controlled by Sass variables, which can be found on the project's GitHub page. Similar to above, you can also provide your own values, which will override defaults set by the framework. Here's an example which changes the height of the main header:

1. Install @vendure/ui-devkit if not already installed
2. Create a custom stylesheet which overrides the target variable(s):
   my-variables.scss

   $clr-header-height: 4rem;
3. Set this as a sassVariableOverrides extension:
   src/vendure-config.ts

   import path from 'path';import { AdminUiPlugin } from '@vendure/admin-ui-plugin';import { VendureConfig } from '@vendure/core';import { compileUiExtensions } from '@vendure/ui-devkit/compiler';export const config: VendureConfig = {    // ...    plugins: [        AdminUiPlugin.init({            app: compileUiExtensions({                outputPath: path.join(__dirname, 'admin-ui'),                extensions: [{                    sassVariableOverrides: path.join(__dirname, 'my-variables.scss')                }],            }),        }),    ],}

globalStyles and sassVariableOverrides extensions can be used in conjunction or separately.