UI Theme Colors

About 1 min

UI Theme Colors

WebCAD separates canvas dark/light from chrome theme colors:

Capability	API	Scope
Canvas theme	`themeMode` / `Engine.THEME_MODE`	Drawing background grayscale, default entity colors, etc.
Chrome theme colors	`themeColors` / `setThemeColors`	Menus, Ribbon, sidebars, property tables, dialogs, inputs

Dialogs mount on document.body. Theme CSS variables are written to both #container and document.documentElement so popups inherit the palette.

Online Examples

Example	Description	Link
Canvas dark/light	`THEME_MODE`	Online Demo{target="_blank"}
Custom theme colors	`themeColors` / `buildThemeColorsFromPreset`	Online Demo{target="_blank"}

Canvas Theme (themeMode)

const cadView = new MainView({
    themeMode: 0, // 0 = dark canvas (default), 1 = light canvas
});

Engine.THEME_MODE = 1;

This does not recolor menus, sidebars, or dialogs.

Chrome Theme Colors (themeColors)

At construction

Prefer buildThemeColorsFromPreset to expand a few brand colors into a full palette:

import {
    MainView,
    initCadContainer,
    buildThemeColorsFromPreset
} from 'vjcad';

const cadView = new MainView({
    serviceUrl: '...',
    accessToken: '...',
    themeColors: buildThemeColorsFromPreset({
        bg: '#1a1a2e',
        bg2: '#16162a',
        panel: '#22223a',
        accent: '#18a9de',
        canvas: '#12121f' // optional Pixi background
    })
});

initCadContainer('map', cadView);
await cadView.onLoad();

You may also pass a full or partial ThemeColors object; omitted fields keep library defaults.

At runtime

cadView.setThemeColors(buildThemeColorsFromPreset({ /* ... */ }));
cadView.resetThemeColors();
cadView.getThemeColors();

Engine.setThemeColors({ accent: '#a78bfa' });
Engine.resetThemeColors();
Engine.getThemeColors();

resetThemeColors() clears theme-related inline CSS variables only — layout vars such as --left-panel-width are preserved.

Omit canvas when transparent

If you use backgroundAlpha: 0 (map overlay), omit canvas in the preset so Pixi alpha is not forced back to 1.

Key Semantic Fields

Field	Role
`shellBg` / `actbarBg` / `menubarBg`	Shell / activity bar / menu bar
`toolbarBg` / `filebarBg`	Toolbar / document tabs
`sidebarContentsBg` / `palettePanelBg`	Sidebar / panels
`font` / `border` / `accent` / `hover`	Text, borders, accent, hover
`inputBg` / `toolbarButtonBg`	Inputs and icon button backgrounds
`tableHeader` / `tableRow0` / `tableRow1`	Property tables
`dialogBg` / `dialogHeaderBg` / `dialogInputBg`	Dialogs
`ribbonGradientStart` / `End`	Ribbon gradients
`canvas`	Canvas background (Pixi, not a CSS var)

See exported DEFAULT_THEME_COLORS for the full default dark palette.

Deprecated Snippets

Do not use Engine.setTheme('dark') / Engine.getTheme() from older docs. Use themeMode for canvas and themeColors for chrome.