Feat/theme #482
Feat/theme #482
Conversation
WalkthroughThe recent updates introduce a new theme-changing toolbar plugin and enhance theme management across the project. Key changes include adding the Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Out of diff range and nitpick comments (2)
packages/theme/dark/base.less (1)
1-1: Ensure the theme selector is consistent with other theme files.The
:root[data-theme='dark']selector is appropriate for a dark theme. Ensure that other theme files use a similar structure for consistency.packages/theme/dark/variable.less (1)
2-2: Consider adding comments for better maintainability.Adding comments to explain the purpose of each section of CSS variables can improve maintainability and readability.
// 基础配置，前缀为 --base --base-min-width: 1280px; // ------ 主要的公共主题色，前缀为 --ti-lowcode-common ------- --ti-lowcode-common-primary-color: #4f77ff; ...
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (2)
mockServer/src/database/pages.dbis excluded by!**/*.dbpackages/design-core/assets/changetheme.svgis excluded by!**/*.svg
Files selected for processing (53)
- jsconfig.json (2 hunks)
- packages/controller/src/globalConfig.js (2 hunks)
- packages/controller/src/index.js (2 hunks)
- packages/design-core/config/addons.js (3 hunks)
- packages/design-core/package.json (1 hunks)
- packages/design-core/src/App.vue (2 hunks)
- packages/design-core/src/preview/src/App.vue (1 hunks)
- packages/design-core/vite.config.js (4 hunks)
- packages/theme/dark/base.less (1 hunks)
- packages/theme/dark/block.less (1 hunks)
- packages/theme/dark/bridge.less (1 hunks)
- packages/theme/dark/button.less (1 hunks)
- packages/theme/dark/canvas.less (1 hunks)
- packages/theme/dark/datasource.less (1 hunks)
- packages/theme/dark/events.less (1 hunks)
- packages/theme/dark/gpt-dialog.less (1 hunks)
- packages/theme/dark/help.less (1 hunks)
- packages/theme/dark/i18n.less (1 hunks)
- packages/theme/dark/life-cycles.less (1 hunks)
- packages/theme/dark/materials.less (1 hunks)
- packages/theme/dark/metaComponent.less (1 hunks)
- packages/theme/dark/pageManage.less (1 hunks)
- packages/theme/dark/plugin-js.less (1 hunks)
- packages/theme/dark/radio.less (1 hunks)
- packages/theme/dark/setting-style.less (1 hunks)
- packages/theme/dark/settings.less (1 hunks)
- packages/theme/dark/tiny-checkbox.less (1 hunks)
- packages/theme/dark/tiny-collapse.less (1 hunks)
- packages/theme/dark/tiny-dialog-box.less (1 hunks)
- packages/theme/dark/tiny-grid.less (1 hunks)
- packages/theme/dark/tiny-input.less (1 hunks)
- packages/theme/dark/tiny-modal.less (1 hunks)
- packages/theme/dark/tiny-notify.less (1 hunks)
- packages/theme/dark/tiny-numeric.less (1 hunks)
- packages/theme/dark/tiny-search.less (1 hunks)
- packages/theme/dark/tiny-switch.less (1 hunks)
- packages/theme/dark/tiny-tabs.less (1 hunks)
- packages/theme/dark/toolbar.less (1 hunks)
- packages/theme/dark/tree.less (1 hunks)
- packages/theme/dark/tutorial.less (1 hunks)
- packages/theme/dark/variable.less (1 hunks)
- packages/theme/light/base.less (1 hunks)
- packages/theme/light/block.less (1 hunks)
- packages/theme/light/datasource.less (1 hunks)
- packages/theme/light/i18n.less (1 hunks)
- packages/theme/light/life-cycles.less (1 hunks)
- packages/theme/light/materials.less (1 hunks)
- packages/theme/light/metaComponent.less (1 hunks)
- packages/theme/light/pageManage.less (1 hunks)
- packages/theme/light/plugin-js.less (1 hunks)
- packages/theme/light/radio.less (1 hunks)
- packages/theme/light/setting-style.less (1 hunks)
- packages/theme/light/settings.less (1 hunks)
Files not processed due to max files limit (17)
- packages/theme/light/tiny-collapse.less
- packages/theme/light/tiny-dialog-box.less
- packages/theme/light/tiny-grid.less
- packages/theme/light/tiny-input.less
- packages/theme/light/tiny-modal.less
- packages/theme/light/tiny-notify.less
- packages/theme/light/tiny-numeric.less
- packages/theme/light/tiny-search.less
- packages/theme/light/tiny-switch.less
- packages/theme/light/toolbar.less
- packages/theme/light/tree.less
- packages/theme/light/tutorial.less
- packages/theme/light/variable.less
- packages/toolbars/changetheme/index.js
- packages/toolbars/changetheme/package.json
- packages/toolbars/changetheme/src/Main.vue
- packages/toolbars/changetheme/vite.config.js
Files skipped from review due to trivial changes (22)
- jsconfig.json
- packages/controller/src/index.js
- packages/design-core/package.json
- packages/design-core/vite.config.js
- packages/theme/dark/canvas.less
- packages/theme/dark/events.less
- packages/theme/dark/help.less
- packages/theme/dark/i18n.less
- packages/theme/dark/metaComponent.less
- packages/theme/dark/pageManage.less
- packages/theme/dark/radio.less
- packages/theme/dark/setting-style.less
- packages/theme/dark/settings.less
- packages/theme/dark/tiny-collapse.less
- packages/theme/dark/tiny-dialog-box.less
- packages/theme/dark/tiny-switch.less
- packages/theme/dark/tree.less
- packages/theme/dark/tutorial.less
- packages/theme/light/metaComponent.less
- packages/theme/light/pageManage.less
- packages/theme/light/setting-style.less
- packages/theme/light/settings.less
Additional comments not posted (78)
packages/theme/dark/tiny-tabs.less (1)
1-6: The CSS variables for the dark theme in.tiny-tabsare well-defined and scoped correctly. Good job!packages/theme/dark/tiny-notify.less (1)
1-6: The CSS variables for the dark theme in.tiny-notifyare well-defined and scoped correctly. Good job!packages/theme/light/i18n.less (1)
Line range hint
1-6: The CSS variables for the light theme in i18n components are well-defined and scoped correctly. Good job!packages/theme/dark/life-cycles.less (1)
Line range hint
1-6: The CSS variables for the dark theme in lifecycle components are well-defined and scoped correctly. Good job!packages/theme/light/life-cycles.less (1)
Line range hint
1-6: The CSS variables for the light theme in lifecycle components are well-defined and scoped correctly. Good job!packages/theme/light/radio.less (1)
1-7: The CSS variables for the light theme in.tiny-radio-groupare well-defined and scoped correctly. Good job!packages/theme/dark/plugin-js.less (1)
1-8: CSS variables for dark theme plugin page JS container look good.packages/theme/light/plugin-js.less (1)
1-8: CSS variables for light theme plugin page JS container look good.packages/theme/dark/tiny-modal.less (1)
Line range hint
2-9: CSS variables for dark theme tiny modal component look good.packages/theme/dark/tiny-numeric.less (1)
1-12: CSS variables for dark theme tiny numeric component look good.packages/design-core/src/preview/src/App.vue (1)
10-11: Theme imports look good.packages/theme/dark/tiny-search.less (1)
1-24: Dark theme styles are well-defined and scoped correctly.packages/theme/dark/toolbar.less (1)
1-15: Dark theme styles are well-defined and scoped correctly.packages/theme/dark/tiny-input.less (1)
1-26: Dark theme styles are well-defined and scoped correctly.packages/theme/dark/tiny-grid.less (1)
1-25: Dark theme styles are well-defined and scoped correctly.packages/theme/dark/materials.less (1)
1-1: Dark theme styles are well-defined and scoped correctly.packages/theme/dark/tiny-checkbox.less (1)
1-28: LGTM! The CSS variables for the dark theme are well-defined and scoped correctly.packages/theme/light/materials.less (1)
1-1: LGTM! The CSS variables for the light theme are well-defined and scoped correctly.packages/theme/dark/button.less (1)
1-35: LGTM! The CSS variables for the dark theme buttons are well-defined and scoped correctly.packages/theme/dark/gpt-dialog.less (1)
1-52: LGTM! The CSS variables for the dark theme GPT dialog are well-defined and scoped correctly.packages/design-core/config/addons.js (3)
27-27: LGTM! TheChangeThemetoolbar is correctly imported.
46-47: LGTM! The theme imports for light and dark themes are correctly added.
66-66: LGTM! TheChangeThemetoolbar is correctly added to thetoolbarsarray.packages/theme/dark/datasource.less (1)
1-1: LGTM! The CSS variables for the dark theme datasource are well-defined and scoped correctly.packages/theme/light/block.less (1)
1-1: CSS variables scoped under the light theme look good.packages/theme/dark/block.less (1)
1-1: CSS variables scoped under the dark theme look good.packages/design-core/src/App.vue (3)
Line range hint
1-23: The template structure is clear and well-organized.
Line range hint
24-81: The script section is well-structured and the usage ofgetGlobalConfigto set the theme color is appropriate.
Line range hint
83-108: The styles are well-defined and scoped correctly.packages/theme/light/base.less (23)
Line range hint
1-13: Gray scale variables are well-defined.
Line range hint
14-26: Red scale variables are well-defined.
Line range hint
27-39: Orange scale variables are well-defined.
Line range hint
40-52: Yellow scale variables are well-defined.
Line range hint
53-65: Lemon scale variables are well-defined.
Line range hint
66-78: Lime scale variables are well-defined.
Line range hint
79-91: Kelly scale variables are well-defined.
Line range hint
92-104: Green scale variables are well-defined.
Line range hint
105-117: Mint scale variables are well-defined.
Line range hint
118-130: Sky scale variables are well-defined.
Line range hint
131-143: Blue scale variables are well-defined.
Line range hint
144-156: Indigo scale variables are well-defined.
Line range hint
157-169: Purple scale variables are well-defined.
Line range hint
170-182: Pink scale variables are well-defined.
Line range hint
183-195: Rose scale variables are well-defined.
Line range hint
196-197: Brand color variables are well-defined.
Line range hint
198-199: Primary color variables are well-defined.
Line range hint
200-206: Background color variables are well-defined.
Line range hint
207-211: Text color variables are well-defined.
Line range hint
212-215: Text link color variables are well-defined.
Line range hint
216-220: Button border color variables are well-defined.
Line range hint
221-223: Split color variables are well-defined.
Line range hint
224-230: State color variables are well-defined.packages/theme/dark/base.less (23)
Line range hint
2-13: Gray scale colors are well-defined.The gray scale colors cover a wide range from white to black, which is suitable for a dark theme.
Line range hint
15-27: Red scale colors are well-defined.The red scale colors provide a good gradient from light to dark red, which can be useful for various UI elements.
Line range hint
29-41: Orange scale colors are well-defined.The orange scale colors offer a comprehensive range from light to dark orange, suitable for warning or highlight elements.
Line range hint
43-55: Yellow scale colors are well-defined.The yellow scale colors provide a good gradient, useful for warning or attention-grabbing elements.
Line range hint
57-69: Lemon scale colors are well-defined.The lemon scale colors offer a bright and varied range, suitable for highlighting or accent elements.
Line range hint
71-83: Lime scale colors are well-defined.The lime scale colors provide a fresh and vibrant range, useful for success or positive indicators.
Line range hint
85-97: Kelly scale colors are well-defined.The kelly scale colors offer a natural and varied range, suitable for success or nature-related elements.
Line range hint
99-111: Green scale colors are well-defined.The green scale colors provide a comprehensive range, useful for success or positive indicators.
Line range hint
113-125: Mint scale colors are well-defined.The mint scale colors offer a cool and refreshing range, suitable for calming or neutral elements.
Line range hint
127-139: Sky scale colors are well-defined.The sky scale colors provide a bright and varied range, useful for informational or neutral elements.
Line range hint
141-153: Blue scale colors are well-defined.The blue scale colors offer a comprehensive range, suitable for primary or informational elements.
Line range hint
155-167: Indigo scale colors are well-defined.The indigo scale colors provide a deep and varied range, useful for primary or accent elements.
Line range hint
169-181: Purple scale colors are well-defined.The purple scale colors offer a rich and varied range, suitable for accent or highlight elements.
Line range hint
183-195: Pink scale colors are well-defined.The pink scale colors provide a bright and varied range, useful for accent or highlight elements.
Line range hint
197-209: Rose scale colors are well-defined.The rose scale colors offer a soft and varied range, suitable for accent or highlight elements.
Line range hint
211-211: Brand color is well-defined.The brand color is clearly defined, ensuring consistency with the company's branding.
Line range hint
213-214: Primary colors are well-defined.The primary colors provide a clear distinction between different UI elements.
Line range hint
216-221: Background colors are well-defined.The background colors offer a good range for different UI elements, ensuring readability and contrast.
Line range hint
223-227: Text colors are well-defined.The text colors provide a good contrast, ensuring readability across different backgrounds.
Line range hint
229-233: Text link colors are well-defined.The text link colors offer a clear distinction, ensuring visibility and usability.
Line range hint
235-239: Button border colors are well-defined.The button border colors provide a good range for different button states, ensuring usability and accessibility.
Line range hint
241-243: Split colors are well-defined.The split colors offer a clear distinction for different UI elements, ensuring readability and separation.
Line range hint
245-250: State colors are well-defined.The state colors provide a clear indication of different states, ensuring usability and accessibility.
packages/theme/dark/variable.less (3)
2-2: Ensure the:root[data-theme='dark']selector is applied correctly.Verify that the
:root[data-theme='dark']selector is correctly applied in the HTML to ensure the dark theme variables are used as intended.
2-2: Ensure all CSS variables follow a consistent naming convention.Verify that all CSS variables follow a consistent naming convention, such as using
--ti-lowcode-as a prefix.
2-2: Check for potential performance issues with a large number of CSS variables.Verify that the large number of CSS variables does not cause performance issues in the browser, especially on lower-end devices.
| :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; | ||
| } |
There was a problem hiding this comment.
Fix typographical errors in variable names.
- --ti-lowcode-birdge-editor-border-color: #262626;
- --ti-lowcode-birdge-input-label-color: #adb0b8;
- --ti-lowcode-birdge-code-preview-color: var(--ti-lowcode-base-gray-20);
- --ti-lowcode-birdge-code-preview-bg-color: #262626;
+ --ti-lowcode-bridge-editor-border-color: #262626;
+ --ti-lowcode-bridge-input-label-color: #adb0b8;
+ --ti-lowcode-bridge-code-preview-color: var(--ti-lowcode-base-gray-20);
+ --ti-lowcode-bridge-code-preview-bg-color: #262626;Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| :root[data-theme='dark'] { | |
| .plugin-panel { | |
| // 资源管理 | |
| --ti-lowcode-bridge-list-color: #adb0b8; | |
| --ti-lowcode-bridge-list-bg: #3c3c3c; | |
| --ti-lowcode-birdge-editor-border-color: #262626; | |
| --ti-lowcode-birdge-input-label-color: #adb0b8; | |
| // npm工具类中代码预览的主题 | |
| --ti-lowcode-birdge-code-preview-color: var(--ti-lowcode-base-gray-20); | |
| --ti-lowcode-birdge-code-preview-bg-color: #262626; | |
| // npm工具类中代码预览的主题 | |
| --ti-lowcode-birdge-code-preview-color: var(--ti-lowcode-base-gray-20); | |
| --ti-lowcode-birdge-code-preview-bg-color: #262626; | |
| } | |
| :root[data-theme='dark'] { | |
| .plugin-panel { | |
| // 资源管理 | |
| --ti-lowcode-bridge-list-color: #adb0b8; | |
| --ti-lowcode-bridge-list-bg: #3c3c3c; | |
| --ti-lowcode-bridge-editor-border-color: #262626; | |
| --ti-lowcode-bridge-input-label-color: #adb0b8; | |
| // npm工具类中代码预览的主题 | |
| --ti-lowcode-bridge-code-preview-color: var(--ti-lowcode-base-gray-20); | |
| --ti-lowcode-bridge-code-preview-bg-color: #262626; | |
| } |
| export const updateGlobalSingleConfig = (key, value) => { | ||
| globalConfig[key] = value | ||
| } |
There was a problem hiding this comment.
Ensure the key exists before updating the global configuration.
- globalConfig[key] = value
+ if (globalConfig.hasOwnProperty(key)) {
+ globalConfig[key] = value;
+ } else {
+ console.warn(`Key ${key} does not exist in globalConfig.`);
+ }Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| export const updateGlobalSingleConfig = (key, value) => { | |
| globalConfig[key] = value | |
| } | |
| export const updateGlobalSingleConfig = (key, value) => { | |
| if (globalConfig.hasOwnProperty(key)) { | |
| globalConfig[key] = value; | |
| } else { | |
| console.warn(`Key ${key} does not exist in globalConfig.`); | |
| } | |
| } |
| @@ -1,4 +1,4 @@ | |||
| :root { | |||
| :root[data-theme='light'] { | |||
There was a problem hiding this comment.
CSS variables scoped under the light theme look good. There is a minor typo in --ti-lowcode-datasource-json-border-colorr.
- --ti-lowcode-datasource-json-border-colorr: var(--ti-lowcode-common-primary-color);
+ --ti-lowcode-datasource-json-border-color: var(--ti-lowcode-common-primary-color);Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| :root[data-theme='light'] { | |
| :root[data-theme='light'] { | |
| --ti-lowcode-datasource-json-border-color: var(--ti-lowcode-common-primary-color); |
English | 简体中文
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Background and solution
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Enhancements
Bug Fixes
Chores