From 942b5a491296a480c460f0e3392476815db4631f Mon Sep 17 00:00:00 2001 From: wenmine Date: Tue, 30 Apr 2024 00:06:05 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(theme):=20=E6=B7=BB=E5=8A=A0=E5=88=87?= =?UTF-8?q?=E6=8D=A2=E4=B8=BB=E9=A2=98=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- jsconfig.json | 2 + mockServer/src/database/pages.db | 2 +- packages/design-core/config/addons.js | 7 +- packages/design-core/package.json | 1 + packages/design-core/src/App.vue | 14 ++- packages/design-core/src/preview/src/App.vue | 3 +- packages/design-core/vite.config.js | 12 +-- packages/theme/dark/base.less | 2 +- packages/theme/dark/block.less | 2 +- packages/theme/dark/bridge.less | 20 ++-- packages/theme/dark/button.less | 56 +++++------ packages/theme/dark/canvas.less | 54 +++++------ packages/theme/dark/datasource.less | 2 +- packages/theme/dark/events.less | 68 +++++++------- packages/theme/dark/gpt-dialog.less | 98 ++++++++++---------- packages/theme/dark/help.less | 30 +++--- packages/theme/dark/i18n.less | 2 +- packages/theme/dark/life-cycles.less | 2 +- packages/theme/dark/materials.less | 2 +- packages/theme/dark/metaComponent.less | 2 +- packages/theme/dark/pageManage.less | 2 +- packages/theme/dark/plugin-js.less | 14 +-- packages/theme/dark/radio.less | 36 +++---- packages/theme/dark/setting-style.less | 2 +- packages/theme/dark/settings.less | 82 ++++++++-------- packages/theme/dark/tiny-checkbox.less | 48 +++++----- packages/theme/dark/tiny-collapse.less | 14 +-- packages/theme/dark/tiny-dialog-box.less | 14 +-- packages/theme/dark/tiny-grid.less | 48 +++++----- packages/theme/dark/tiny-input.less | 46 ++++----- packages/theme/dark/tiny-modal.less | 2 +- packages/theme/dark/tiny-notify.less | 10 +- packages/theme/dark/tiny-numeric.less | 20 ++-- packages/theme/dark/tiny-search.less | 42 +++++---- packages/theme/dark/tiny-switch.less | 10 +- packages/theme/dark/tiny-tabs.less | 10 +- packages/theme/dark/toolbar.less | 28 +++--- packages/theme/dark/tree.less | 14 +-- packages/theme/dark/tutorial.less | 10 +- packages/theme/dark/variable.less | 2 +- packages/theme/light/base.less | 2 +- packages/theme/light/block.less | 2 +- packages/theme/light/datasource.less | 2 +- packages/theme/light/i18n.less | 2 +- packages/theme/light/life-cycles.less | 2 +- packages/theme/light/materials.less | 2 +- packages/theme/light/metaComponent.less | 2 +- packages/theme/light/pageManage.less | 2 +- packages/theme/light/plugin-js.less | 14 +-- packages/theme/light/radio.less | 12 ++- packages/theme/light/setting-style.less | 2 +- packages/theme/light/settings.less | 79 ++++++++-------- packages/theme/light/tiny-collapse.less | 14 +-- packages/theme/light/tiny-dialog-box.less | 14 +-- packages/theme/light/tiny-grid.less | 48 +++++----- packages/theme/light/tiny-input.less | 46 ++++----- packages/theme/light/tiny-modal.less | 10 +- packages/theme/light/tiny-notify.less | 10 +- packages/theme/light/tiny-numeric.less | 8 +- packages/theme/light/tiny-search.less | 24 ++--- packages/theme/light/tiny-switch.less | 10 +- packages/theme/light/toolbar.less | 28 +++--- packages/theme/light/tree.less | 14 +-- packages/theme/light/tutorial.less | 10 +- packages/theme/light/variable.less | 2 +- packages/toolbars/changetheme/index.js | 21 +++++ packages/toolbars/changetheme/package.json | 39 ++++++++ packages/toolbars/changetheme/src/Main.vue | 50 ++++++++++ packages/toolbars/changetheme/vite.config.js | 33 +++++++ 69 files changed, 781 insertions(+), 558 deletions(-) create mode 100644 packages/toolbars/changetheme/index.js create mode 100644 packages/toolbars/changetheme/package.json create mode 100644 packages/toolbars/changetheme/src/Main.vue create mode 100644 packages/toolbars/changetheme/vite.config.js diff --git a/jsconfig.json b/jsconfig.json index c366326a1..4b646f24c 100644 --- 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 index 103c88610..f99cd3982 100644 --- a/mockServer/src/database/pages.db +++ b/mockServer/src/database/pages.db @@ -1,4 +1,4 @@ -{"name":"DemoPage","id":"5bhD7p5FUsUOTFRN","app":"918","route":"demopage","page_content":{"state":{},"methods":{},"componentName":"Page","css":"","props":{},"lifeCycles":{},"children":[{"componentName":"div","props":{},"id":"85375559","children":[{"componentName":"TinySwitch","props":{"modelValue":""},"id":"33433546"}]}],"dataSource":{"list":[]},"utils":[],"bridge":[],"inputs":[],"outputs":[],"fileName":"DemoPage"},"tenant":1,"isBody":false,"parentId":"0","group":"staticPages","depth":0,"isPage":true,"isDefault":false,"occupier":{"id":86,"username":"开发者","email":"developer@lowcode.com","resetPasswordToken":"developer","confirmationToken":"dfb2c162-351f-4f44-ad5f-8998","is_admin":true},"isHome":false,"message":"Page auto save","_id":"5bhD7p5FUsUOTFRN"} +{"name":"DemoPage","id":"5bhD7p5FUsUOTFRN","app":"918","route":"demopage","page_content":{"state":{},"methods":{},"componentName":"Page","css":"","props":{},"lifeCycles":{},"children":[{"componentName":"div","props":{},"id":"85375559","children":[{"componentName":"TinySwitch","props":{"modelValue":"","id":{"type":"JSExpression","value":"this.utils.test()"}},"id":"33433546"}]},{"componentName":"Text","props":{"text":"TinyEngine 前端可视化设计器，为设计器开发者提供定制服务，在线构建出自己专属的设计器。"},"id":"23433522"},{"componentName":"TinyTabs","props":{"modelValue":"first"},"children":[{"componentName":"TinyTabItem","props":{"title":"标签页1","name":"first"},"children":[{"componentName":"div","props":{"style":"margin:10px 0 0 30px"},"id":"1534b294"}],"id":"94515f57"},{"componentName":"TinyTabItem","props":{"title":"标签页2","name":"second"},"children":[{"componentName":"div","props":{"style":"margin:10px 0 0 30px"},"id":"64345263"}],"id":"1314f465"}],"id":"11215242"}],"dataSource":{"list":[]},"utils":[],"bridge":[],"inputs":[],"outputs":[],"fileName":"DemoPage"},"tenant":1,"isBody":false,"parentId":"0","group":"staticPages","depth":0,"isPage":true,"isDefault":false,"occupier":{"id":86,"username":"开发者","email":"developer@lowcode.com","resetPasswordToken":"developer","confirmationToken":"dfb2c162-351f-4f44-ad5f-8998","is_admin":true},"isHome":false,"message":"Page auto save","_id":"5bhD7p5FUsUOTFRN"} {"name":"createVm","id":"NTJ4MjvqoVj8OVsc","app":"918","route":"createVm","page_content":{"state":{"dataDisk":[1,2,3]},"methods":{},"componentName":"Page","css":"body {\r\n background-color:#eef0f5 ;\r\n margin-bottom: 80px;\r\n}","props":{},"children":[{"componentName":"div","props":{"style":"padding-bottom: 10px; padding-top: 10px;"},"id":"2b2cabf0","children":[{"componentName":"TinyTimeLine","props":{"active":"2","data":[{"name":"基础配置"},{"name":"网络配置"},{"name":"高级配置"},{"name":"确认配置"}],"horizontal":true,"style":"border-radius: 0px;"},"id":"dd764b17"}]},{"componentName":"div","props":{"style":"border-width: 1px; border-style: solid; border-radius: 4px; border-color: #fff; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px; background-color: #fff; margin-bottom: 10px;"},"id":"30c94cc8","children":[{"componentName":"TinyForm","props":{"labelWidth":"80px","labelPosition":"top","inline":false,"label-position":"left ","label-width":"150px","style":"border-radius: 0px;"},"children":[{"componentName":"TinyFormItem","props":{"label":"计费模式"},"children":[{"componentName":"TinyButtonGroup","props":{"data":[{"text":"包年/包月","value":"1"},{"text":"按需计费","value":"2"}],"modelValue":"1"},"id":"a8d84361"}],"id":"9f39f3e7"},{"componentName":"TinyFormItem","props":{"label":"区域"},"children":[{"componentName":"TinyButtonGroup","props":{"data":[{"text":"乌兰察布二零一","value":"1"}],"modelValue":"1","style":"border-radius: 0px; margin-right: 10px;"},"id":"c97ccd99"},{"componentName":"Text","props":{"text":"温馨提示：页面左上角切换区域","style":"background-color: [object Event]; color: #8a8e99; font-size: 12px;"},"id":"20923497"},{"componentName":"Text","props":{"text":"不同区域的云服务产品之间内网互不相通；请就近选择靠近您业务的区域，可减少网络时延，提高访问速度","style":"display: block; color: #8a8e99; border-radius: 0px; font-size: 12px;"},"id":"54780a26"}],"id":"4966384d"},{"componentName":"TinyFormItem","props":{"label":"可用区","style":"border-radius: 0px;"},"children":[{"componentName":"TinyButtonGroup","props":{"data":[{"text":"可用区1","value":"1"},{"text":"可用区2","value":"2"},{"text":"可用区3","value":"3"}],"modelValue":"1"},"id":"6184481b"}],"id":"690837bf"}],"id":"b6a425d4"}]},{"componentName":"div","props":{"style":"border-width: 1px; border-style: solid; border-radius: 4px; border-color: #fff; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px; background-color: #fff; margin-bottom: 10px;"},"children":[{"componentName":"TinyForm","props":{"labelWidth":"80px","labelPosition":"top","inline":false,"label-position":"left ","label-width":"150px","style":"border-radius: 0px;"},"children":[{"componentName":"TinyFormItem","props":{"label":"CPU架构"},"children":[{"componentName":"TinyButtonGroup","props":{"data":[{"text":"x86计算","value":"1"},{"text":"鲲鹏计算","value":"2"}],"modelValue":"1"},"id":"7d33ced7"}],"id":"05ed5a79"},{"componentName":"TinyFormItem","props":{"label":"区域"},"children":[{"componentName":"div","props":{"style":"display: flex; justify-content: flex-start; align-items: center;"},"id":"606edf78","children":[{"componentName":"div","props":{"style":"display: flex; align-items: center; margin-right: 10px;"},"id":"f3f98246","children":[{"componentName":"Text","props":{"text":"vCPUs","style":"width: 80px;"},"id":"c287437e"},{"componentName":"TinySelect","props":{"modelValue":"","placeholder":"请选择","options":[{"value":"1","label":"黄金糕"},{"value":"2","label":"双皮奶"}]},"id":"4c43286b"}]},{"componentName":"div","props":{"style":"display: flex; align-items: center; margin-right: 10px;"},"children":[{"componentName":"Text","props":{"text":"内存","style":"width: 80px; border-radius: 0px;"},"id":"38b8fa1f"},{"componentName":"TinySelect","props":{"modelValue":"","placeholder":"请选择","options":[{"value":"1","label":"黄金糕"},{"value":"2","label":"双皮奶"}]},"id":"cd33328e"}],"id":"2b2c678f"},{"componentName":"div","props":{"style":"display: flex; align-items: center;"},"children":[{"componentName":"Text","props":{"text":"规格名称","style":"width: 80px;"},"id":"d3eb6352"},{"componentName":"TinySearch","props":{"modelValue":"","placeholder":"输入关键词"},"id":"21cb9282"}],"id":"b8e0f35c"}]},{"componentName":"div","props":{"style":"border-radius: 0px;"},"id":"5000c83e","children":[{"componentName":"TinyButtonGroup","props":{"data":[{"text":"通用计算型","value":"1"},{"text":"通用计算增强型","value":"2"},{"text":"内存优化型","value":"3"},{"text":"内存优化型","value":"4"},{"text":"磁盘增强型","value":"5"},{"text":"超高I/O型","value":"6"},{"text":"GPU加速型","value":"7"}],"modelValue":"1","style":"border-radius: 0px; margin-top: 12px;"},"id":"b8724703"},{"componentName":"TinyGrid","props":{"editConfig":{"trigger":"click","mode":"cell","showStatus":true},"columns":[{"type":"radio","width":60},{"field":"employees","title":"规格名称"},{"field":"created_date","title":"vCPUs | 内存(GiB)","sortable":true},{"field":"city","title":"CPU","sortable":true},{"title":"基准 / 最大带宽\t","sortable":true},{"title":"内网收发包","sortable":true}],"data":[{"id":"1","name":"GFD科技有限公司","city":"福州","employees":800,"created_date":"2014-04-30 00:56:00","boole":false},{"id":"2","name":"WWW科技有限公司","city":"深圳","employees":300,"created_date":"2016-07-08 12:36:22","boole":true}],"style":"margin-top: 12px; border-radius: 0px;","auto-resize":true},"id":"77701c25"},{"componentName":"div","props":{"style":"margin-top: 12px; border-radius: 0px;"},"id":"3339838b","children":[{"componentName":"Text","props":{"text":"当前规格","style":"width: 150px; display: inline-block;"},"id":"203b012b"},{"componentName":"Text","props":{"text":"通用计算型 | Si2.large.2 | 2vCPUs | 4 GiB","style":"font-weight: 700;"},"id":"87723f52"}]}]}],"id":"657fb2fc"}],"id":"d19b15cf"}],"id":"9991228b"},{"componentName":"div","props":{"style":"border-width: 1px; border-style: solid; border-radius: 4px; border-color: #fff; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px; background-color: #fff; margin-bottom: 10px;"},"children":[{"componentName":"TinyForm","props":{"labelWidth":"80px","labelPosition":"top","inline":false,"label-position":"left ","label-width":"150px","style":"border-radius: 0px;"},"children":[{"componentName":"TinyFormItem","props":{"label":"镜像","style":"border-radius: 0px;"},"children":[{"componentName":"TinyButtonGroup","props":{"data":[{"text":"公共镜像","value":"1"},{"text":"私有镜像","value":"2"},{"text":"共享镜像","value":"3"}],"modelValue":"1"},"id":"922b14cb"},{"componentName":"div","props":{"style":"display: flex; margin-top: 12px; border-radius: 0px;"},"id":"6b679524","children":[{"componentName":"TinySelect","props":{"modelValue":"","placeholder":"请选择","options":[{"value":"1","label":"黄金糕"},{"value":"2","label":"双皮奶"}],"style":"width: 170px; margin-right: 10px;"},"id":"4851fff7"},{"componentName":"TinySelect","props":{"modelValue":"","placeholder":"请选择","options":[{"value":"1","label":"黄金糕"},{"value":"2","label":"双皮奶"}],"style":"width: 340px;"},"id":"a7183eb7"}]},{"componentName":"div","props":{"style":"margin-top: 12px;"},"id":"57aee314","children":[{"componentName":"Text","props":{"text":"请注意操作系统的语言类型。","style":"color: #e37d29;"},"id":"56d36c27"}]}],"id":"e3b02436"}],"id":"59aebf2b"}],"id":"87ff7b99"},{"componentName":"div","props":{"style":"border-width: 1px; border-style: solid; border-radius: 4px; border-color: #fff; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px; background-color: #fff; margin-bottom: 10px;"},"children":[{"componentName":"TinyForm","props":{"labelWidth":"80px","labelPosition":"top","inline":false,"label-position":"left ","label-width":"150px","style":"border-radius: 0px;"},"children":[{"componentName":"TinyFormItem","props":{"label":"系统盘","style":"border-radius: 0px;"},"children":[{"componentName":"div","props":{"style":"display: flex;"},"id":"cddba5b8","children":[{"componentName":"TinySelect","props":{"modelValue":"","placeholder":"请选择","options":[{"value":"1","label":"黄金糕"},{"value":"2","label":"双皮奶"}],"style":"width: 200px; margin-right: 10px;"},"id":"a97fbe15"},{"componentName":"TinyInput","props":{"placeholder":"请输入","modelValue":"","style":"width: 120px; margin-right: 10px;"},"id":"1cde4c0f"},{"componentName":"Text","props":{"text":"GiB \nIOPS上限240，IOPS突发上限5,000","style":"color: #575d6c; font-size: 12px;"},"id":"2815d82d"}]}],"id":"50239a3a"}],"id":"e8582986"},{"componentName":"TinyForm","props":{"labelWidth":"80px","labelPosition":"top","inline":false,"label-position":"left ","label-width":"150px","style":"border-radius: 0px;"},"children":[{"componentName":"TinyFormItem","props":{"label":"数据盘","style":"border-radius: 0px;"},"children":[{"componentName":"div","props":{"style":"margin-top: 12px; display: flex;"},"id":"728c9825","children":[{"componentName":"Icon","props":{"style":"margin-right: 10px; width: 16px; height: 16px;","name":"IconPanelMini"},"id":"fded6930"},{"componentName":"TinySelect","props":{"modelValue":"","placeholder":"请选择","options":[{"value":"1","label":"黄金糕"},{"value":"2","label":"双皮奶"}],"style":"width: 200px; margin-right: 10px;"},"id":"62734e3f"},{"componentName":"TinyInput","props":{"placeholder":"请输入","modelValue":"","style":"width: 120px; margin-right: 10px;"},"id":"667c7926"},{"componentName":"Text","props":{"text":"GiB \nIOPS上限600，IOPS突发上限5,000","style":"color: #575d6c; font-size: 12px; margin-right: 10px;"},"id":"e7bc36d6"},{"componentName":"TinyInput","props":{"placeholder":"请输入","modelValue":"","style":"width: 120px;"},"id":"1bd56dc0"}],"loop":{"type":"JSExpression","value":"this.state.dataDisk"}},{"componentName":"div","props":{"style":"display: flex; margin-top: 12px; border-radius: 0px;"},"children":[{"componentName":"Icon","props":{"name":"IconPlus","style":"width: 16px; height: 16px; margin-right: 10px;"},"id":"65c89f2b"},{"componentName":"Text","props":{"text":"增加一块数据盘","style":"font-size: 12px; border-radius: 0px; margin-right: 10px;"},"id":"cb344071"},{"componentName":"Text","props":{"text":"您还可以挂载 21 块磁盘（云硬盘）","style":"color: #8a8e99; font-size: 12px;"},"id":"80eea996"}],"id":"e9e530ab"}],"id":"078e03ef"}],"id":"ccef886e"}],"id":"0fb7bd74"},{"componentName":"div","props":{"style":"border-width: 1px; border-style: solid; border-color: #ffffff; padding-top: 10px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px; background-color: #fff; position: fixed; inset: auto 0% 0% 0%; height: 80px; line-height: 80px; border-radius: 0px;"},"children":[{"componentName":"TinyForm","props":{"labelWidth":"80px","labelPosition":"top","inline":false,"label-position":"left ","label-width":"150px","style":"border-radius: 0px;"},"children":[],"id":"21ed4475"},{"componentName":"TinyRow","props":{"style":"border-radius: 0px; height: 100%;"},"children":[{"componentName":"TinyCol","props":{"span":"8"},"id":"b9d051a5","children":[{"componentName":"TinyRow","props":{"style":"border-radius: 0px;"},"children":[{"componentName":"TinyCol","props":{"span":"5","style":"display: flex;"},"id":"02352776","children":[{"componentName":"Text","props":{"text":"购买量","style":"margin-right: 10px;"},"id":"0cd9ed5c"},{"componentName":"TinyInput","props":{"placeholder":"请输入","modelValue":"","style":"width: 120px; margin-right: 10px;"},"id":"2f9cf442"},{"componentName":"Text","props":{"text":"台"},"id":"facd4481"}]},{"componentName":"TinyCol","props":{"span":"7"},"id":"82b6c659","children":[{"componentName":"div","props":{},"id":"9cd65874","children":[{"componentName":"Text","props":{"text":"配置费用","style":"font-size: 12px;"},"id":"b5a0a0da"},{"componentName":"Text","props":{"text":"¥1.5776","style":"padding-left: 10px; padding-right: 10px; color: #de504e;"},"id":"d9464214"},{"componentName":"Text","props":{"text":"/小时","style":"font-size: 12px;"},"id":"af7cc5e6"}]},{"componentName":"div","props":{},"id":"89063830","children":[{"componentName":"Text","props":{"text":"参考价格，具体扣费请以账单为准。","style":"font-size: 12px; border-radius: 0px;"},"id":"d8995fbc"},{"componentName":"Text","props":{"text":"了解计费详情","style":"font-size: 12px; color: #344899;"},"id":"b383c3e2"}]}]}],"id":"94fc0e43"}]},{"componentName":"TinyCol","props":{"span":"4","style":"display: flex; flex-direction: row-reverse; border-radius: 0px; height: 100%; justify-content: flex-start; align-items: center;"},"id":"10b73009","children":[{"componentName":"TinyButton","props":{"text":"下一步: 网络配置","type":"danger","style":"max-width: unset;"},"id":"0b584011"}]}],"id":"d414a473"}],"id":"e8ec029b"}],"fileName":"createVm"},"tenant":1,"isBody":false,"parentId":"0","group":"staticPages","depth":0,"isPage":true,"isDefault":false,"occupier":{"id":86,"username":"开发者","email":"developer@lowcode.com","resetPasswordToken":"developer","confirmationToken":"dfb2c162-351f-4f44-ad5f-8998","is_admin":true},"isHome":false,"_id":"NTJ4MjvqoVj8OVsc"} {"$$indexCreated":{"fieldName":"route","unique":true,"sparse":false}} {"$$indexCreated":{"fieldName":"route","unique":true}} diff --git a/packages/design-core/config/addons.js b/packages/design-core/config/addons.js index f659b4073..67584f7f8 100644 --- 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 index 18b620a40..046e89659 100644 --- 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 index e8c169a28..9a4983fd2 100644 --- 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 index bc57e710b..4c10b3056 100644 --- 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 index ec621cb4c..8c9753fe1 100644 --- 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 index 2713efff9..3970d6c73 100644 --- 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 index 2b43fe9cb..12208b5ed 100644 --- 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 index 44dea9e3b..2fdd07c51 100644 --- 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; + } } diff --git a/packages/theme/dark/button.less b/packages/theme/dark/button.less index d2c9da9d8..1d6ae6e6a 100644 --- 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 index 9201f8342..1a50a46f8 100644 --- 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 index 2ad563e6e..3c27afcda 100644 --- 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); diff --git a/packages/theme/dark/events.less b/packages/theme/dark/events.less index db31330fd..e2917eba8 100644 --- a/packages/theme/dark/events.less +++ b/packages/theme/dark/events.less @@ -1,36 +1,38 @@ -.setting-advanced-add-custom-event-tip { - --ti-lowcode-events-add-custom-event-tips-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-event-add-custom-event-tips-highlight-color: var(--ti-lowcode-base-warn-color); -} -.setting-advanced-bind-event-list { - --ti-lowcode-events-bind-event-list-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-events-bind-event-list-item-disabled-color: var(--ti-lowcode-base-text-color-4); - --lowcode-events-bind-event-list-item-hover-bg-color: var(--ti-lowcode-base-bg-1); -} -.bind-action-list { - --ti-lowcode-events-bind-action-item-border-color: var(--ti-lowcode-base-split-color-1); - --ti-lowcode-events-event-bind-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-events-bind-action-item-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-events-bind-action-item-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-events-bind-action-item-linked-bg-color: var(--ti-lowcode-base-success-color); - --ti-lowcode-events-bind-action-item-linked-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-events-empty-action-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-events-empty-action-tips-strong-color: var(--ti-lowcode-base-warn-color); -} +:root[data-theme='dark'] { + .setting-advanced-add-custom-event-tip { + --ti-lowcode-events-add-custom-event-tips-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-event-add-custom-event-tips-highlight-color: var(--ti-lowcode-base-warn-color); + } + .setting-advanced-bind-event-list { + --ti-lowcode-events-bind-event-list-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-events-bind-event-list-item-disabled-color: var(--ti-lowcode-base-text-color-4); + --lowcode-events-bind-event-list-item-hover-bg-color: var(--ti-lowcode-base-bg-1); + } + .bind-action-list { + --ti-lowcode-events-bind-action-item-border-color: var(--ti-lowcode-base-split-color-1); + --ti-lowcode-events-event-bind-color: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-events-bind-action-item-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-events-bind-action-item-hover-bg-color: var(--ti-lowcode-base-bg-1); + --ti-lowcode-events-bind-action-item-linked-bg-color: var(--ti-lowcode-base-success-color); + --ti-lowcode-events-bind-action-item-linked-color: var(--ti-lowcode-base-gray-0); + --ti-lowcode-events-empty-action-color: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-events-empty-action-tips-strong-color: var(--ti-lowcode-base-warn-color); + } -.advanced-config-container { - --ti-lowcode-events-advanced-config-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-events-advanced-label-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-events-advanced-binding-state-bg-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-events-advanced-binding-state-color: var(--ti-lowcode-base-gray-0); -} + .advanced-config-container { + --ti-lowcode-events-advanced-config-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-events-advanced-label-color: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-events-advanced-binding-state-bg-color: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-events-advanced-binding-state-color: var(--ti-lowcode-base-gray-0); + } -.bind-event-dialog-content { - --ti-lowcode-bind-event-dialog-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-bind-event-dialog-content-left-border-color: var(--ti-lowcode-base-split-color-1); - --ti-lowcode-bind-event-dialog-content-right-monaco-border-color: var(--ti-lowcode-base-split-color-1); - --ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-bind-event-dialog-new-action-tip-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-bind-event-dialog-action-selected-icon-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-bind-event-dialog-mark-bg-color: var(--ti-lowcode-base-bg-6); + .bind-event-dialog-content { + --ti-lowcode-bind-event-dialog-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-bind-event-dialog-content-left-border-color: var(--ti-lowcode-base-split-color-1); + --ti-lowcode-bind-event-dialog-content-right-monaco-border-color: var(--ti-lowcode-base-split-color-1); + --ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color: var(--ti-lowcode-base-gray-90); + --ti-lowcode-bind-event-dialog-new-action-tip-color: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-bind-event-dialog-action-selected-icon-color: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-bind-event-dialog-mark-bg-color: var(--ti-lowcode-base-bg-6); + } } diff --git a/packages/theme/dark/gpt-dialog.less b/packages/theme/dark/gpt-dialog.less index 74fce60c0..6b50d96fc 100644 --- a/packages/theme/dark/gpt-dialog.less +++ b/packages/theme/dark/gpt-dialog.less @@ -1,51 +1,53 @@ -.bind-chatgpt { - // chatGPT聊天窗问题模板文字颜色 - --ti-lowcode-chat-model-text: #dfe1e6; - // chatGPT聊天窗问题模板文字边框颜色 - --ti-lowcode-chat-model-text-border: #8a8e99; - // chatGPT聊天窗提问框图标 - --ti-lowcode-chat-model-input-icon: #8a8e99; - // chatGPT聊天窗用户头像边框色 - --ti-lowcode-chat-model-avatar-border: #8a8e99; - // chatGPT聊天窗AI聊天文字背景 - --ti-lowcode-chat-model-ai-text-bg: #262626; - // chatGPT聊天窗AI聊天文字背景边框 - --ti-lowcode-chat-model-ai-text-border: #262626; - // chatGPT聊天窗AI聊天文字 - --ti-lowcode-chat-model-ai-text: #dfe1e6; - // chatGPT聊天窗AI连接失败文字背景 - --ti-lowcode-chat-model-ai-fail-text-bg: rgba(246, 111, 106, 0.1); - // chatGPT聊天窗AI连接失败文字背景边框 - --ti-lowcode-chat-model-ai-fail-text-border: #f66f6a; - // chatGPT聊天窗AI连接失败文字 - --ti-lowcode-chat-model-ai-fail-text: #dfe1e6; - // chatGPT聊天窗用户聊天文字背景 - --ti-lowcode-chat-model-user-text-bg: #4f77ff; - // chatGPT聊天窗用户聊天文字边框 - --ti-lowcode-chat-model-user-text-border: #4f77ff; - // chatGPT聊天窗用户聊天文字 - --ti-lowcode-chat-model-user-text: #ffffff; - // chatGPT聊天窗标题文字 - --ti-lowcode-chat-model-title: #dfe1e6; - // chatGPT聊天窗基础图标 - --ti-lowcode-chat-model-common-icon: #8a887b; - // chatGPT聊天窗输入框背景 - --ti-lowcode-chat-model-input-bg: #1e1e1e; - // chatGPT聊天窗发送按钮背景 - --ti-lowcode-chat-model-button-bg: #2f2f2f; - // chatGPT聊天窗发送按钮边框 - --ti-lowcode-chat-model-button-border: #8a8e99; - // chatGPT聊天窗发送按钮文字 - --ti-lowcode-chat-model-button-text: #dfe1e6; +:root[data-theme='dark'] { + .bind-chatgpt { + // chatGPT聊天窗问题模板文字颜色 + --ti-lowcode-chat-model-text: #dfe1e6; + // chatGPT聊天窗问题模板文字边框颜色 + --ti-lowcode-chat-model-text-border: #8a8e99; + // chatGPT聊天窗提问框图标 + --ti-lowcode-chat-model-input-icon: #8a8e99; + // chatGPT聊天窗用户头像边框色 + --ti-lowcode-chat-model-avatar-border: #8a8e99; + // chatGPT聊天窗AI聊天文字背景 + --ti-lowcode-chat-model-ai-text-bg: #262626; + // chatGPT聊天窗AI聊天文字背景边框 + --ti-lowcode-chat-model-ai-text-border: #262626; + // chatGPT聊天窗AI聊天文字 + --ti-lowcode-chat-model-ai-text: #dfe1e6; + // chatGPT聊天窗AI连接失败文字背景 + --ti-lowcode-chat-model-ai-fail-text-bg: rgba(246, 111, 106, 0.1); + // chatGPT聊天窗AI连接失败文字背景边框 + --ti-lowcode-chat-model-ai-fail-text-border: #f66f6a; + // chatGPT聊天窗AI连接失败文字 + --ti-lowcode-chat-model-ai-fail-text: #dfe1e6; + // chatGPT聊天窗用户聊天文字背景 + --ti-lowcode-chat-model-user-text-bg: #4f77ff; + // chatGPT聊天窗用户聊天文字边框 + --ti-lowcode-chat-model-user-text-border: #4f77ff; + // chatGPT聊天窗用户聊天文字 + --ti-lowcode-chat-model-user-text: #ffffff; + // chatGPT聊天窗标题文字 + --ti-lowcode-chat-model-title: #dfe1e6; + // chatGPT聊天窗基础图标 + --ti-lowcode-chat-model-common-icon: #8a887b; + // chatGPT聊天窗输入框背景 + --ti-lowcode-chat-model-input-bg: #1e1e1e; + // chatGPT聊天窗发送按钮背景 + --ti-lowcode-chat-model-button-bg: #2f2f2f; + // chatGPT聊天窗发送按钮边框 + --ti-lowcode-chat-model-button-border: #8a8e99; + // chatGPT聊天窗发送按钮文字 + --ti-lowcode-chat-model-button-text: #dfe1e6; - // chatGPT加载 - --ti-lowcode-chat-loading-svg-color: var(--ti-lowcode-common-primary-color); - --ti-lowcode-chat-loading-text-color: #fff; -} + // chatGPT加载 + --ti-lowcode-chat-loading-svg-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-chat-loading-text-color: #fff; + } -.chat-model-popover { - --ti-lowcode-chat-model-popover-bg: #262626; - --ti-lowcode-chat-model-popover-color: #adb0b8; - --ti-lowcode-chat-model-popover-active-bg: #2f2f2f; - --ti-lowcode-chat-model-popover-active-color: #adb0b8; + .chat-model-popover { + --ti-lowcode-chat-model-popover-bg: #262626; + --ti-lowcode-chat-model-popover-color: #adb0b8; + --ti-lowcode-chat-model-popover-active-bg: #2f2f2f; + --ti-lowcode-chat-model-popover-active-color: #adb0b8; + } } diff --git a/packages/theme/dark/help.less b/packages/theme/dark/help.less index e3457c2ec..be888372c 100644 --- a/packages/theme/dark/help.less +++ b/packages/theme/dark/help.less @@ -1,15 +1,17 @@ -.shepherd-modal-overlay-container, -.tiny-guide { - --ti-lowcode-help-guide-content-text-color: var(--ti-lowcode-base-text-color-4); - --ti-lowcode-help-guide-title-text-color: var(--ti-lowcode-base-text-color-4); - --ti-lowcode-help-guide-progress-style-text-color: var(--ti-lowcode-base-text-color-4); - --ti-lowcode-help-guide-mask-bg-color: var(--ti-lowcode-base-bg-3); -} -.help-plugin-box { - --ti-lowcode-help-box-bg-color: #3c3c3c; - --ti-lowcode-help-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5); - --ti-lowcode-help-box-title-text-color: #ffffff; - --ti-lowcode-help-box-item-text-color: #adb0b8; - --ti-lowcode-help-box-question-border-top: rgba(255, 255, 255, 0.1); - --ti-lowcode-help-box-question-item-text-color: #4f77ff; +:root[data-theme='dark'] { + .shepherd-modal-overlay-container, + .tiny-guide { + --ti-lowcode-help-guide-content-text-color: var(--ti-lowcode-base-text-color-4); + --ti-lowcode-help-guide-title-text-color: var(--ti-lowcode-base-text-color-4); + --ti-lowcode-help-guide-progress-style-text-color: var(--ti-lowcode-base-text-color-4); + --ti-lowcode-help-guide-mask-bg-color: var(--ti-lowcode-base-bg-3); + } + .help-plugin-box { + --ti-lowcode-help-box-bg-color: #3c3c3c; + --ti-lowcode-help-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5); + --ti-lowcode-help-box-title-text-color: #ffffff; + --ti-lowcode-help-box-item-text-color: #adb0b8; + --ti-lowcode-help-box-question-border-top: rgba(255, 255, 255, 0.1); + --ti-lowcode-help-box-question-item-text-color: #4f77ff; + } } diff --git a/packages/theme/dark/i18n.less b/packages/theme/dark/i18n.less index c6a7258ae..ad2bf51e2 100644 --- a/packages/theme/dark/i18n.less +++ b/packages/theme/dark/i18n.less @@ -1,4 +1,4 @@ -:root { +:root[data-theme='dark'] { // 国际化表格操作图标颜色 --ti-lowcode-i18n-operate-svg-color: var(--ti-lowcode-base-text-color); // 国际化表格加载中字体颜色 diff --git a/packages/theme/dark/life-cycles.less b/packages/theme/dark/life-cycles.less index 69a2bce16..362a098e9 100644 --- a/packages/theme/dark/life-cycles.less +++ b/packages/theme/dark/life-cycles.less @@ -1,4 +1,4 @@ -:root { +:root[data-theme='dark'] { // 生命周期 --ti-lowcode-life-cycle-alert-color: #fff; --ti-lowcode-life-cycle-item-hover-bg: #202020; diff --git a/packages/theme/dark/materials.less b/packages/theme/dark/materials.less index 971e385f5..7cf64aeca 100644 --- a/packages/theme/dark/materials.less +++ b/packages/theme/dark/materials.less @@ -1,4 +1,4 @@ -:root { +:root[data-theme='dark'] { // 带边框的图标按钮边框颜色 --ti-lowcode-materials-border-icon-border-color: transparent; // 带边框的图标按钮图标颜色 diff --git a/packages/theme/dark/metaComponent.less b/packages/theme/dark/metaComponent.less index cea6734aa..ab5a50c44 100644 --- a/packages/theme/dark/metaComponent.less +++ b/packages/theme/dark/metaComponent.less @@ -1,4 +1,4 @@ -:root { +:root[data-theme='dark'] { // MetaListItem --ti-lowcode-meta-list-item-bg-color: var(--ti-lowcode-base-bg-5); --ti-lowcode-meta-list-item-border-color: transparent; diff --git a/packages/theme/dark/pageManage.less b/packages/theme/dark/pageManage.less index 4311afab2..659df02a6 100644 --- a/packages/theme/dark/pageManage.less +++ b/packages/theme/dark/pageManage.less @@ -1,4 +1,4 @@ -:root { +:root[data-theme='dark'] { --ti-lowcode-page-manage-title-background-text-color: var(--ti-lowcode-common-secondary-text-color); --ti-lowcode-page-manage-tip-background-text-color: var(--ti-lowcode-common-bg-2); --ti-lowcode-page-manage-tip-text-color: var(--ti-lowcode-common-bg-2); diff --git a/packages/theme/dark/plugin-js.less b/packages/theme/dark/plugin-js.less index c07a1a2c3..1f1c851e5 100644 --- a/packages/theme/dark/plugin-js.less +++ b/packages/theme/dark/plugin-js.less @@ -1,7 +1,9 @@ -// 页面JS 插件面板 -.plugin-page-js-container { - --ti-lowcode-plugin-js-bg: var(--ti-lowcode-common-component-bg); - --ti-lowcode-plugin-js-head-border-bottom-color: var(--ti-lowcode-common-bg-4); - --ti-lowcode-code-edit-content-border-color: var(--ti-lowcode-base-gray-60); - --ti-lowcode-plugin-js-help-link-color: var(--ti-lowcode-base-primary-color-2); +:root[data-theme='dark'] { + // 页面JS 插件面板 + .plugin-page-js-container { + --ti-lowcode-plugin-js-bg: var(--ti-lowcode-common-component-bg); + --ti-lowcode-plugin-js-head-border-bottom-color: var(--ti-lowcode-common-bg-4); + --ti-lowcode-code-edit-content-border-color: var(--ti-lowcode-base-gray-60); + --ti-lowcode-plugin-js-help-link-color: var(--ti-lowcode-base-primary-color-2); + } } diff --git a/packages/theme/dark/radio.less b/packages/theme/dark/radio.less index 50ff79bf3..dd55a04ae 100644 --- a/packages/theme/dark/radio.less +++ b/packages/theme/dark/radio.less @@ -1,19 +1,21 @@ -// 对 tinyvue 主题进行变量覆盖 -#app .tiny-radio[class*='tiny'] { - --ti-radio-bordered-checked-background-color: transparent; - --ti-radio-inner-bg-color: transparent; - --ti-radio-inner-checked-bg-color: var(--ti-lowcode-base-primary-color-2); - --ti-radio-bordered-checked-border-color: var(--ti-lowcode-base-primary-color-2); - --ti-radio-bordered-hover-border-color: var(--ti-lowcode-base-primary-color-2); - --ti-radio-inner-checked-hover-bg-color: var(--ti-lowcode-base-blue-5); - --ti-radio-bordered-checked-hover-border-color: var(--ti-lowcode-base-blue-5); - --ti-radio-text-color: var(--ti-lowcode-base-text-color); - --ti-radio-bordered-active-border-color: var(--ti-lowcode-base-primary-color-2); -} +:root[data-theme='dark'] { + // 对 tinyvue 主题进行变量覆盖 + #app .tiny-radio[class*='tiny'] { + --ti-radio-bordered-checked-background-color: transparent; + --ti-radio-inner-bg-color: transparent; + --ti-radio-inner-checked-bg-color: var(--ti-lowcode-base-primary-color-2); + --ti-radio-bordered-checked-border-color: var(--ti-lowcode-base-primary-color-2); + --ti-radio-bordered-hover-border-color: var(--ti-lowcode-base-primary-color-2); + --ti-radio-inner-checked-hover-bg-color: var(--ti-lowcode-base-blue-5); + --ti-radio-bordered-checked-hover-border-color: var(--ti-lowcode-base-blue-5); + --ti-radio-text-color: var(--ti-lowcode-base-text-color); + --ti-radio-bordered-active-border-color: var(--ti-lowcode-base-primary-color-2); + } -.tiny-radio-group { - --ti-lowcode-tiny-radio-button-bg: #262626; - --ti-lowcode-tiny-radio-button-checked-bg: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-radio-button-color: #fff; - --ti-lowcode-radio-button-border-color: transparent; + .tiny-radio-group { + --ti-lowcode-tiny-radio-button-bg: #262626; + --ti-lowcode-tiny-radio-button-checked-bg: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-radio-button-color: #fff; + --ti-lowcode-radio-button-border-color: transparent; + } } diff --git a/packages/theme/dark/setting-style.less b/packages/theme/dark/setting-style.less index 552eee7e3..43ea639bf 100644 --- a/packages/theme/dark/setting-style.less +++ b/packages/theme/dark/setting-style.less @@ -1,4 +1,4 @@ -:root { +:root[data-theme='dark'] { --ti-lowcode-setting-style-input-bg: var(--ti-lowcode-base-blue-6); --ti-lowcode-setting-style-font-color: var(--ti-lowcode-common-secondary-text-color); // light --ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-base-gray-0); diff --git a/packages/theme/dark/settings.less b/packages/theme/dark/settings.less index fe74f0cdc..31acce376 100644 --- a/packages/theme/dark/settings.less +++ b/packages/theme/dark/settings.less @@ -1,46 +1,46 @@ -// 右侧属性面板 css 变量 -#tiny-right-panel { - --ti-lowcode-setting-panel-bg-color: #2f2f2f; - --ti-lowcode-setting-panel-tabs-item-title-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-setting-panel-tabs-item-title-active-color: #000; - --ti-lowcode-setting-panel-tabs-item-title-hover-color: #fff; - // 插件设置面板左侧边框 - --ti-lowcode-plugin-setting-panel-border-left-color: var(--ti-lowcode-common-component-bg); -} +:root[data-theme='dark'] { + --ti-lowcode-className-selector-del-popover-bg-color: var(--ti-lowcode-base-bg-5); + --ti-lowcode-className-selector-del-popover-title-color: var(--ti-lowcode-base-text-color); -// 属性面板-属性-新建区块属性 -.block-new-attr-popover { - --ti-lowcode-attr-popover-menu-item-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-attr-popover-menu-item-link-item-bg-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-attr-popover-menu-item-link-item-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-attr-popover-menu-item-color: var(--ti-lowcode-base-text-color); -} + // 右侧属性面板 css 变量 + #tiny-right-panel { + --ti-lowcode-setting-panel-bg-color: #2f2f2f; + --ti-lowcode-setting-panel-tabs-item-title-color: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-setting-panel-tabs-item-title-active-color: #000; + --ti-lowcode-setting-panel-tabs-item-title-hover-color: #fff; + // 插件设置面板左侧边框 + --ti-lowcode-plugin-setting-panel-border-left-color: var(--ti-lowcode-common-component-bg); + } -// 属性面板-属性-区块关联属性 icon -.block-link-field { - --ti-lowcode-block-link-field-link-icon-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-block-link-field-link-icon-bg-color: var(--ti-lowcode-base-success-color); -} + // 属性面板-属性-新建区块属性 + .block-new-attr-popover { + --ti-lowcode-attr-popover-menu-item-hover-bg-color: var(--ti-lowcode-base-bg-1); + --ti-lowcode-attr-popover-menu-item-link-item-bg-color: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-attr-popover-menu-item-link-item-color: var(--ti-lowcode-base-gray-0); + --ti-lowcode-attr-popover-menu-item-color: var(--ti-lowcode-base-text-color); + } -.className-container { - --ti-lowcode-className-selector-container-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-className-selector-container-error-border-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-className-selector-container-error-bg-color: rgba(242, 48, 48, 0.1); - --ti-lowcode-className-selector-error-tips-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-className-selector-container-border-color: var(--ti-lowcode-base-gray-40); - --ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-className-selector-container-label-bg-color: rgba(20, 118, 255, 0.1); - --ti-lowcode-className-selector-container-label-color: var(--ti-lowcode-base-blue-6); - --ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-base-blue-6); - --ti-lowcode-className-selector-dropdown-list-bg-color: #202020; - --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-base-bg-2); - --ti-lowcode-className-selector-title-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-className-selector-dropdown-list-tips-color: var(--ti-lowcode-base-text-color-3); -} + // 属性面板-属性-区块关联属性 icon + .block-link-field { + --ti-lowcode-block-link-field-link-icon-color: var(--ti-lowcode-base-gray-0); + --ti-lowcode-block-link-field-link-icon-bg-color: var(--ti-lowcode-base-success-color); + } -:root { - --ti-lowcode-className-selector-del-popover-bg-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-className-selector-del-popover-title-color: var(--ti-lowcode-base-text-color); + .className-container { + --ti-lowcode-className-selector-container-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-className-selector-container-error-border-color: var(--ti-lowcode-base-error-color); + --ti-lowcode-className-selector-container-error-bg-color: rgba(242, 48, 48, 0.1); + --ti-lowcode-className-selector-error-tips-color: var(--ti-lowcode-base-error-color); + --ti-lowcode-className-selector-container-border-color: var(--ti-lowcode-base-gray-40); + --ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-className-selector-container-label-bg-color: rgba(20, 118, 255, 0.1); + --ti-lowcode-className-selector-container-label-color: var(--ti-lowcode-base-blue-6); + --ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-base-blue-6); + --ti-lowcode-className-selector-dropdown-list-bg-color: #202020; + --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-base-bg-2); + --ti-lowcode-className-selector-title-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-className-selector-dropdown-list-tips-color: var(--ti-lowcode-base-text-color-3); + } } diff --git a/packages/theme/dark/tiny-checkbox.less b/packages/theme/dark/tiny-checkbox.less index 8e9b9a53e..6946f6a87 100644 --- a/packages/theme/dark/tiny-checkbox.less +++ b/packages/theme/dark/tiny-checkbox.less @@ -1,27 +1,29 @@ -label.tiny-checkbox[class*='tiny'] { - --ti-checkbox-text-color: var(--ti-lowcode-base-gray-10); - --ti-checkbox-bg-color-checked: var(--ti-lowcode-base-primary-color-2); - --ti-checkbox-bg-color-hover-checked: var(--ti-lowcode-base-primary-color-2); - --ti-checkbox-border-color-hover-checked: var(--ti-lowcode-base-primary-color-2); - --ti-checkbox-border-color-checked: var(--ti-lowcode-base-primary-color-2); - --ti-checkbox-border-color-hover: var(--ti-lowcode-base-gray-40); - --ti-checkbox-bg-color-disable: rgba(255, 255, 255, 0.08); - --ti-checkbox-border-color-unchecked-disabled: var(--ti-lowcode-base-gray-40); -} +:root[data-theme='dark'] { + label.tiny-checkbox[class*='tiny'] { + --ti-checkbox-text-color: var(--ti-lowcode-base-gray-10); + --ti-checkbox-bg-color-checked: var(--ti-lowcode-base-primary-color-2); + --ti-checkbox-bg-color-hover-checked: var(--ti-lowcode-base-primary-color-2); + --ti-checkbox-border-color-hover-checked: var(--ti-lowcode-base-primary-color-2); + --ti-checkbox-border-color-checked: var(--ti-lowcode-base-primary-color-2); + --ti-checkbox-border-color-hover: var(--ti-lowcode-base-gray-40); + --ti-checkbox-bg-color-disable: rgba(255, 255, 255, 0.08); + --ti-checkbox-border-color-unchecked-disabled: var(--ti-lowcode-base-gray-40); + } -label.tiny-checkbox-button[class*='tiny'] { - --ti-checkbox-button-checked-border-color: var(--ti-lowcode-base-primary-color-2); - --ti-checkbox-button-checked-text-color: var(--ti-lowcode-base-primary-color-2); - --ti-checkbox-button-bg-color-hover: #fff; - --ti-checkbox-button-border-color-hover: var(--ti-lowcode-base-primary-color-2); - --ti-checkbox-button-hover-text-color: var(--ti-lowcode-base-primary-color-2); - --ti-checkbox-button-disabled-bg-color: rgba(255, 255, 255, 0.08); -} + label.tiny-checkbox-button[class*='tiny'] { + --ti-checkbox-button-checked-border-color: var(--ti-lowcode-base-primary-color-2); + --ti-checkbox-button-checked-text-color: var(--ti-lowcode-base-primary-color-2); + --ti-checkbox-button-bg-color-hover: #fff; + --ti-checkbox-button-border-color-hover: var(--ti-lowcode-base-primary-color-2); + --ti-checkbox-button-hover-text-color: var(--ti-lowcode-base-primary-color-2); + --ti-checkbox-button-disabled-bg-color: rgba(255, 255, 255, 0.08); + } -label.tiny-checkbox-button:not(.is-disabled).is-checked::after { - border-right-color: var(--ti-lowcode-base-primary-color-2); -} + label.tiny-checkbox-button:not(.is-disabled).is-checked::after { + border-right-color: var(--ti-lowcode-base-primary-color-2); + } -label.tiny-checkbox-button:not(.is-disabled).is-checked .tiny-checkbox-button__inner { - --ti-checkbox-shadow-color: var(--ti-lowcode-base-primary-color-2); + label.tiny-checkbox-button:not(.is-disabled).is-checked .tiny-checkbox-button__inner { + --ti-checkbox-shadow-color: var(--ti-lowcode-base-primary-color-2); + } } diff --git a/packages/theme/dark/tiny-collapse.less b/packages/theme/dark/tiny-collapse.less index 22f139350..ca2e8ee29 100644 --- a/packages/theme/dark/tiny-collapse.less +++ b/packages/theme/dark/tiny-collapse.less @@ -1,7 +1,9 @@ -.tiny-collapse { - --ti-lowcode-collapse-item-header-bg-color: #222; - --ti-lowcode-collapse-item-header-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-collapse-item-header-active-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-collapse-item-bg-color: #2f2f2f; - --ti-lowcode-collapse-item-content-color: var(--ti-lowcode-base-text-color); +:root[data-theme='dark'] { + .tiny-collapse { + --ti-lowcode-collapse-item-header-bg-color: #222; + --ti-lowcode-collapse-item-header-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-collapse-item-header-active-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-collapse-item-bg-color: #2f2f2f; + --ti-lowcode-collapse-item-content-color: var(--ti-lowcode-base-text-color); + } } diff --git a/packages/theme/dark/tiny-dialog-box.less b/packages/theme/dark/tiny-dialog-box.less index 56a010ecb..0ad123ff8 100644 --- a/packages/theme/dark/tiny-dialog-box.less +++ b/packages/theme/dark/tiny-dialog-box.less @@ -1,7 +1,9 @@ -.tiny-dialog-box__wrapper { - --ti-lowcode-dialog-close-btn-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-dialog-close-btn-hover-color: var(--ti-lowcode-common-primary-text-color); - --ti-lowcode-dialog-box-bg-color: #2f2f2f; - --ti-lowcode-dialog-box-body-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-dialog-header-color: var(--ti-lowcode-base-text-color); +:root[data-theme='dark'] { + .tiny-dialog-box__wrapper { + --ti-lowcode-dialog-close-btn-color: var(--ti-lowcode-common-secondary-text-color); + --ti-lowcode-dialog-close-btn-hover-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-dialog-box-bg-color: #2f2f2f; + --ti-lowcode-dialog-box-body-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-dialog-header-color: var(--ti-lowcode-base-text-color); + } } diff --git a/packages/theme/dark/tiny-grid.less b/packages/theme/dark/tiny-grid.less index 73aaeb3dc..2e861673e 100644 --- a/packages/theme/dark/tiny-grid.less +++ b/packages/theme/dark/tiny-grid.less @@ -1,24 +1,26 @@ -.tiny-grid { - --ti-lowcode-tiny-grid-header-color: var(--ti-lowcode-toolbar-breadcrumb-color); - --ti-lowcode-tiny-grid-header-color-bg: var(--ti-lowcode-common-bg-4); - --ti-lowcode-tiny-grid-row-hover-bg: var(--ti-lowcode-common-component-bg); - // 表格checkbox非选中时边框颜色 - --ti-lowcode-tiny-grid-checkbox-border-color: #8a8e99; - // 表格checkbox选中时边框颜色 - --ti-lowcode-tiny-grid-checkbox-checked-border-color: var(--ti-lowcode-common-primary-color); - // 表格checkbox选中时背景颜色 - --ti-lowcode-tiny-grid-checkbox-checked-bg-color: #fff; - // 表格checkbox未选中时图标颜色 - --ti-lowcode-tiny-grid-checkbox-svg-color: #fff; - // 表格radio选中时颜色 - --ti-lowcode-tiny-radio-selected-svg-color: var(--ti-lowcode-common-primary-color); - // ----斑马纹表格---- - // 斑马纹表格单行背景颜色 - --ti-lowcode-stripe-grid-list-n-bg-color: #282828; - // 斑马纹表格双行背景颜色 - --ti-lowcode-stripe-grid-list-2n-bg-color: var(--ti-lowcode-common-component-bg); - // 斑马纹表格鼠标悬浮时背景颜色 - --ti-lowcode-stripe-grid-list-item-hover-bg: var(--ti-lowcode-toolbar-view-hover-bg); - // 斑马纹表格头部字体颜色 - --ti-lowcode-stripe-grid-header-text-color: #d9d9d9; +:root[data-theme='dark'] { + .tiny-grid { + --ti-lowcode-tiny-grid-header-color: var(--ti-lowcode-toolbar-breadcrumb-color); + --ti-lowcode-tiny-grid-header-color-bg: var(--ti-lowcode-common-bg-4); + --ti-lowcode-tiny-grid-row-hover-bg: var(--ti-lowcode-common-component-bg); + // 表格checkbox非选中时边框颜色 + --ti-lowcode-tiny-grid-checkbox-border-color: #8a8e99; + // 表格checkbox选中时边框颜色 + --ti-lowcode-tiny-grid-checkbox-checked-border-color: var(--ti-lowcode-common-primary-color); + // 表格checkbox选中时背景颜色 + --ti-lowcode-tiny-grid-checkbox-checked-bg-color: #fff; + // 表格checkbox未选中时图标颜色 + --ti-lowcode-tiny-grid-checkbox-svg-color: #fff; + // 表格radio选中时颜色 + --ti-lowcode-tiny-radio-selected-svg-color: var(--ti-lowcode-common-primary-color); + // ----斑马纹表格---- + // 斑马纹表格单行背景颜色 + --ti-lowcode-stripe-grid-list-n-bg-color: #282828; + // 斑马纹表格双行背景颜色 + --ti-lowcode-stripe-grid-list-2n-bg-color: var(--ti-lowcode-common-component-bg); + // 斑马纹表格鼠标悬浮时背景颜色 + --ti-lowcode-stripe-grid-list-item-hover-bg: var(--ti-lowcode-toolbar-view-hover-bg); + // 斑马纹表格头部字体颜色 + --ti-lowcode-stripe-grid-header-text-color: #d9d9d9; + } } diff --git a/packages/theme/dark/tiny-input.less b/packages/theme/dark/tiny-input.less index e98eefb5c..16d369f47 100644 --- a/packages/theme/dark/tiny-input.less +++ b/packages/theme/dark/tiny-input.less @@ -1,25 +1,27 @@ -.tiny-input { - // input 禁用边框色 - --ti-lowcode-input-disabled-border-color: #6b6b6b; - --ti-lowcode-input-disabled-bg-color: #4d4d4d; - --ti-lowcode-input-border-color: transparent; - --ti-lowcode-input-bg-color: #262626; - --ti-lowcode-input-placeholder-color: rgba(138, 142, 153, 0.6); - --ti-lowcode-input-color: #d9d9d9; - // input框focus 获焦时边框颜色 - --ti-lowcode-input-focus-border-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-input-hover-border-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-input-error-border-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-input-error-bg-color: rgba(242, 48, 48, 0.1); -} +:root[data-theme='dark'] { + .tiny-input { + // input 禁用边框色 + --ti-lowcode-input-disabled-border-color: #6b6b6b; + --ti-lowcode-input-disabled-bg-color: #4d4d4d; + --ti-lowcode-input-border-color: transparent; + --ti-lowcode-input-bg-color: #262626; + --ti-lowcode-input-placeholder-color: rgba(138, 142, 153, 0.6); + --ti-lowcode-input-color: #d9d9d9; + // input框focus 获焦时边框颜色 + --ti-lowcode-input-focus-border-color: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-input-hover-border-color: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-input-error-border-color: var(--ti-lowcode-base-error-color); + --ti-lowcode-input-error-bg-color: rgba(242, 48, 48, 0.1); + } -.tiny-textarea { - --ti-lowcode-textarea-border-color: #313131; - --ti-lowcode-textarea-hover-border-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-textarea-input-bg-color: #262626; - --ti-lowcode-textarea-input-color: #fff; -} + .tiny-textarea { + --ti-lowcode-textarea-border-color: #313131; + --ti-lowcode-textarea-hover-border-color: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-textarea-input-bg-color: #262626; + --ti-lowcode-textarea-input-color: #fff; + } -.tiny-form-item__label { - --ti-lowcode-input-label-color: var(--ti-lowcode-base-gray-20); + .tiny-form-item__label { + --ti-lowcode-input-label-color: var(--ti-lowcode-base-gray-20); + } } diff --git a/packages/theme/dark/tiny-modal.less b/packages/theme/dark/tiny-modal.less index dd5bfa590..ae0ec6afe 100644 --- a/packages/theme/dark/tiny-modal.less +++ b/packages/theme/dark/tiny-modal.less @@ -1,5 +1,5 @@ // 覆写组件样式 -:root .tiny-modal[class*='tiny'] { +:root[data-theme='dark'] .tiny-modal[class*='tiny'] { --ti-modal-box-background-color: #2f2f2f; --ti-modal-header-text-color: var(--ti-lowcode-base-text-color); } diff --git a/packages/theme/dark/tiny-notify.less b/packages/theme/dark/tiny-notify.less index 1a99c0d36..cd5f1d5db 100644 --- a/packages/theme/dark/tiny-notify.less +++ b/packages/theme/dark/tiny-notify.less @@ -1,5 +1,7 @@ -.tiny-notify { - // notify 样式 - --ti-lowcode-notify-close-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-notify-close-hover-color: var(--ti-lowcode-base-gray-80); +:root[data-theme='dark'] { + .tiny-notify { + // notify 样式 + --ti-lowcode-notify-close-color: var(--ti-lowcode-base-gray-50); + --ti-lowcode-notify-close-hover-color: var(--ti-lowcode-base-gray-80); + } } diff --git a/packages/theme/dark/tiny-numeric.less b/packages/theme/dark/tiny-numeric.less index f2c45e001..9a510008b 100644 --- a/packages/theme/dark/tiny-numeric.less +++ b/packages/theme/dark/tiny-numeric.less @@ -1,11 +1,13 @@ -div.tiny-numeric { - --ti-numeric-input-normal-bg-color: #262626; - --ti-numeric-input-normal-border-color: var(--ti-lowcode-base-gray-60); - --ti-numeric-input-normal-text-color: var(--ti-lowcode-base-text-color); - --ti-numeric-input-border-color-active: var(--ti-lowcode-base-gray-40); - --ti-numeric-input-normal-active-border-color: var(--ti-lowcode-base-gray-40); - --ti-numeric-input-icon-color-hover: var(--ti-lowcode-base-gray-40); +:root[data-theme='dark'] { + div.tiny-numeric { + --ti-numeric-input-normal-bg-color: #262626; + --ti-numeric-input-normal-border-color: var(--ti-lowcode-base-gray-60); + --ti-numeric-input-normal-text-color: var(--ti-lowcode-base-text-color); + --ti-numeric-input-border-color-active: var(--ti-lowcode-base-gray-40); + --ti-numeric-input-normal-active-border-color: var(--ti-lowcode-base-gray-40); + --ti-numeric-input-icon-color-hover: var(--ti-lowcode-base-gray-40); - --ti-lowcode-tiny-numeric-icon-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-tiny-numeric-icon-hover-color: var(--ti-lowcode-base-gray-40); + --ti-lowcode-tiny-numeric-icon-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-tiny-numeric-icon-hover-color: var(--ti-lowcode-base-gray-40); + } } diff --git a/packages/theme/dark/tiny-search.less b/packages/theme/dark/tiny-search.less index 0356fb7df..0189bf260 100644 --- a/packages/theme/dark/tiny-search.less +++ b/packages/theme/dark/tiny-search.less @@ -1,23 +1,25 @@ -#app .tiny-search { - --ti-search-input-border-color: transparent; - --ti-search-input-bg-color: #262626; - --ti-search-line-hover-border-color: #3c3c3c; - --ti-search-input-focus-border-color: #4f77ff; - --ti-search-input-text-color: #d9d9d9; -} +:root[data-theme='dark'] { + #app .tiny-search { + --ti-search-input-border-color: transparent; + --ti-search-input-bg-color: #262626; + --ti-search-line-hover-border-color: #3c3c3c; + --ti-search-input-focus-border-color: #4f77ff; + --ti-search-input-text-color: #d9d9d9; + } -.tiny-search { - // 搜索框图标颜色 - --ti-lowcode-search-icon-color: #737373; - // 搜索框图标悬浮时颜色 - --ti-lowcode-search-hover-icon-color: #d9d9d9; - // 搜索框hover背景色 - --ti-lowcode-search-hover-bg: #3c3c3c; + .tiny-search { + // 搜索框图标颜色 + --ti-lowcode-search-icon-color: #737373; + // 搜索框图标悬浮时颜色 + --ti-lowcode-search-hover-icon-color: #d9d9d9; + // 搜索框hover背景色 + --ti-lowcode-search-hover-bg: #3c3c3c; - // tinysearch 背景色 - --ti-lowcode-component-search-bg: var(--ti-lowcode-input-bg); - // 搜索框hover背景色 - --ti-lowcode-search-hover-bg: var(--ti-lowcode-common-component-hover-bg); - --ti-lowcode-search-input-color: #d9d9d9; - --ti-lowcode-search-input-placeholder-color: #757575; + // tinysearch 背景色 + --ti-lowcode-component-search-bg: var(--ti-lowcode-input-bg); + // 搜索框hover背景色 + --ti-lowcode-search-hover-bg: var(--ti-lowcode-common-component-hover-bg); + --ti-lowcode-search-input-color: #d9d9d9; + --ti-lowcode-search-input-placeholder-color: #757575; + } } diff --git a/packages/theme/dark/tiny-switch.less b/packages/theme/dark/tiny-switch.less index 9025824c2..b777b13c7 100644 --- a/packages/theme/dark/tiny-switch.less +++ b/packages/theme/dark/tiny-switch.less @@ -1,5 +1,7 @@ -.tiny-switch { - --ti-lowcode-tiny-switch-bg-color: #c2c2c2; - --ti-lowcode-tiny-switch-checked-bg-color: var(--ti-lowcode-base-blue-6); - --ti-lowcode-tiny-switch-dot-bg: #fff; +:root[data-theme='dark'] { + .tiny-switch { + --ti-lowcode-tiny-switch-bg-color: #c2c2c2; + --ti-lowcode-tiny-switch-checked-bg-color: var(--ti-lowcode-base-blue-6); + --ti-lowcode-tiny-switch-dot-bg: #fff; + } } diff --git a/packages/theme/dark/tiny-tabs.less b/packages/theme/dark/tiny-tabs.less index 1b68112cf..d91e0ba5a 100644 --- a/packages/theme/dark/tiny-tabs.less +++ b/packages/theme/dark/tiny-tabs.less @@ -1,5 +1,7 @@ -#app .tiny-tabs { - --ti-tabs-button-card-item-text-color: #a6a6a6; - --ti-tabs-button-card-item-hover-text-color: #fff; - --ti-tabs-button-card-nav-bg-color: #262626; +:root[data-theme='dark'] { + #app .tiny-tabs { + --ti-tabs-button-card-item-text-color: #a6a6a6; + --ti-tabs-button-card-item-hover-text-color: #fff; + --ti-tabs-button-card-nav-bg-color: #262626; + } } diff --git a/packages/theme/dark/toolbar.less b/packages/theme/dark/toolbar.less index 322903a59..27e64d5f9 100644 --- a/packages/theme/dark/toolbar.less +++ b/packages/theme/dark/toolbar.less @@ -1,14 +1,16 @@ -.tiny-engine-toolbar { - // 头部工具栏 - --ti-lowcode-toolbar-border-bottom-color: transparent; - --ti-lowcode-toolbar-media-bg: var(--ti-lowcode-common-bg-6); - --ti-lowcode-toolbar-media-setting-border-color: var(--ti-lowcode-common-border-color-2); - --ti-lowcode-toolbar-title-color: #e6e6e6; - --ti-lowcode-toolbar-sub-title-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-toolbar-hover-color: var(--ti-lowcode-common-component-hover-bg); - --ti-lowcode-toolbar-view-active-bg: #2f2f2f; - --ti-lowcode-toolbar-popover-bg: var(--ti-lowcode-base-gray-0); - --ti-lowcode-toolbar-active-color: #808080; - --ti-lowcode-toolbar-user-img-border-color: var(--ti-lowcode-base-gray-20); - --ti-lowcode-toolbar-dot-color: var(--ti-lowcode-common-danger-color); +:root[data-theme='dark'] { + .tiny-engine-toolbar { + // 头部工具栏 + --ti-lowcode-toolbar-border-bottom-color: transparent; + --ti-lowcode-toolbar-media-bg: var(--ti-lowcode-common-bg-6); + --ti-lowcode-toolbar-media-setting-border-color: var(--ti-lowcode-common-border-color-2); + --ti-lowcode-toolbar-title-color: #e6e6e6; + --ti-lowcode-toolbar-sub-title-color: var(--ti-lowcode-common-secondary-text-color); + --ti-lowcode-toolbar-hover-color: var(--ti-lowcode-common-component-hover-bg); + --ti-lowcode-toolbar-view-active-bg: #2f2f2f; + --ti-lowcode-toolbar-popover-bg: var(--ti-lowcode-base-gray-0); + --ti-lowcode-toolbar-active-color: #808080; + --ti-lowcode-toolbar-user-img-border-color: var(--ti-lowcode-base-gray-20); + --ti-lowcode-toolbar-dot-color: var(--ti-lowcode-common-danger-color); + } } diff --git a/packages/theme/dark/tree.less b/packages/theme/dark/tree.less index b2d7556b0..924ab75b5 100644 --- a/packages/theme/dark/tree.less +++ b/packages/theme/dark/tree.less @@ -1,7 +1,9 @@ -.outlinebox { - --ti-lowcode-tree-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-tree-icon-color: rgba(138, 142, 153, 0.99); - --ti-lowcode-tree-icon-hover-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-tree-selected-color: var(--ti-lowcode-common-text-color-3); - --ti-lowcode-tree-selected-bg: var(--ti-lowcode-common-primary-color); +:root[data-theme='dark'] { + .outlinebox { + --ti-lowcode-tree-color: var(--ti-lowcode-common-secondary-text-color); + --ti-lowcode-tree-icon-color: rgba(138, 142, 153, 0.99); + --ti-lowcode-tree-icon-hover-color: var(--ti-lowcode-common-secondary-text-color); + --ti-lowcode-tree-selected-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-tree-selected-bg: var(--ti-lowcode-common-primary-color); + } } diff --git a/packages/theme/dark/tutorial.less b/packages/theme/dark/tutorial.less index 28f063eef..d0772c6f8 100644 --- a/packages/theme/dark/tutorial.less +++ b/packages/theme/dark/tutorial.less @@ -1,5 +1,7 @@ -#tiny-engine-left-panel { - --ti-lowcode-tutorial-primary-text-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-tutorial-primary-bg-color: var(--ti-lowcode-base-bg-2); - --ti-lowcode-tutorial-hover-bg-color: var(--ti-lowcode-base-bg); +:root[data-theme='dark'] { + #tiny-engine-left-panel { + --ti-lowcode-tutorial-primary-text-color: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-tutorial-primary-bg-color: var(--ti-lowcode-base-bg-2); + --ti-lowcode-tutorial-hover-bg-color: var(--ti-lowcode-base-bg); + } } diff --git a/packages/theme/dark/variable.less b/packages/theme/dark/variable.less index beed6faae..953b99502 100644 --- a/packages/theme/dark/variable.less +++ b/packages/theme/dark/variable.less @@ -1,5 +1,5 @@ // 暗色主题 -:root { +:root[data-theme='dark'] { // 基础配置，前缀为 --base --base-min-width: 1280px; diff --git a/packages/theme/light/base.less b/packages/theme/light/base.less index db2e35310..f60acd063 100644 --- a/packages/theme/light/base.less +++ b/packages/theme/light/base.less @@ -1,4 +1,4 @@ -:root { +:root[data-theme='light'] { // 灰阶 --ti-lowcode-base-gray-0: #fff; --ti-lowcode-base-gray-5: #fafafa; diff --git a/packages/theme/light/block.less b/packages/theme/light/block.less index 9b3afa156..c04ac557a 100644 --- a/packages/theme/light/block.less +++ b/packages/theme/light/block.less @@ -1,4 +1,4 @@ -:root { +:root[data-theme='light'] { // 历史备份列表 --ti-lowcode-component-block-history-list-item-border-color: var(--ti-lowcode-common-border-color-1); // 组件边框色 --ti-lowcode-component-block-history-list-item-hover-bg: var( diff --git a/packages/theme/light/datasource.less b/packages/theme/light/datasource.less index a8d717859..d040d08c8 100644 --- a/packages/theme/light/datasource.less +++ b/packages/theme/light/datasource.less @@ -1,4 +1,4 @@ -:root { +:root[data-theme='light'] { --ti-lowcode-datasource-toolbar-icon-color: var(--ti-lowcode-base-gray-60); --ti-lowcode-datasource-tabs-border-color: var(--ti-lowcode-base-gray-30); --ti-lowcode-datasource-toolbar-breadcrumb-color: var(--ti-lowcode-base-gray-80); diff --git a/packages/theme/light/i18n.less b/packages/theme/light/i18n.less index 6b8db462c..d2fcbddc3 100644 --- a/packages/theme/light/i18n.less +++ b/packages/theme/light/i18n.less @@ -1,4 +1,4 @@ -:root { +:root[data-theme='light'] { // 国际化表格操作图标颜色 --ti-lowcode-i18n-operate-svg-color: var(--ti-lowcode-base-text-color); // 国际化表格加载中字体颜色 diff --git a/packages/theme/light/life-cycles.less b/packages/theme/light/life-cycles.less index ff5e86f54..1d79e0298 100644 --- a/packages/theme/light/life-cycles.less +++ b/packages/theme/light/life-cycles.less @@ -1,4 +1,4 @@ -:root { +:root[data-theme='light'] { // 生命周期 --ti-lowcode-life-cycle-alert-color: inherit; --ti-lowcode-life-cycle-item-hover-bg: var(--ti-lowcode-common-hover-bg-1); diff --git a/packages/theme/light/materials.less b/packages/theme/light/materials.less index eb46f29a3..7129b1ede 100644 --- a/packages/theme/light/materials.less +++ b/packages/theme/light/materials.less @@ -1,4 +1,4 @@ -:root { +:root[data-theme='light'] { // 带边框的图标按钮边框颜色 --ti-lowcode-materials-border-icon-border-color: var(--ti-lowcode-base-default-button-border-color); // 带边框的图标按钮图标颜色 diff --git a/packages/theme/light/metaComponent.less b/packages/theme/light/metaComponent.less index 58e4b9bc9..70208b0f9 100644 --- a/packages/theme/light/metaComponent.less +++ b/packages/theme/light/metaComponent.less @@ -1,4 +1,4 @@ -:root { +:root[data-theme='light'] { // MetaListItem --ti-lowcode-meta-list-item-bg-color: var(--ti-lowcode-base-bg-5); --ti-lowcode-meta-list-item-border-color: rgba(0, 0, 0, 0.08); diff --git a/packages/theme/light/pageManage.less b/packages/theme/light/pageManage.less index e9caec3ac..836534297 100644 --- a/packages/theme/light/pageManage.less +++ b/packages/theme/light/pageManage.less @@ -1,4 +1,4 @@ -:root { +:root[data-theme='light'] { --ti-lowcode-page-manage-title-background-text-color: var(--ti-lowcode-base-text-color); --ti-lowcode-page-manage-tip-border-color: var(--ti-lowcode-base-gray-50); --ti-lowcode-page-manage-tree-text-background-color: var(--ti-lowcode-common-bg-8); diff --git a/packages/theme/light/plugin-js.less b/packages/theme/light/plugin-js.less index ad512cd92..e80f9a453 100644 --- a/packages/theme/light/plugin-js.less +++ b/packages/theme/light/plugin-js.less @@ -1,7 +1,9 @@ -// 页面JS 插件面板 -.plugin-page-js-container { - --ti-lowcode-plugin-js-bg: var(--ti-lowcode-base-gray-0); - --ti-lowcode-plugin-js-head-border-bottom-color: var(--ti-lowcode-base-split-color-1); - --ti-lowcode-code-edit-content-border-color: var(--ti-lowcode-base-gray-40); - --ti-lowcode-plugin-js-help-link-color: var(--ti-lowcode-base-primary-color-2); +:root[data-theme='light'] { + // 页面JS 插件面板 + .plugin-page-js-container { + --ti-lowcode-plugin-js-bg: var(--ti-lowcode-base-gray-0); + --ti-lowcode-plugin-js-head-border-bottom-color: var(--ti-lowcode-base-split-color-1); + --ti-lowcode-code-edit-content-border-color: var(--ti-lowcode-base-gray-40); + --ti-lowcode-plugin-js-help-link-color: var(--ti-lowcode-base-primary-color-2); + } } diff --git a/packages/theme/light/radio.less b/packages/theme/light/radio.less index b93c1e4e0..a6332ac16 100644 --- a/packages/theme/light/radio.less +++ b/packages/theme/light/radio.less @@ -1,6 +1,8 @@ -.tiny-radio-group { - --ti-lowcode-tiny-radio-button-bg: var(--ti-lowcode-base-gray-0); - --ti-lowcode-tiny-radio-button-checked-bg: var(--ti-lowcode-base-bg-3); - --ti-lowcode-radio-button-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-radio-button-border-color: var(--ti-lowcode-base-secondary-button-border-color); +:root[data-theme='light'] { + .tiny-radio-group { + --ti-lowcode-tiny-radio-button-bg: var(--ti-lowcode-base-gray-0); + --ti-lowcode-tiny-radio-button-checked-bg: var(--ti-lowcode-base-bg-3); + --ti-lowcode-radio-button-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-radio-button-border-color: var(--ti-lowcode-base-secondary-button-border-color); + } } diff --git a/packages/theme/light/setting-style.less b/packages/theme/light/setting-style.less index 4afe8bfe8..97936ce04 100644 --- a/packages/theme/light/setting-style.less +++ b/packages/theme/light/setting-style.less @@ -1,4 +1,4 @@ -:root { +:root[data-theme='light'] { --ti-lowcode-setting-style-input-bg: var(--ti-lowcode-base-blue-6); --ti-lowcode-setting-style-font-color: var(--ti-lowcode-base-text-color); --ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-base-gray-0); diff --git a/packages/theme/light/settings.less b/packages/theme/light/settings.less index 6bd21cb73..7501d2009 100644 --- a/packages/theme/light/settings.less +++ b/packages/theme/light/settings.less @@ -1,46 +1,45 @@ -// 右侧属性面板 css 变量 -#tiny-right-panel { - --ti-lowcode-setting-panel-bg-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-setting-panel-tabs-item-title-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-setting-panel-tabs-item-title-active-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-setting-panel-tabs-item-title-hover-color: var(--ti-lowcode-base-text-color); - // 插件设置面板左侧边框 - --ti-lowcode-plugin-setting-panel-border-left-color: var(--ti-lowcode-common-border-color-4); -} +:root[data-theme='light'] { + // 右侧属性面板 css 变量 + #tiny-right-panel { + --ti-lowcode-setting-panel-bg-color: var(--ti-lowcode-base-bg-5); + --ti-lowcode-setting-panel-tabs-item-title-color: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-setting-panel-tabs-item-title-active-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-setting-panel-tabs-item-title-hover-color: var(--ti-lowcode-base-text-color); + // 插件设置面板左侧边框 + --ti-lowcode-plugin-setting-panel-border-left-color: var(--ti-lowcode-common-border-color-4); + } -// 属性面板-属性-区块关联属性-新建区块属性popover -.block-new-attr-popover { - --ti-lowcode-attr-popover-menu-item-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-attr-popover-menu-item-link-item-bg-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-attr-popover-menu-item-link-item-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-attr-popover-menu-item-color: var(--ti-lowcode-base-text-color); -} + // 属性面板-属性-区块关联属性-新建区块属性popover + .block-new-attr-popover { + --ti-lowcode-attr-popover-menu-item-hover-bg-color: var(--ti-lowcode-base-bg-1); + --ti-lowcode-attr-popover-menu-item-link-item-bg-color: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-attr-popover-menu-item-link-item-color: var(--ti-lowcode-base-gray-0); + --ti-lowcode-attr-popover-menu-item-color: var(--ti-lowcode-base-text-color); + } -// 属性面板-属性-区块关联属性 icon -.block-link-field { - --ti-lowcode-block-link-field-link-icon-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-block-link-field-link-icon-bg-color: var(--ti-lowcode-base-success-color); -} - -.className-container { - --ti-lowcode-className-selector-container-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-className-selector-container-error-border-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-className-selector-container-error-bg-color: rgba(242, 48, 48, 0.1); - --ti-lowcode-className-selector-error-tips-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-className-selector-container-border-color: var(--ti-lowcode-base-gray-40); - --ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-className-selector-container-label-bg-color: rgba(20, 118, 255, 0.1); - --ti-lowcode-className-selector-container-label-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-className-selector-dropdown-list-bg-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-base-gray-20); - --ti-lowcode-className-selector-title-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-className-selector-dropdown-list-tips-color: var(--ti-lowcode-base-text-color-3); -} + // 属性面板-属性-区块关联属性 icon + .block-link-field { + --ti-lowcode-block-link-field-link-icon-color: var(--ti-lowcode-base-gray-0); + --ti-lowcode-block-link-field-link-icon-bg-color: var(--ti-lowcode-base-success-color); + } -:root { + .className-container { + --ti-lowcode-className-selector-container-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-className-selector-container-error-border-color: var(--ti-lowcode-base-error-color); + --ti-lowcode-className-selector-container-error-bg-color: rgba(242, 48, 48, 0.1); + --ti-lowcode-className-selector-error-tips-color: var(--ti-lowcode-base-error-color); + --ti-lowcode-className-selector-container-border-color: var(--ti-lowcode-base-gray-40); + --ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-base-gray-90); + --ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-className-selector-container-label-bg-color: rgba(20, 118, 255, 0.1); + --ti-lowcode-className-selector-container-label-color: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-className-selector-dropdown-list-bg-color: var(--ti-lowcode-base-gray-0); + --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-base-gray-20); + --ti-lowcode-className-selector-title-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-className-selector-dropdown-list-tips-color: var(--ti-lowcode-base-text-color-3); + } --ti-lowcode-className-selector-del-popover-bg-color: var(--ti-lowcode-base-bg-5); --ti-lowcode-className-selector-del-popover-title-color: var(--ti-lowcode-base-text-color); } diff --git a/packages/theme/light/tiny-collapse.less b/packages/theme/light/tiny-collapse.less index 84df15bb4..4778b5efc 100644 --- a/packages/theme/light/tiny-collapse.less +++ b/packages/theme/light/tiny-collapse.less @@ -1,7 +1,9 @@ -.tiny-collapse { - --ti-lowcode-collapse-item-header-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-collapse-item-header-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-collapse-item-header-active-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-collapse-item-bg-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-collapse-item-content-color: var(--ti-lowcode-base-text-color); +:root[data-theme='light'] { + .tiny-collapse { + --ti-lowcode-collapse-item-header-bg-color: var(--ti-lowcode-base-bg-1); + --ti-lowcode-collapse-item-header-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-collapse-item-header-active-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-collapse-item-bg-color: var(--ti-lowcode-base-bg-5); + --ti-lowcode-collapse-item-content-color: var(--ti-lowcode-base-text-color); + } } diff --git a/packages/theme/light/tiny-dialog-box.less b/packages/theme/light/tiny-dialog-box.less index 25f4c180b..e2822efdc 100644 --- a/packages/theme/light/tiny-dialog-box.less +++ b/packages/theme/light/tiny-dialog-box.less @@ -1,7 +1,9 @@ -.tiny-dialog-box__wrapper { - --ti-lowcode-dialog-box-bg-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-dialog-close-btn-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-dialog-close-btn-hover-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-dialog-box-body-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-dialog-header-color: var(--ti-lowcode-base-text-color); +:root[data-theme='light'] { + .tiny-dialog-box__wrapper { + --ti-lowcode-dialog-box-bg-color: var(--ti-lowcode-base-bg-5); + --ti-lowcode-dialog-close-btn-color: var(--ti-lowcode-base-gray-50); + --ti-lowcode-dialog-close-btn-hover-color: var(--ti-lowcode-base-gray-90); + --ti-lowcode-dialog-box-body-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-dialog-header-color: var(--ti-lowcode-base-text-color); + } } diff --git a/packages/theme/light/tiny-grid.less b/packages/theme/light/tiny-grid.less index a6db2b09a..e321a98b0 100644 --- a/packages/theme/light/tiny-grid.less +++ b/packages/theme/light/tiny-grid.less @@ -1,24 +1,26 @@ -.tiny-grid { - --ti-lowcode-tiny-grid-header-color: var(--ti-lowcode-toolbar-breadcrumb-color); - --ti-lowcode-tiny-grid-header-color-bg: #f2f2f2; - --ti-lowcode-tiny-grid-row-hover-bg: #f2f5fc; - // 表格checkbox非选中时边框颜色 - --ti-lowcode-tiny-grid-checkbox-border-color: transparent; - // 表格checkbox选中时边框颜色 - --ti-lowcode-tiny-grid-checkbox-checked-border-color: transparent; - // 表格checkbox选中时背景颜色 - --ti-lowcode-tiny-grid-checkbox-checked-bg-color: transparent; - // 表格checkbox未选中时图标颜色 - --ti-lowcode-tiny-grid-checkbox-svg-color: #c2c2c2; - // 表格radio选中时颜色 - --ti-lowcode-tiny-radio-selected-svg-color: var(--ti-lowcode-common-primary-text-color); - // ----斑马纹表格---- - // 斑马纹表格单行背景颜色 - --ti-lowcode-stripe-grid-list-n-bg-color: var(--ti-lowcode-base-bg-5); - // 斑马纹表格双行背景颜色 - --ti-lowcode-stripe-grid-list-2n-bg-color: var(--ti-lowcode-base-bg-5); - // 斑马纹表格鼠标悬浮时背景颜色 - --ti-lowcode-stripe-grid-list-item-hover-bg: var(--ti-lowcode-base-bg); - // 斑马纹表格头部字体颜色 - --ti-lowcode-stripe-grid-header-text-color: #595959; +:root[data-theme='light'] { + .tiny-grid { + --ti-lowcode-tiny-grid-header-color: var(--ti-lowcode-toolbar-breadcrumb-color); + --ti-lowcode-tiny-grid-header-color-bg: #f2f2f2; + --ti-lowcode-tiny-grid-row-hover-bg: #f2f5fc; + // 表格checkbox非选中时边框颜色 + --ti-lowcode-tiny-grid-checkbox-border-color: transparent; + // 表格checkbox选中时边框颜色 + --ti-lowcode-tiny-grid-checkbox-checked-border-color: transparent; + // 表格checkbox选中时背景颜色 + --ti-lowcode-tiny-grid-checkbox-checked-bg-color: transparent; + // 表格checkbox未选中时图标颜色 + --ti-lowcode-tiny-grid-checkbox-svg-color: #c2c2c2; + // 表格radio选中时颜色 + --ti-lowcode-tiny-radio-selected-svg-color: var(--ti-lowcode-common-primary-text-color); + // ----斑马纹表格---- + // 斑马纹表格单行背景颜色 + --ti-lowcode-stripe-grid-list-n-bg-color: var(--ti-lowcode-base-bg-5); + // 斑马纹表格双行背景颜色 + --ti-lowcode-stripe-grid-list-2n-bg-color: var(--ti-lowcode-base-bg-5); + // 斑马纹表格鼠标悬浮时背景颜色 + --ti-lowcode-stripe-grid-list-item-hover-bg: var(--ti-lowcode-base-bg); + // 斑马纹表格头部字体颜色 + --ti-lowcode-stripe-grid-header-text-color: #595959; + } } diff --git a/packages/theme/light/tiny-input.less b/packages/theme/light/tiny-input.less index 4c0984357..e238891ef 100644 --- a/packages/theme/light/tiny-input.less +++ b/packages/theme/light/tiny-input.less @@ -1,24 +1,26 @@ -.tiny-input { - // input 禁用边框色 - --ti-lowcode-input-disabled-border-color: var(--ti-lowcode-base-gray-30); - --ti-lowcode-input-disabled-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-input-border-color: var(--ti-lowcode-base-gray-40); - --ti-lowcode-input-bg-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-input-placeholder-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-input-color: var(--ti-lowcode-base-text-color); - // input框focus 获焦时边框颜色 - --ti-lowcode-input-focus-border-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-input-hover-border-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-input-error-border-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-input-error-bg-color: rgba(242, 48, 48, 0.1); -} +:root[data-theme='light'] { + .tiny-input { + // input 禁用边框色 + --ti-lowcode-input-disabled-border-color: var(--ti-lowcode-base-gray-30); + --ti-lowcode-input-disabled-bg-color: var(--ti-lowcode-base-bg-1); + --ti-lowcode-input-border-color: var(--ti-lowcode-base-gray-40); + --ti-lowcode-input-bg-color: var(--ti-lowcode-base-bg-5); + --ti-lowcode-input-placeholder-color: var(--ti-lowcode-base-gray-50); + --ti-lowcode-input-color: var(--ti-lowcode-base-text-color); + // input框focus 获焦时边框颜色 + --ti-lowcode-input-focus-border-color: var(--ti-lowcode-base-gray-90); + --ti-lowcode-input-hover-border-color: var(--ti-lowcode-base-gray-90); + --ti-lowcode-input-error-border-color: var(--ti-lowcode-base-error-color); + --ti-lowcode-input-error-bg-color: rgba(242, 48, 48, 0.1); + } -.tiny-textarea { - --ti-lowcode-textarea-border-color: var(--ti-lowcode-base-gray-40); - --ti-lowcode-textarea-hover-border-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-textarea-input-bg-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-textarea-input-color: var(--ti-lowcode-base-text-color); -} -.tiny-form-item__label { - --ti-lowcode-input-label-color: var(--ti-lowcode-base-text-color-1); + .tiny-textarea { + --ti-lowcode-textarea-border-color: var(--ti-lowcode-base-gray-40); + --ti-lowcode-textarea-hover-border-color: var(--ti-lowcode-base-gray-90); + --ti-lowcode-textarea-input-bg-color: var(--ti-lowcode-base-gray-0); + --ti-lowcode-textarea-input-color: var(--ti-lowcode-base-text-color); + } + .tiny-form-item__label { + --ti-lowcode-input-label-color: var(--ti-lowcode-base-text-color-1); + } } diff --git a/packages/theme/light/tiny-modal.less b/packages/theme/light/tiny-modal.less index 6b6068c47..21c750f1d 100644 --- a/packages/theme/light/tiny-modal.less +++ b/packages/theme/light/tiny-modal.less @@ -1,5 +1,7 @@ -.tiny-modal { - --ti-lowcode-modal-close-btn-color: var(--ti-lowcode-base-text-color-3); - --ti-lowcode-modal-close-btn-hover-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-modal-content-color: var(--ti-lowcode-base-text-color-1); +:root[data-theme='light'] { + .tiny-modal { + --ti-lowcode-modal-close-btn-color: var(--ti-lowcode-base-text-color-3); + --ti-lowcode-modal-close-btn-hover-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-modal-content-color: var(--ti-lowcode-base-text-color-1); + } } diff --git a/packages/theme/light/tiny-notify.less b/packages/theme/light/tiny-notify.less index 6dbb0f86c..22f062b2e 100644 --- a/packages/theme/light/tiny-notify.less +++ b/packages/theme/light/tiny-notify.less @@ -1,5 +1,7 @@ -.tiny-notify { - // notify 样式 - --ti-lowcode-notify-close-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-notify-close-hover-color: var(--ti-lowcode-base-gray-90); +:root[data-theme='light'] { + .tiny-notify { + // notify 样式 + --ti-lowcode-notify-close-color: var(--ti-lowcode-base-gray-50); + --ti-lowcode-notify-close-hover-color: var(--ti-lowcode-base-gray-90); + } } diff --git a/packages/theme/light/tiny-numeric.less b/packages/theme/light/tiny-numeric.less index 7ced7418d..3627ce37a 100644 --- a/packages/theme/light/tiny-numeric.less +++ b/packages/theme/light/tiny-numeric.less @@ -1,4 +1,6 @@ -div.tiny-numeric { - --ti-lowcode-tiny-numeric-icon-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-tiny-numeric-icon-hover-color: var(--ti-lowcode-base-gray-50); +:root[data-theme='light'] { + div.tiny-numeric { + --ti-lowcode-tiny-numeric-icon-color: var(--ti-lowcode-base-gray-90); + --ti-lowcode-tiny-numeric-icon-hover-color: var(--ti-lowcode-base-gray-50); + } } diff --git a/packages/theme/light/tiny-search.less b/packages/theme/light/tiny-search.less index 29f9851d0..11b3da49b 100644 --- a/packages/theme/light/tiny-search.less +++ b/packages/theme/light/tiny-search.less @@ -1,14 +1,16 @@ -.tiny-search { - // 搜索框图标颜色 - --ti-lowcode-search-icon-color: #808080; - // 搜索框图标悬浮时颜色 - --ti-lowcode-search-hover-icon-color: #191919; +:root[data-theme='light'] { + .tiny-search { + // 搜索框图标颜色 + --ti-lowcode-search-icon-color: #808080; + // 搜索框图标悬浮时颜色 + --ti-lowcode-search-hover-icon-color: #191919; - // tinysearch 背景色 - --ti-lowcode-component-search-bg: var(--ti-lowcode-base-bg-5); + // tinysearch 背景色 + --ti-lowcode-component-search-bg: var(--ti-lowcode-base-bg-5); - // 搜索框hover背景色 - --ti-lowcode-search-hover-bg: var(--ti-lowcode-base-bg-5); - --ti-lowcode-search-input-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-search-input-placeholder-color: var(--ti-lowcode-base-gray-50); + // 搜索框hover背景色 + --ti-lowcode-search-hover-bg: var(--ti-lowcode-base-bg-5); + --ti-lowcode-search-input-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-search-input-placeholder-color: var(--ti-lowcode-base-gray-50); + } } diff --git a/packages/theme/light/tiny-switch.less b/packages/theme/light/tiny-switch.less index f0590cade..fbf836d11 100644 --- a/packages/theme/light/tiny-switch.less +++ b/packages/theme/light/tiny-switch.less @@ -1,5 +1,7 @@ -.tiny-switch { - --ti-lowcode-tiny-switch-bg-color: #c2c2c2; - --ti-lowcode-tiny-switch-checked-bg-color: var(--ti-lowcode-base-blue-6); - --ti-lowcode-tiny-switch-dot-bg: var(--ti-lowcode-base-bg-5); +:root[data-theme='light'] { + .tiny-switch { + --ti-lowcode-tiny-switch-bg-color: #c2c2c2; + --ti-lowcode-tiny-switch-checked-bg-color: var(--ti-lowcode-base-blue-6); + --ti-lowcode-tiny-switch-dot-bg: var(--ti-lowcode-base-bg-5); + } } diff --git a/packages/theme/light/toolbar.less b/packages/theme/light/toolbar.less index 778b9cadc..a2dc82eea 100644 --- a/packages/theme/light/toolbar.less +++ b/packages/theme/light/toolbar.less @@ -1,14 +1,16 @@ -.tiny-engine-toolbar { - // 头部工具栏 - --ti-lowcode-toolbar-border-bottom-color: var(--ti-lowcode-common-border-color-4); - --ti-lowcode-toolbar-media-bg: var(--ti-lowcode-common-component-bg); - --ti-lowcode-toolbar-media-setting-border-color: var(--ti-lowcode-common-border-color-1); - --ti-lowcode-toolbar-title-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-toolbar-sub-title-color: var(--ti-lowcode-base-gray-60); - --ti-lowcode-toolbar-hover-color: var(--ti-lowcode-base-bg); - --ti-lowcode-toolbar-view-active-bg: #f2f2f2; // 相当于 规范中定义的 #191919 透明度5% - --ti-lowcode-toolbar-popover-bg: var(--ti-lowcode-base-gray-0); - --ti-lowcode-toolbar-active-color: var(--ti-lowcode-base-gray-60); - --ti-lowcode-toolbar-user-img-border-color: var(--ti-lowcode-base-gray-20); - --ti-lowcode-toolbar-dot-color: var(--ti-lowcode-base-brand-color); +:root[data-theme='light'] { + .tiny-engine-toolbar { + // 头部工具栏 + --ti-lowcode-toolbar-border-bottom-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-toolbar-media-bg: var(--ti-lowcode-common-component-bg); + --ti-lowcode-toolbar-media-setting-border-color: var(--ti-lowcode-common-border-color-1); + --ti-lowcode-toolbar-title-color: var(--ti-lowcode-base-gray-90); + --ti-lowcode-toolbar-sub-title-color: var(--ti-lowcode-base-gray-60); + --ti-lowcode-toolbar-hover-color: var(--ti-lowcode-base-bg); + --ti-lowcode-toolbar-view-active-bg: #f2f2f2; // 相当于 规范中定义的 #191919 透明度5% + --ti-lowcode-toolbar-popover-bg: var(--ti-lowcode-base-gray-0); + --ti-lowcode-toolbar-active-color: var(--ti-lowcode-base-gray-60); + --ti-lowcode-toolbar-user-img-border-color: var(--ti-lowcode-base-gray-20); + --ti-lowcode-toolbar-dot-color: var(--ti-lowcode-base-brand-color); + } } diff --git a/packages/theme/light/tree.less b/packages/theme/light/tree.less index d29c7bdac..eeef748cb 100644 --- a/packages/theme/light/tree.less +++ b/packages/theme/light/tree.less @@ -1,7 +1,9 @@ -.outlinebox { - --ti-lowcode-tree-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-tree-icon-color: var(--ti-lowcode-base-primary-color-1); - --ti-lowcode-tree-icon-hover-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-tree-selected-color: var(--ti-lowcode-common-text-main-color); - --ti-lowcode-tree-selected-bg: var(--ti-lowcode-base-bg); +:root[data-theme='light'] { + .outlinebox { + --ti-lowcode-tree-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-tree-icon-color: var(--ti-lowcode-base-primary-color-1); + --ti-lowcode-tree-icon-hover-color: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-tree-selected-color: var(--ti-lowcode-common-text-main-color); + --ti-lowcode-tree-selected-bg: var(--ti-lowcode-base-bg); + } } diff --git a/packages/theme/light/tutorial.less b/packages/theme/light/tutorial.less index 45404b2f6..3c2da4b7c 100644 --- a/packages/theme/light/tutorial.less +++ b/packages/theme/light/tutorial.less @@ -1,5 +1,7 @@ -#tiny-engine-left-panel { - --ti-lowcode-tutorial-primary-text-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-tutorial-primary-bg-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-tutorial-hover-bg-color: var(--ti-lowcode-base-bg); +:root[data-theme='light'] { + #tiny-engine-left-panel { + --ti-lowcode-tutorial-primary-text-color: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-tutorial-primary-bg-color: var(--ti-lowcode-base-bg-5); + --ti-lowcode-tutorial-hover-bg-color: var(--ti-lowcode-base-bg); + } } diff --git a/packages/theme/light/variable.less b/packages/theme/light/variable.less index b93ba581f..626a2e4b2 100644 --- a/packages/theme/light/variable.less +++ b/packages/theme/light/variable.less @@ -1,5 +1,5 @@ // 亮色主题 -:root { +:root[data-theme='light'] { // 基础配置，前缀为 --base --base-min-width: 1280px; diff --git a/packages/toolbars/changetheme/index.js b/packages/toolbars/changetheme/index.js new file mode 100644 index 000000000..34b358eda --- /dev/null +++ b/packages/toolbars/changetheme/index.js @@ -0,0 +1,21 @@ +/** + * 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 component from './src/Main.vue' + +export default { + id: 'changetheme', + title: 'changetheme', + icon: '', + align: 'right', + component +} diff --git a/packages/toolbars/changetheme/package.json b/packages/toolbars/changetheme/package.json new file mode 100644 index 000000000..a9e5d268d --- /dev/null +++ b/packages/toolbars/changetheme/package.json @@ -0,0 +1,39 @@ +{ + "name": "@opentiny/tiny-engine-toolbar-changetheme", + "version": "1.0.3", + "publishConfig": { + "access": "public" + }, + "scripts": { + "build": "vite build" + }, + "main": "dist/index.js", + "module": "dist/index.js", + "files": [ + "dist" + ], + "repository": { + "type": "git", + "url": "https://github.com/opentiny/tiny-engine", + "directory": "packages/toolbars/setting" + }, + "bugs": { + "url": "https://github.com/opentiny/tiny-engine/issues" + }, + "author": "OpenTiny Team", + "license": "MIT", + "homepage": "https://opentiny.design/tiny-engine", + "dependencies": { + "@opentiny/tiny-engine-controller": "workspace:*", + "@opentiny/tiny-engine-utils": "workspace:*", + "@opentiny/vue": "~3.10.0" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^4.2.3", + "@vitejs/plugin-vue-jsx": "^3.1.0", + "vite": "^4.3.7" + }, + "peerDependencies": { + "vue": "^3.4.15" + } +} diff --git a/packages/toolbars/changetheme/src/Main.vue b/packages/toolbars/changetheme/src/Main.vue new file mode 100644 index 000000000..8f6f1d323 --- /dev/null +++ b/packages/toolbars/changetheme/src/Main.vue @@ -0,0 +1,50 @@ + + + diff --git a/packages/toolbars/changetheme/vite.config.js b/packages/toolbars/changetheme/vite.config.js new file mode 100644 index 000000000..62c1208b5 --- /dev/null +++ b/packages/toolbars/changetheme/vite.config.js @@ -0,0 +1,33 @@ +/** + * 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' + +export default defineConfig({ + plugins: [vue(), vueJsx()], + publicDir: false, + resolve: {}, + build: { + lib: { + entry: path.resolve(__dirname, './index.js'), + name: 'toolbar-change-theme', + fileName: () => 'index.js', + formats: ['es'] + }, + rollupOptions: { + external: ['vue', /@opentiny\/tiny-engine.*/, /@opentiny\/vue.*/] + } + } +}) From 197a027760166cac21e3bd4aa914c259c6da930b Mon Sep 17 00:00:00 2001 From: wenmine Date: Thu, 9 May 2024 11:11:05 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat(theme):=20=E6=B7=BB=E5=8A=A0=E5=88=87?= =?UTF-8?q?=E6=8D=A2=E4=B8=BB=E9=A2=98=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/controller/src/globalConfig.js | 24 ++++---- packages/controller/src/index.js | 3 +- packages/design-core/assets/changetheme.svg | 1 + packages/toolbars/changetheme/src/Main.vue | 66 +++++++++++++-------- 4 files changed, 57 insertions(+), 37 deletions(-) create mode 100644 packages/design-core/assets/changetheme.svg diff --git a/packages/controller/src/globalConfig.js b/packages/controller/src/globalConfig.js index 062d379ed..0f29dbea5 100644 --- 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 +} diff --git a/packages/controller/src/index.js b/packages/controller/src/index.js index 322c248ed..edb9e08dc 100644 --- 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 new file mode 100644 index 000000000..cd8caf2d3 --- /dev/null +++ b/packages/design-core/assets/changetheme.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/toolbars/changetheme/src/Main.vue b/packages/toolbars/changetheme/src/Main.vue index 8f6f1d323..a3ce44cda 100644 --- a/packages/toolbars/changetheme/src/Main.vue +++ b/packages/toolbars/changetheme/src/Main.vue @@ -1,49 +1,63 @@