Themes

Custom theme with Element-UI SCSS Variables

VRCX supports using Element-UI's built-in SCSS variables for custom themes.

Theme Definition

The theme definition file lives at:

src/shared/constants/theme.js

Inside that file, each theme entry has these properties:

cssFile
The name of the SCSS file you are developing
requiresDarkBase
A boolean that indicates whether your theme is built on top of VRCX's own dark theme.
isDark
A boolean that determines whether the external program's title bar and other UI elements use a dark or light mode.
name
The key for your theme's display name. You must add a corresponding entry in i18n.json.

// example snippet from src/shared/constants/theme.js
{
  cssFile: 'theme.myCustomTheme.scss',
  requiresDarkBase: false,
  isDark: false,
  name: 'my_custom_theme'
}

Override SCSS Variables in Your Theme

In your custom SCSS file (for example src/assets/scss/themes/theme.myCustomTheme.scss), first override any Element-UI variables you need, then import the full Element-UI stylesheet:

// src/assets/scss/themes/theme.myCustomTheme.scss

/* 1. Override theme color */
$--color-primary: teal;

/* 2. Specify icon font path (required) */
$--font-path: "~element-ui/lib/theme-chalk/fonts";

/* 3. Pull in all Element-UI styles */
@import "~element-ui/packages/theme-chalk/src/index";

/* 4. Add your own styles (optional) */

Adding Your SCSS Entry

After you finish your SCSS file, open your webpack.config.js and add it under the entry section:

// webpack.config.js
  entry: {
    // …other entries…
    'theme.myCustomTheme': `${themeBasePath}theme.myCustomTheme.scss`,
  },
  // …rest of config…

Important Notes

VRCX's CSS is deeply nested, with multiple layers of overrides. Changes in upstream files (for example, app.scss) may affect your custom theme unexpectedly.