diff --git a/designer-demo/engine.config.js b/designer-demo/engine.config.js index fa2b077e0..fa308f9bc 100644 --- a/designer-demo/engine.config.js +++ b/designer-demo/engine.config.js @@ -1,6 +1,6 @@ export default { id: 'engine.config', - theme: import.meta.env.VITE_THEME || 'light', + theme: 'light', material: ['/mock/bundle.json'], scripts: [], styles: [] diff --git a/designer-demo/registry.js b/designer-demo/registry.js index 2e2fcacb1..7875dd57c 100644 --- a/designer-demo/registry.js +++ b/designer-demo/registry.js @@ -21,6 +21,7 @@ import { Redoundo, Save, Clean, + Theme, Preview, GenerateCode, Refresh, @@ -64,7 +65,7 @@ export default { left: ['engine.toolbars.breadcrumb', 'engine.toolbars.lock', 'engine.toolbars.logo'], center: ['engine.toolbars.media'], right: [ - ['engine.toolbars.redoundo', 'engine.toolbars.clean'], + ['engine.toolbars.theme', 'engine.toolbars.redoundo', 'engine.toolbars.clean'], ['engine.toolbars.preview'], ['engine.toolbars.generate-code', 'engine.toolbars.save'] ], @@ -72,7 +73,8 @@ export default { ['engine.toolbars.collaboration'], ['engine.toolbars.refresh', 'engine.toolbars.fullscreen'], ['engine.toolbars.lang'], - ['engine.toolbars.viewSetting'] + ['engine.toolbars.viewSetting'], + ['engine.toolbars.theme'] ] } } @@ -86,6 +88,7 @@ export default { } ], toolbars: [ + Theme, Logo, Breadcrumb, Lock, diff --git a/jsconfig.json b/jsconfig.json index 96b5fe1aa..9782508d4 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -31,6 +31,7 @@ "@opentiny/tiny-engine-toolbar-preview": ["packages/toolbars/preview/index"], "@opentiny/tiny-engine-toolbar-generate-code": ["packages/toolbars/generate-code/index"], "@opentiny/tiny-engine-toolbar-clean": ["packages/toolbars/clean/index"], + "@opentiny/tiny-engine-toolbar-theme": ["packages/toolbars/theme/index"], "@opentiny/tiny-engine-toolbar-save": ["packages/toolbars/save/index"], "tiny-engine-canvas": ["packages/canvas/index"], "@opentiny/tiny-engine-theme-dark": ["packages/theme/dark/index.less"], @@ -59,6 +60,7 @@ "@opentiny/tiny-engine-toolbar-media/*": ["packages/toolbars/media/*"], "@opentiny/tiny-engine-toolbar-preview/*": ["packages/toolbars/preview/*"], "@opentiny/tiny-engine-toolbar-clean/*": ["packages/toolbars/clean/*"], + "@opentiny/tiny-engine-toolbar-theme/*": ["packages/toolbars/theme/*"], "@opentiny/tiny-engine-toolbar-save/*": ["packages/toolbars/save/*"], "@opentiny/tiny-engine-theme-dark/*": ["packages/theme/dark/*"], "@opentiny/tiny-engine-theme-light/*": ["packages/theme/light/*"], diff --git a/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js b/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js index 067955648..d91822aaa 100644 --- a/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js +++ b/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js @@ -47,6 +47,7 @@ const getDevAlias = (useSourceAlias) => { '@opentiny/tiny-engine-toolbar-refresh': path.resolve(basePath, 'packages/toolbars/refresh/index.js'), '@opentiny/tiny-engine-toolbar-redoundo': path.resolve(basePath, 'packages/toolbars/redoundo/index.js'), '@opentiny/tiny-engine-toolbar-clean': path.resolve(basePath, 'packages/toolbars/clean/index.js'), + '@opentiny/tiny-engine-toolbar-theme': path.resolve(basePath, 'packages/toolbars/theme/index.js'), '@opentiny/tiny-engine-toolbar-save': path.resolve(basePath, 'packages/toolbars/save/index.js'), '@opentiny/tiny-engine-toolbar-setting': path.resolve(basePath, 'packages/toolbars/setting/index.js'), '@opentiny/tiny-engine-toolbar-collaboration': path.resolve(basePath, 'packages/toolbars/collaboration/index.js'), diff --git a/packages/common/component/ToolbarBase.vue b/packages/common/component/ToolbarBase.vue index 1272cb4d8..f21f03262 100644 --- a/packages/common/component/ToolbarBase.vue +++ b/packages/common/component/ToolbarBase.vue @@ -6,8 +6,10 @@ - {{ state.content }} + {{ state.content }} + + + diff --git a/packages/toolbars/theme/src/composable/useTheme.js b/packages/toolbars/theme/src/composable/useTheme.js new file mode 100644 index 000000000..4d8a04581 --- /dev/null +++ b/packages/toolbars/theme/src/composable/useTheme.js @@ -0,0 +1,72 @@ +/** + * 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. + * + */ + +import { reactive } from 'vue' +import { getMetaApi, getMergeMeta, META_SERVICE } from '@opentiny/tiny-engine-meta-register' +import { setGlobalMonacoEditorTheme } from '@opentiny/tiny-engine-common' + +const THEME_DATA = { + LIGHT: 'light', + LIGHT_LABEL: '浅色模式', + DARK: 'dark', + DARK_LABEL: '深色模式' +} + +const themeState = reactive({ + theme: THEME_DATA.LIGHT, + themeLabel: THEME_DATA.LIGHT_LABEL, + themeOptions: [ + { + label: THEME_DATA.LIGHT_LABEL, + value: THEME_DATA.LIGHT + }, + { + label: THEME_DATA.DARK_LABEL, + value: THEME_DATA.DARK + } + ] +}) + +const initThemeState = () => { + const appId = getMetaApi(META_SERVICE.GlobalService).getBaseInfo().id + + themeState.theme = + localStorage.getItem(`tiny-engine-theme-${appId}`) || getMergeMeta('engine.config').theme || THEME_DATA.LIGHT + themeState.themeLabel = themeState.theme === THEME_DATA.LIGHT ? THEME_DATA.LIGHT_LABEL : THEME_DATA.DARK_LABEL + + return themeState +} + +const themeChange = (data) => { + if (data) { + themeState.theme = data === THEME_DATA.LIGHT_LABEL ? THEME_DATA.LIGHT : THEME_DATA.DARK + } else { + themeState.theme = themeState.theme === THEME_DATA.LIGHT ? THEME_DATA.DARK : THEME_DATA.LIGHT + } + + themeState.themeLabel = themeState.theme === THEME_DATA.LIGHT ? THEME_DATA.LIGHT_LABEL : THEME_DATA.DARK_LABEL + document.documentElement.setAttribute('data-theme', themeState.theme) + + const appId = getMetaApi(META_SERVICE.GlobalService).getBaseInfo().id + const editorTheme = themeState.theme?.includes('dark') ? 'vs-dark' : 'vs' + localStorage.setItem(`tiny-engine-theme-${appId}`, themeState.theme) + setGlobalMonacoEditorTheme(editorTheme) +} + +export default () => { + return { + THEME_DATA, + themeState, + initThemeState, + themeChange + } +} diff --git a/packages/toolbars/theme/src/styles/vars.less b/packages/toolbars/theme/src/styles/vars.less new file mode 100644 index 000000000..421a794ab --- /dev/null +++ b/packages/toolbars/theme/src/styles/vars.less @@ -0,0 +1,3 @@ +:root { + --te-toolbar-theme-radio-title: var(--te-common-text-secondary); +} diff --git a/packages/toolbars/theme/vite.config.js b/packages/toolbars/theme/vite.config.js new file mode 100644 index 000000000..eb90d7dcf --- /dev/null +++ b/packages/toolbars/theme/vite.config.js @@ -0,0 +1,35 @@ +/** + * 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. + * + */ + +import { defineConfig } from 'vite' +import path from 'path' +import vue from '@vitejs/plugin-vue' +import vueJsx from '@vitejs/plugin-vue-jsx' +import generateComment from '@opentiny/tiny-engine-vite-plugin-meta-comments' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [generateComment(), vue(), vueJsx()], + publicDir: false, + resolve: {}, + build: { + lib: { + entry: path.resolve(__dirname, './index.js'), + name: 'toolbar-theme', + fileName: () => 'index.js', + formats: ['es'] + }, + rollupOptions: { + external: ['vue', /@opentiny\/tiny-engine.*/, /@opentiny\/vue.*/] + } + } +})