界面主题色

大约 2 分钟

界面主题色

WebCAD 的 画布深/浅色 与 界面（chrome）主题色 是两套能力：

能力	API	作用范围
画布主题	`themeMode` / `Engine.THEME_MODE`	绘图区背景灰度、实体默认色等
界面主题色	`themeColors` / `setThemeColors`	菜单、Ribbon、侧栏、属性表、对话框、输入框等 UI 色板

对话框挂在 document.body 上，主题变量会同时写到 #container 与 document.documentElement，保证弹窗也能跟色。

在线示例

示例	描述	链接
画布深浅色	`THEME_MODE` 切换画布	在线演示{target="_blank"}
自定义主题色	`themeColors` / `buildThemeColorsFromPreset`	在线演示{target="_blank"}

画布深浅色（themeMode）

const cadView = new MainView({
    themeMode: 0, // 0=深色画布（默认），1=浅色画布
});

// 运行时
Engine.THEME_MODE = 1;
Engine.setBgc(Engine.isDarkTheme() ? 0 : 255);

这只影响画布背景相关逻辑，不会改菜单/侧栏/对话框的配色。

界面主题色（themeColors）

构造时设置

推荐用 buildThemeColorsFromPreset 从少量品牌色生成完整色板：

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

const cadView = new MainView({
    serviceUrl: '...',
    accessToken: '...',
    themeColors: buildThemeColorsFromPreset({
        bg: '#1a1a2e',      // 外壳 / 活动栏 / 菜单栏
        bg2: '#16162a',     // 工具栏 / 命令区
        panel: '#22223a',   // 侧栏内容 / 面板
        accent: '#18a9de',  // 强调色（边框、选中、hover）
        canvas: '#12121f'   // 可选：Pixi 画布背景
    })
});

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

也可传入完整或部分 ThemeColors 字段（见下文），未给的项沿用库默认暗色板。

运行时切换 / 恢复

// MainView
cadView.setThemeColors(buildThemeColorsFromPreset({ /* ... */ }));
cadView.resetThemeColors();
const current = cadView.getThemeColors();

// 等价转发
Engine.setThemeColors({ accent: '#a78bfa' });
Engine.resetThemeColors();
Engine.getThemeColors();

resetThemeColors() 只清除主题相关内联 CSS 变量，不会清掉 --left-panel-width 等布局变量。

不设 canvas 时

若 MainView 使用 backgroundAlpha: 0（透明画布叠地图），预设里可省略 canvas，避免把 Pixi 背景 alpha 强行设回 1。

主要语义字段

ThemeColors 字段均为 CSS 颜色字符串。常用项：

字段	说明	对应 CSS 变量（示例）
`shellBg` / `actbarBg` / `menubarBg`	外壳、活动栏、菜单栏	`--theme-color-shell-bg` 等
`toolbarBg` / `filebarBg`	工具栏、文档标签栏	`--theme-color-toolbar`
`sidebarContentsBg` / `palettePanelBg`	侧栏内容、面板	`--theme-color-sidebarframe-contents`
`font` / `fontSecondary`	主/次文字	`--theme-color-font`
`border` / `accent` / `hover`	边框、强调、悬停	`--theme-color-border` / `--theme-color-accent`
`inputBg` / `buttonBg` / `toolbarButtonBg`	输入框、按钮、图标底	`--theme-color-input-bg` 等
`tableHeader` / `tableRow0` / `tableRow1`	属性表等	`--theme-color-table-` / `--bgc-`
`dialogBg` / `dialogHeaderBg` / `dialogInputBg`	对话框	`--theme-color-dialog-*`
`ribbonGradientStart` / `End`	Ribbon 渐变两端	`--theme-color-ribbon-gradient-*`
`canvas`	画布背景（非 CSS，走 Pixi）	—

完整默认值见导出常量 DEFAULT_THEME_COLORS。

与旧说明的区别

文档里若仍写 Engine.setTheme('dark') / Engine.getTheme()，那是过时写法，请勿使用。正确区分：

画布：themeMode / Engine.THEME_MODE
界面色板：themeColors / setThemeColors / resetThemeColors