style: adaptation issues in dark mode #4660
Conversation
|
WalkthroughThe pull request introduces updates to three Vue components: Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration 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
🧹 Outside diff range and nitpick comments (1)
packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue (1)
89-90: Enhanced active state for menu itemsThe change to apply
text-primaryto both the name and icon of active menu items improves visual distinction and contributes to a more cohesive color scheme in dark mode.Consider adding a transition effect to the color change for a smoother user experience. You can add the following CSS property to the
.#{$namespace}-normal-menu__nameand.#{$namespace}-normal-menu__iconselectors:transition: color 0.2s ease;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
- packages/@core/ui-kit/menu-ui/src/components/menu.vue (6 hunks)
- packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue (1 hunks)
- packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue (2 hunks)
🧰 Additional context used
🔇 Additional comments (9)
packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue (2)
83-83: Improved hover state for menu itemsThe change to apply
text-primaryon hover for non-active menu items enhances the visual feedback and aligns with the PR's objective of improving dark mode adaptation.
Line range hint
1-158: Summary of changes and their impactThe modifications in this file effectively address the dark mode adaptation issues mentioned in the PR objectives. The styling updates for hover and active states of menu items improve the user interface and interaction feedback. These changes contribute to a more consistent and visually appealing dark mode experience.
Key improvements:
- Enhanced hover state for non-active menu items
- Improved active state styling for both icon and text
- Consistent use of
text-primaryfor interactive elementsThe changes are focused and do not introduce any apparent issues or inconsistencies. They align well with the PR's goal of improving the dark mode theme adaptation.
packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue (4)
96-96: Improved dark mode adaptation for active tabsThis change enhances the visual consistency in dark mode by using a semi-transparent primary color (
bg-primary/15) instead of the accent color for active tabs. This adjustment likely reduces excessive contrast and provides a more cohesive look in the dark theme, aligning well with the PR's objective of addressing dark mode adaptation issues.
99-99: Consistent styling for tab background elementsThis change applies the same color adjustment (
fill-primary/15) to the SVG element as was applied to the main background. This ensures visual consistency between the tab's background and its decorative elements in dark mode, contributing to a more polished and cohesive user interface.
133-133: Enhanced text visibility for active tabs in dark modeThis change improves the text color of active tabs in dark mode by using the primary color instead of the accent foreground color. This adjustment:
- Enhances readability by potentially increasing contrast with the background.
- Maintains visual consistency with the other dark mode adaptations in this PR.
- Contributes to a more unified and polished appearance of the tab component in dark mode.
These modifications collectively address the PR's objective of resolving dark mode adaptation issues for the menu and thematic elements.
Line range hint
96-133: Summary: Effective dark mode adaptationsThe changes in this file successfully address the PR's objective of resolving dark mode adaptation issues. By consistently applying a semi-transparent primary color theme to active tab backgrounds, SVG elements, and text, these modifications:
- Improve visual consistency across the tab component in dark mode.
- Potentially enhance readability and reduce excessive contrast.
- Create a more cohesive and polished user interface in dark theme.
These adaptations contribute to a better overall user experience in dark mode, aligning well with the goals of the pull request.
packages/@core/ui-kit/menu-ui/src/components/menu.vue (3)
448-455: Enhance visual consistency with updated color variablesThe modifications to the color variables within the
.is-darktheme enhance the visual consistency of the menu in dark mode. Setting the hover and active colors to usehsl(var(--primary))aligns the color scheme with the primary theme.
Line range hint
464-471: Improve visual consistency in light theme with updated color variablesThe updates to the color variables in the
.is-lighttheme enhance the user experience by aligning hover and active states with the primary color scheme. This ensures a cohesive visual appearance in light mode.
501-508: Align horizontal menu dark theme styling with primary color schemeThe adjustments to the color variables for the
.is-darkhorizontal menu ensure consistency with the primary theme colors, improving the user interface in dark mode.
pingsanddoss
changed the title
pingsanddoss
changed the title
|
这个之前改成accent的原因是，有些皮肤是浅色的，这个改成主色会有点问题 |
|
我感觉全是黑白的好像不是很好看，逻辑上主题色是用户自己选择的，在黑暗模式下最好也展示出主题色，希望作者可以考虑一下 |
|
后面看看，考虑加个配置菜单色的功能吧，跟主题色分离开 |
|
那这个pr接受吗，我觉得可以试一下，后面有其他方案可以再改^_^ |
|
ci没有通过 |
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (2)
packages/stores/src/modules/tabbar.ts (2)
315-322: Translate code comments to English for consistencyThe code comments are currently written in Chinese. To maintain consistency across the codebase and facilitate collaboration among international team members, it's recommended to use English for all code comments.
429-434: Translate code comments to English for consistencyThe comments in this section are in Chinese. For consistency and better collaboration, please translate code comments to English.
|
再试试 |
|
这个先暂定下，目前有些皮肤下是有问题。后面整体优化配色的时候在看下 |
|
好的谢谢作者 |
Description
黑暗模式下菜单等主题的适配
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit
New Features
Bug Fixes
Style