opentiny · wenmine · Apr 29, 2024 · May 9, 2024 · coderabbitai · May 15, 2024
diff --git a/jsconfig.json b/jsconfig.json
@@ -22,6 +22,7 @@
       "@opentiny/tiny-engine-toolbar-breadcrumb": ["packages/toolbars/breadcrumb/index"],
       "@opentiny/tiny-engine-toolbar-fullscreen": ["packages/toolbars/fullscreen/index"],
       "@opentiny/tiny-engine-toolbar-lang": ["packages/toolbars/lang/index"],
+      "@opentiny/tiny-engine-toolbar-changetheme": ["packages/toolbars/changetheme/index"],
       "@opentiny/tiny-engine-toolbar-layout": ["packages/toolbars/layout/index"],
       "@opentiny/tiny-engine-toolbar-checkinout": ["packages/toolbars/lock/index"],
       "@opentiny/tiny-engine-toolbar-logo": ["packages/toolbars/logo/index"],
@@ -52,6 +53,7 @@
       "@opentiny/tiny-engine-toolbar-breadcrumb/*": ["packages/toolbars/breadcrumb/*"],
       "@opentiny/tiny-engine-toolbar-fullscreen/*": ["packages/toolbars/fullscreen/*"],
       "@opentiny/tiny-engine-toolbar-lang/*": ["packages/toolbars/lang/*"],
+      "@opentiny/tiny-engine-toolbar-changetheme/*": ["packages/toolbars/changetheme/*"],
       "@opentiny/tiny-engine-toolbar-layout/*": ["packages/toolbars/layout/*"],
       "@opentiny/tiny-engine-toolbar-checkinout/*": ["packages/toolbars/lock/*"],
       "@opentiny/tiny-engine-toolbar-logo/*": ["packages/toolbars/logo/*"],

