style: add --color-toolbar-background

Author: liujuping

docs/docs/guide/expand/editor/theme.md

@@ -3,23 +3,46 @@ title: 主题色扩展
 sidebar_position: 9
 ---
 
-## 主题色扩展简述
+## 简介
 
-通过主题色扩展，可以定制多种设计器主题。
+主题色扩展允许用户定制多样的设计器主题，增加界面的个性化和品牌识别度。
 
-## 主题色扩展说明
+## 设计器主题色定制
+
+在 CSS 的根级别定义主题色变量可以确保这些变量在整个应用中都可用。例如：
+
+```css
+:root {
+  --color-brand: rgba(0, 108, 255, 1); /* 主品牌色 */
+  --color-brand-light: rgba(25, 122, 255, 1); /* 浅色品牌色 */
+  --color-brand-dark: rgba(0, 96, 229, 1); /* 深色品牌色 */
+}
+
+```
+
+将样式文件引入到你的设计器中，定义的 CSS 变量就可以改变设计器的主题色了。
 
 ### 主题色变量
 
-- `--color-brand`: 品牌色
-- `--color-brand-light`: 品牌色（light）
-- `--color-brand-dark`: 品牌色（dark）
-- `--color-icon-normal`: 正常 icon 颜色
-- `--color-icon-hover`: icon hover 态颜色
-- `--color-icon-active`: icon active 态颜色
-- `--color-icon-reverse`: icon 反色
-- `--color-icon-disabled`: icon 禁用态颜色
-- `--color-icon-pane`: icon 面板颜色
+以下是低代码引擎设计器支持的主题色变量列表，以及它们的用途说明：
+
+#### 品牌相关颜色
+
+- `--color-brand`: 主品牌色
+- `--color-brand-light`: 浅色品牌色
+- `--color-brand-dark`: 深色品牌色
+
+#### Icon 相关颜色
+
+- `--color-icon-normal`: 默认状态
+- `--color-icon-hover`: 鼠标悬停状态
+- `--color-icon-active`: 激活状态
+- `--color-icon-reverse`: 反色状态
+- `--color-icon-disabled`: 禁用状态
+- `--color-icon-pane`: 面板颜色
+
+#### 线条和文本颜色
+
 - `--color-line-normal`: 线条颜色
 - `--color-line-darken`: 线条颜色(darken)
 - `--color-title`: 标题颜色
@@ -29,13 +52,19 @@ sidebar_position: 9
 - `--color-text-reverse`: 反色情况下，文字颜色
 - `--color-text-regular`: 文字颜色(regular)
 - `--color-text-disabled`: 禁用态文字颜色
+
+#### 字段和边框颜色
+
 - `--color-field-label`: field 标签颜色
 - `--color-field-text`: field 文本颜色
 - `--color-field-placeholder`: field placeholder 颜色
 - `--color-field-border`: field 边框颜色
 - `--color-field-border-hover`: hover 态下，field 边框颜色
 - `--color-field-border-active`: active 态下，field 边框颜色
 - `--color-field-background`: field 背景色
+
+#### 状态颜色
+
 - `--color-success`: success 颜色
 - `--colo-success-dark`: success 颜色(dark)
 - `--color-success-light`: success 颜色(light)
@@ -50,7 +79,9 @@ sidebar_position: 9
 - `--color-error-light`: error 颜色(light)
 - `--color-purple`: purple 颜色
 - `--color-brown`: brown 颜色
-- `--color-pane-background`: 面板背景色
+
+#### 区块背景色
+
 - `--color-block-background-normal`: 区块背景色
 - `--color-block-background-light`: 区块背景色(light), 作用于画布组件 hover 时遮罩背景色。
 - `--color-block-background-shallow`: 区块背景色 shallow
@@ -61,20 +92,30 @@ sidebar_position: 9
 - `--color-block-background-error`: 区块背景色(error)
 - `--color-block-background-success`: 区块背景色(success)
 - `--color-block-background-deep-dark`: 区块背景色(deep-dark)，作用于多个组件同时拖拽的背景色。
+
+#### 其他区域背景色
+
 - `--color-layer-mask-background`: 拖拽元素时，元素原来位置的遮罩背景色
 - `--color-layer-tooltip-background`: tooltip 背景色
+- `--color-pane-background`: 面板背景色
 - `--color-background`: 设计器主要背景色
 - `--color-top-area-background`: topArea 背景色，优先级大于 `--color-pane-background`
 - `--color-left-area-background`: leftArea 背景色，优先级大于 `--color-pane-background`
+- `--color-toolbar-background`: toolbar 背景色，优先级大于 `--color-pane-background`
 - `--color-workspace-left-area-background`: 应用级 leftArea 背景色，优先级大于 `--color-pane-background`
 - `--color-workspace-top-area-background`: 应用级 topArea 背景色，优先级大于 `--color-pane-background`
 - `--color-workspace-sub-top-area-background`: 应用级二级 topArea 背景色，优先级大于 `--color-pane-background`
+
+#### 其他变量
+
 - `--workspace-sub-top-area-height`: 应用级二级 topArea 高度
 - `--workspace-sub-top-area-margin`: 应用级二级 topArea margin
 - `--workspace-sub-top-area-padding`: 应用级二级 topArea padding
 - `--workspace-left-area-width`: 应用级 leftArea width
 
-### 生态使用主题色变量
+
+
+### 低代码引擎生态主题色定制
 
 插件、物料、设置器等生态为了支持主题色需要对样式进行改造，需要对生态中的样式升级为 css 变量。例如：
 
@@ -87,6 +128,8 @@ background: var(--color-brand, #006cff);
 
 ```
 
+这里 `var(--color-brand, #默认色)` 表示使用 `--color-brand` 变量，如果该变量未定义，则使用默认颜色（#默认色）。
+
 ### fusion 物料进行主题色扩展
 
-如果使用了 fusion 组件，可以通过 https://fusion.alibaba-inc.com/ 平台进行主题色定制。
+如果使用了 fusion 组件时，可以通过 [fusion 平台](https://fusion.design/) 进行主题色定制。在平台上，您可以选择不同的主题颜色，并直接应用于您的 fusion 组件，这样可以无缝地集成到您的应用设计中。

packages/editor-skeleton/src/layouts/workbench.less

@@ -366,7 +366,7 @@ body {
       .lc-toolbar {
         display: flex;
         height: var(--toolbar-height);
-        background-color: var(--color-pane-background);
+        background-color: var(--color-toolbar-background, var(--color-pane-background));
         padding: 8px 16px;
         .lc-toolbar-center {
           display: flex;