diff --git a/mockServer/src/database/pages.db b/mockServer/src/database/pages.db
diff --git a/packages/controller/src/globalConfig.js b/packages/controller/src/globalConfig.js
@@ -1,14 +1,14 @@
 /**
-* Copyright (c) 2023 - present TinyEngine Authors.
-* Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
 
 let globalConfig = null
 
@@ -17,3 +17,7 @@ export const getGlobalConfig = () => globalConfig
 export const setGlobalConfig = (config) => {
   globalConfig = config
 }
+
+export const updateGlobalSingleConfig = (key, value) => {
+  globalConfig[key] = value
+}
-export const updateGlobalSingleConfig = (key, value) => {
-  globalConfig[key] = value
-}
+export const updateGlobalSingleConfig = (key, value) => {
+  if (globalConfig.hasOwnProperty(key)) {
+    globalConfig[key] = value;
+  } else {
+    console.warn(`Key ${key} does not exist in globalConfig.`);
+  }
+}
-export const updateGlobalSingleConfig = (key, value) => {
-  globalConfig[key] = value
-}
+export const updateGlobalSingleConfig = (key, value) => {
+  if (globalConfig.hasOwnProperty(key)) {
+    globalConfig[key] = value;
+  } else {
+    console.warn(`Key ${key} does not exist in globalConfig.`);
+  }
+}
diff --git a/packages/controller/src/index.js b/packages/controller/src/index.js
@@ -26,7 +26,7 @@ import usePage from './usePage'
 import useDataSource from './useDataSource'
 import useBreadcrumb from './useBreadcrumb'
 import useProperty from './useProperty'
-import { getGlobalConfig, setGlobalConfig } from './globalConfig'
+import { getGlobalConfig, setGlobalConfig, updateGlobalSingleConfig } from './globalConfig'
 import useNotify from './useNotify'
 import useData from './useData'
 import useMessage from './useMessage'
@@ -52,6 +52,7 @@ export {
   useProperty,
   getGlobalConfig,
   setGlobalConfig,
+  updateGlobalSingleConfig,
   useNotify,
   useData,
   useMessage,

diff --git a/packages/design-core/assets/changetheme.svg b/packages/design-core/assets/changetheme.svg
diff --git a/packages/design-core/config/addons.js b/packages/design-core/config/addons.js
@@ -24,6 +24,7 @@ import GenerateVue from '@opentiny/tiny-engine-toolbar-generate-vue'
 import Refresh from '@opentiny/tiny-engine-toolbar-refresh'
 import Collaboration from '@opentiny/tiny-engine-toolbar-collaboration'
 import Setting from '@opentiny/tiny-engine-toolbar-setting'
+import ChangeTheme from '@opentiny/tiny-engine-toolbar-changetheme'
 
 import Materials from '@opentiny/tiny-engine-plugin-materials'
 import Data from '@opentiny/tiny-engine-plugin-data'
@@ -42,7 +43,8 @@ import Props from '@opentiny/tiny-engine-setting-props'
 import Events from '@opentiny/tiny-engine-setting-events'
 import Styles from '@opentiny/tiny-engine-setting-styles'
 
-import '@opentiny/tiny-engine-theme'
+import '@opentiny/tiny-engine-theme-light'
+import '@opentiny/tiny-engine-theme-dark'
 
 const addons = {
   plugins: [Materials, Tree, Page, Block, Datasource, Bridge, I18n, Script, Data, Schema, Help, Robot],
@@ -60,7 +62,8 @@ const addons = {
     Fullscreen,
     Checkinout,
     Setting,
-    Lang
+    Lang,
+    ChangeTheme
   ],
   settings: [Props, Styles, Events]
 }

diff --git a/packages/design-core/package.json b/packages/design-core/package.json
@@ -66,6 +66,7 @@
     "@opentiny/tiny-engine-toolbar-fullscreen": "workspace:*",
     "@opentiny/tiny-engine-toolbar-generate-vue": "workspace:*",
     "@opentiny/tiny-engine-toolbar-lang": "workspace:*",
+    "@opentiny/tiny-engine-toolbar-changetheme": "workspace:*",
     "@opentiny/tiny-engine-toolbar-layout": "workspace:*",
     "@opentiny/tiny-engine-toolbar-logo": "workspace:*",
     "@opentiny/tiny-engine-toolbar-logout": "workspace:*",

diff --git a/packages/design-core/src/App.vue b/packages/design-core/src/App.vue
@@ -21,7 +21,15 @@
 import { reactive, ref, watch, onUnmounted } from 'vue'
 import { ConfigProvider as TinyConfigProvider } from '@opentiny/vue'
 import designSmbConfig from '@opentiny/vue-design-smb'
-import { useResource, useLayout, useEditorInfo, useModal, useApp, useNotify } from '@opentiny/tiny-engine-controller'
+import {
+  useResource,
+  useLayout,
+  useEditorInfo,
+  useModal,
+  useApp,
+  useNotify,
+  getGlobalConfig
+} from '@opentiny/tiny-engine-controller'
 import AppManage from '@opentiny/tiny-engine-plugin-page'
 import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
 import DesignToolbars from './DesignToolbars.vue'
@@ -67,6 +75,10 @@ export default {
     const { plugins } = layoutState
     const right = ref(null)
 
+    // 给根元素初始化主题色
+    const theme = getGlobalConfig().theme
+    document.documentElement.setAttribute('data-theme', theme)
+
     // 此处接收画布内部的错误和警告提示
     const { data } = useBroadcastChannel({ name: BROADCAST_CHANNEL.Notify })
 

diff --git a/packages/design-core/src/preview/src/App.vue b/packages/design-core/src/preview/src/App.vue
@@ -7,7 +7,8 @@
 import { useDebugSwitch } from './preview/debugSwitch'
 import Preview from './preview/Preview.vue'
 import Toolbar from './Toolbar.vue'
-import '@opentiny/tiny-engine-theme'
+import '@opentiny/tiny-engine-theme-light'
+import '@opentiny/tiny-engine-theme-dark'
 
 export default {
   components: {

diff --git a/packages/design-core/vite.config.js b/packages/design-core/vite.config.js
@@ -8,7 +8,6 @@ import nodeGlobalsPolyfillPlugin from '@esbuild-plugins/node-globals-polyfill'
 import nodeModulesPolyfillPlugin from '@esbuild-plugins/node-modules-polyfill'
 import nodePolyfill from 'rollup-plugin-polyfill-node'
 import esbuildCopy from 'esbuild-plugin-copy'
-import lowcodeConfig from './config/lowcode.config'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import { importmapPlugin } from './scripts/externalDeps'
 import visualizer from 'rollup-plugin-visualizer'
@@ -160,6 +159,7 @@ const devAlias = {
   '@opentiny/tiny-engine-toolbar-breadcrumb': path.resolve(__dirname, '../toolbars/breadcrumb/index.js'),
   '@opentiny/tiny-engine-toolbar-fullscreen': path.resolve(__dirname, '../toolbars/fullscreen/index.js'),
   '@opentiny/tiny-engine-toolbar-lang': path.resolve(__dirname, '../toolbars/lang/index.js'),
+  '@opentiny/tiny-engine-toolbar-changetheme': path.resolve(__dirname, '../toolbars/changetheme/index.js'),
   '@opentiny/tiny-engine-toolbar-layout': path.resolve(__dirname, '../toolbars/layout/index.js'),
   '@opentiny/tiny-engine-toolbar-checkinout': path.resolve(__dirname, '../toolbars/lock/index.js'),
   '@opentiny/tiny-engine-toolbar-logo': path.resolve(__dirname, '../toolbars/logo/index.js'),
@@ -178,20 +178,12 @@ const devAlias = {
   '@opentiny/tiny-engine-svgs': path.resolve(__dirname, '../svgs/index.js'),
   '@opentiny/tiny-engine-http': path.resolve(__dirname, '../http/src/index.js'),
   '@opentiny/tiny-engine-canvas': path.resolve(__dirname, '../canvas/src/index.js'),
-  '@opentiny/tiny-engine-theme': path.resolve(__dirname, `../theme/${lowcodeConfig.theme}/index.less`),
   '@opentiny/tiny-engine-utils': path.resolve(__dirname, '../utils/src/index.js'),
   '@opentiny/tiny-engine-webcomponent-core': path.resolve(__dirname, '../webcomponent/src/lib.js'),
   '@opentiny/tiny-engine-i18n-host': path.resolve(__dirname, '../i18n/src/lib.js'),
   '@opentiny/tiny-engine-builtin-component': path.resolve(__dirname, '../builtinComponent/index.js')
 }
 
-const prodAlias = {
-  '@opentiny/tiny-engine-theme': path.resolve(
-    __dirname,
-    `node_modules/@opentiny/tiny-engine-theme-${lowcodeConfig.theme}/dist/style.css`
-  )
-}
-
 const commonAlias = {
   '@opentiny/tiny-engine-app-addons': path.resolve(__dirname, './config/addons.js')
 }
@@ -249,7 +241,7 @@ export default defineConfig(({ command, mode }) => {
     ]
   } else {
     // command === 'build'
-    config.resolve.alias = { ...commonAlias, ...prodAlias }
+    config.resolve.alias = { ...commonAlias }
 
     monacoEditorPluginInstance = monacoEditorPlugin({ publicPath: monacoPublicPath[mode] })
 

diff --git a/packages/theme/dark/base.less b/packages/theme/dark/base.less
@@ -1,4 +1,4 @@
-:root {
+:root[data-theme='dark'] {
   // 灰阶
   --ti-lowcode-base-gray-0: #fff;
   --ti-lowcode-base-gray-10: #e6e6e6;

diff --git a/packages/theme/dark/block.less b/packages/theme/dark/block.less
@@ -1,4 +1,4 @@
-:root {
+:root[data-theme='dark'] {
   // 历史备份列表
   --ti-lowcode-component-block-history-list-item-border-color: var(--ti-lowcode-common-border-color-1); // 组件边框色
   // 组件 hover 背景 色

diff --git a/packages/theme/dark/bridge.less b/packages/theme/dark/bridge.less
@@ -1,11 +1,13 @@
-.plugin-panel {
-  // 资源管理
-  --ti-lowcode-bridge-list-color: #adb0b8;
-  --ti-lowcode-bridge-list-bg: #3c3c3c;
-  --ti-lowcode-birdge-editor-border-color: #262626;
-  --ti-lowcode-birdge-input-label-color: #adb0b8;
+:root[data-theme='dark'] {
+  .plugin-panel {
+    // 资源管理
+    --ti-lowcode-bridge-list-color: #adb0b8;
+    --ti-lowcode-bridge-list-bg: #3c3c3c;
+    --ti-lowcode-birdge-editor-border-color: #262626;
+    --ti-lowcode-birdge-input-label-color: #adb0b8;
 
-  // npm工具类中代码预览的主题
-  --ti-lowcode-birdge-code-preview-color: var(--ti-lowcode-base-gray-20);
-  --ti-lowcode-birdge-code-preview-bg-color: #262626;
+    // npm工具类中代码预览的主题
+    --ti-lowcode-birdge-code-preview-color: var(--ti-lowcode-base-gray-20);
+    --ti-lowcode-birdge-code-preview-bg-color: #262626;
+  }
-:root[data-theme='dark'] {
-  .plugin-panel {
-    // 资源管理
-    --ti-lowcode-bridge-list-color: #adb0b8;
-    --ti-lowcode-bridge-list-bg: #3c3c3c;
-    --ti-lowcode-birdge-editor-border-color: #262626;
-    --ti-lowcode-birdge-input-label-color: #adb0b8;
-
-  // npm工具类中代码预览的主题
-  --ti-lowcode-birdge-code-preview-color: var(--ti-lowcode-base-gray-20);
-  --ti-lowcode-birdge-code-preview-bg-color: #262626;
-    // npm工具类中代码预览的主题
-    --ti-lowcode-birdge-code-preview-color: var(--ti-lowcode-base-gray-20);
-    --ti-lowcode-birdge-code-preview-bg-color: #262626;
-  }
+:root[data-theme='dark'] {
+  .plugin-panel {
+    // 资源管理
+    --ti-lowcode-bridge-list-color: #adb0b8;
+    --ti-lowcode-bridge-list-bg: #3c3c3c;
+    --ti-lowcode-bridge-editor-border-color: #262626;
+    --ti-lowcode-bridge-input-label-color: #adb0b8;
+
+    // npm工具类中代码预览的主题
+    --ti-lowcode-bridge-code-preview-color: var(--ti-lowcode-base-gray-20);
+    --ti-lowcode-bridge-code-preview-bg-color: #262626;
+  }
-:root[data-theme='dark'] {
-  .plugin-panel {
-    // 资源管理
-    --ti-lowcode-bridge-list-color: #adb0b8;
-    --ti-lowcode-bridge-list-bg: #3c3c3c;
-    --ti-lowcode-birdge-editor-border-color: #262626;
-    --ti-lowcode-birdge-input-label-color: #adb0b8;
-
-  // npm工具类中代码预览的主题
-  --ti-lowcode-birdge-code-preview-color: var(--ti-lowcode-base-gray-20);
-  --ti-lowcode-birdge-code-preview-bg-color: #262626;
-    // npm工具类中代码预览的主题
-    --ti-lowcode-birdge-code-preview-color: var(--ti-lowcode-base-gray-20);
-    --ti-lowcode-birdge-code-preview-bg-color: #262626;
-  }
+:root[data-theme='dark'] {
+  .plugin-panel {
+    // 资源管理
+    --ti-lowcode-bridge-list-color: #adb0b8;
+    --ti-lowcode-bridge-list-bg: #3c3c3c;
+    --ti-lowcode-bridge-editor-border-color: #262626;
+    --ti-lowcode-bridge-input-label-color: #adb0b8;
+
+    // npm工具类中代码预览的主题
+    --ti-lowcode-bridge-code-preview-color: var(--ti-lowcode-base-gray-20);
+    --ti-lowcode-bridge-code-preview-bg-color: #262626;
+  }
 }
diff --git a/packages/theme/dark/button.less b/packages/theme/dark/button.less
@@ -1,34 +1,36 @@
-button {
-  --ti-lowcode-button-primary-color: #fff;
-  --ti-lowcode-button-primary-border-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-button-primary-bg-color: var(--ti-lowcode-common-primary-color);
+:root[data-theme='dark'] {
+  button {
+    --ti-lowcode-button-primary-color: #fff;
+    --ti-lowcode-button-primary-border-color: var(--ti-lowcode-common-primary-color);
+    --ti-lowcode-button-primary-bg-color: var(--ti-lowcode-common-primary-color);
 
-  --ti-lowcode-button-primary-hover-color: #fff;
-  --ti-lowcode-button-primary-hover-border-color: var(--ti-lowcode-common-primary-hover-color);
-  --ti-lowcode-button-primary-hover-bg-color: var(--ti-lowcode-common-primary-hover-color);
+    --ti-lowcode-button-primary-hover-color: #fff;
+    --ti-lowcode-button-primary-hover-border-color: var(--ti-lowcode-common-primary-hover-color);
+    --ti-lowcode-button-primary-hover-bg-color: var(--ti-lowcode-common-primary-hover-color);
 
-  // button info 字体颜色
-  --ti-lowcode-button-info-color: #fff;
-  --ti-lowcode-button-info-border-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-button-info-bg-color: var(--ti-lowcode-common-primary-color);
+    // button info 字体颜色
+    --ti-lowcode-button-info-color: #fff;
+    --ti-lowcode-button-info-border-color: var(--ti-lowcode-common-primary-color);
+    --ti-lowcode-button-info-bg-color: var(--ti-lowcode-common-primary-color);
 
-  // info 保存按钮 hover 背景色
-  --ti-lowcode-button-info-hover-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-button-info-hover-border-color: var(--ti-lowcode-common-primary-hover-color);
-  --ti-lowcode-button-info-hover-bg-color: var(--ti-lowcode-common-primary-hover-color);
+    // info 保存按钮 hover 背景色
+    --ti-lowcode-button-info-hover-color: var(--ti-lowcode-base-gray-0);
+    --ti-lowcode-button-info-hover-border-color: var(--ti-lowcode-common-primary-hover-color);
+    --ti-lowcode-button-info-hover-bg-color: var(--ti-lowcode-common-primary-hover-color);
 
-  // 默认按钮颜色
-  --ti-lowcode-button-default-color: var(--ti-lowcode-toolbar-breadcrumb-color);
-  --ti-lowcode-button-default-border-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-button-default-bg: transparent;
+    // 默认按钮颜色
+    --ti-lowcode-button-default-color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    --ti-lowcode-button-default-border-color: var(--ti-lowcode-common-secondary-text-color);
+    --ti-lowcode-button-default-bg: transparent;
 
-  // 默认按钮 hover 颜色
-  --ti-lowcode-button-default-hover-color: #fff;
-  --ti-lowcode-button-default-hover-border-color: #6b6b6b;
-  --ti-lowcode-button-default-hover-bg: #6b6b6b;
+    // 默认按钮 hover 颜色
+    --ti-lowcode-button-default-hover-color: #fff;
+    --ti-lowcode-button-default-hover-border-color: #6b6b6b;
+    --ti-lowcode-button-default-hover-bg: #6b6b6b;
 
-  // 默认按钮禁用颜色
-  --ti-lowcode-button-default-disabled-color: #4a4b4e;
-  --ti-lowcode-button-default-disabled-border-color: transparent;
-  --ti-lowcode-button-default-disabled-bg: var(--ti-lowcode-base-bg-1);
+    // 默认按钮禁用颜色
+    --ti-lowcode-button-default-disabled-color: #4a4b4e;
+    --ti-lowcode-button-default-disabled-border-color: transparent;
+    --ti-lowcode-button-default-disabled-bg: var(--ti-lowcode-base-bg-1);
+  }
 }
diff --git a/packages/theme/dark/canvas.less b/packages/theme/dark/canvas.less
@@ -1,28 +1,30 @@
-#canvas-wrap {
-  --ti-lowcode-canvas-rect-border-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-canvas-hover-line-in-bg-color: rgba(0, 255, 0, 0.1);
-  --ti-lowcode-canvas-hover-line-forbid-bg-color: var(--ti-lowcode-base-error-color);
-  --ti-lowcode-canvas-hover-line-in-forbid-bg-color: rgba(242, 48, 48, 0.3);
-  --ti-lowcode-canvas-choose-slot-border-color: var(--ti-lowcode-base-text-color-2);
-  --ti-lowcode-canvas-choose-slot-color: var(--ti-lowcode-base-text-color-2);
-  --ti-lowcode-canvas-corner-mark-left-color: var(--ti-lowcode-base-text-color-2);
-  --ti-lowcode-canvas-corner-mark-bottom-right-color: var(--ti-lowcode-base-text-color-3);
-  --ti-lowcode-canvas-corner-mark-bottom-right-border-color: #c2c2c2;
-  --ti-lowcode-canvas-corner-mark-bottom-right-bg-color: #f5f5f5;
-  --ti-lowcode-canvas-corner-mark-right-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-canvas-corner-mark-right-bg-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-canvas-select-corner-mark-left-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-canvas-select-corner-mark-left-bg-color: var(--ti-lowcode-base-primary-color-2);
+:root[data-theme='dark'] {
+  #canvas-wrap {
+    --ti-lowcode-canvas-rect-border-color: var(--ti-lowcode-base-primary-color-2);
+    --ti-lowcode-canvas-hover-line-in-bg-color: rgba(0, 255, 0, 0.1);
+    --ti-lowcode-canvas-hover-line-forbid-bg-color: var(--ti-lowcode-base-error-color);
+    --ti-lowcode-canvas-hover-line-in-forbid-bg-color: rgba(242, 48, 48, 0.3);
+    --ti-lowcode-canvas-choose-slot-border-color: var(--ti-lowcode-base-text-color-2);
+    --ti-lowcode-canvas-choose-slot-color: var(--ti-lowcode-base-text-color-2);
+    --ti-lowcode-canvas-corner-mark-left-color: var(--ti-lowcode-base-text-color-2);
+    --ti-lowcode-canvas-corner-mark-bottom-right-color: var(--ti-lowcode-base-text-color-3);
+    --ti-lowcode-canvas-corner-mark-bottom-right-border-color: #c2c2c2;
+    --ti-lowcode-canvas-corner-mark-bottom-right-bg-color: #f5f5f5;
+    --ti-lowcode-canvas-corner-mark-right-color: var(--ti-lowcode-base-gray-0);
+    --ti-lowcode-canvas-corner-mark-right-bg-color: var(--ti-lowcode-base-primary-color-2);
+    --ti-lowcode-canvas-select-corner-mark-left-color: var(--ti-lowcode-base-gray-0);
+    --ti-lowcode-canvas-select-corner-mark-left-bg-color: var(--ti-lowcode-base-primary-color-2);
 
-  --ti-lowcode-canvas-footer-border-top-color: transparent; // canvas 底部面包屑 边框色
-  --ti-lowcode-canvas-tab-handle-bg: var(--ti-lowcode-common-component-bg); // canvas 宽度拖动手柄 背景色
-  --ti-lowcode-canvas-tab-handle-hover-bg: var(--ti-lowcode-common-primary-color); // canvas 宽度拖动手柄 hover 背景色
-  --ti-lowcode-canvas-tab-handle-color: var(
-    --ti-lowcode-common-secondary-text-color
-  ); // canvas 宽度拖动手柄 两条竖线颜色
-  --ti-lowcode-canvas-menu-bg: var(--ti-lowcode-common-component-hover-bg); // canvas 右键菜单背景
-  --ti-lowcode-canvas-menu-item-color: #adb0b8; // 右键菜单文字颜色
-  --ti-lowcode-canvas-menu-item-hover-bg-color: #5e5e5e;
-  --ti-lowcode-canvas-menu-border-color: var(--ti-lowcode-common-border-color-2);
-  --ti-lowcode-canvas-menu-item-disabled-color: var(--ti-lowcode-base-text-color-3);
+    --ti-lowcode-canvas-footer-border-top-color: transparent; // canvas 底部面包屑 边框色
+    --ti-lowcode-canvas-tab-handle-bg: var(--ti-lowcode-common-component-bg); // canvas 宽度拖动手柄 背景色
+    --ti-lowcode-canvas-tab-handle-hover-bg: var(--ti-lowcode-common-primary-color); // canvas 宽度拖动手柄 hover 背景色
+    --ti-lowcode-canvas-tab-handle-color: var(
+      --ti-lowcode-common-secondary-text-color
+    ); // canvas 宽度拖动手柄 两条竖线颜色
+    --ti-lowcode-canvas-menu-bg: var(--ti-lowcode-common-component-hover-bg); // canvas 右键菜单背景
+    --ti-lowcode-canvas-menu-item-color: #adb0b8; // 右键菜单文字颜色
+    --ti-lowcode-canvas-menu-item-hover-bg-color: #5e5e5e;
+    --ti-lowcode-canvas-menu-border-color: var(--ti-lowcode-common-border-color-2);
+    --ti-lowcode-canvas-menu-item-disabled-color: var(--ti-lowcode-base-text-color-3);
+  }
 }
diff --git a/packages/theme/dark/datasource.less b/packages/theme/dark/datasource.less
@@ -1,4 +1,4 @@
-:root {
+:root[data-theme='dark'] {
   --ti-lowcode-datasource-toolbar-icon-color: var(--ti-lowcode-common-primary-text-color);
   --ti-lowcode-datasource-tabs-border-color: #313131;
   --ti-lowcode-datasource-toolbar-breadcrumb-color: var(--ti-lowcode-base-gray-20);