fix: Modify the dark theme style #1186
Conversation
WalkthroughThis change updates CSS styling in the LESS file for theme components. Background colors for dropdowns and selected options have been updated, and several class selectors have been modified to duplicate their names for increased specificity. Additionally, color properties for collapse arrows have been added and tweaked, including a new hover state. These modifications affect only the visual styling of the UI components without altering their functionality. Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 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: 0
🧹 Nitpick comments (3)
packages/theme/base/src/component-common.less (3)
123-130: Increase Specificity for Collapse Header
The selector for the collapse header has been updated to duplicate its class (.tiny-collapse-item__header.tiny-collapse-item__header), ensuring higher specificity. While this hack can be effective, please verify that it does not introduce maintainability issues or unexpected overrides in other parts of the theme.
500-503: Increase Specificity for Modal Text
The.tiny-modal__textselector has been updated to use a duplicated class (.tiny-modal__text.tiny-modal__text). This pattern increases specificity to override conflicting styles. Consider documenting why this pattern was chosen to assist future maintenance.
359-423: Review Button Specificity Enhancement
The.tiny-buttonselector has been modified to duplicate its class multiple times (.tiny-button.tiny-button.tiny-button.tiny-button). This enforces higher specificity, which can help in ensuring dark theme styles are applied correctly. However, duplicating selectors may lead to maintainability challenges. It’s worth considering if an alternative strategy (like more descriptive or contextual selectors) might be preferable in the long term.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
packages/design-core/assets/fixed-solid.svgis excluded by!**/*.svg
📒 Files selected for processing (1)
packages/theme/base/src/component-common.less(6 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: push-check
🔇 Additional comments (3)
packages/theme/base/src/component-common.less (3)
36-38: Update Dropdown Background for Dark Theme Consistency
The background color for dropdowns is now set tovar(--te-common-bg-popover), which should better suit the dark theme aesthetics.
63-69: Update Selected Option Styling
In the.tiny-option.selectedblock, the background color now usesvar(--te-common-bg-popover). This change aligns the selected state with the overall dark theme style.
138-148: Enhance Collapse Arrow Styling
The styling for.tiny-collapse-item__arrowhas been improved:
- The base color is now
var(--te-common-icon-secondary).- The
svgelement’s fill is set tocurrentcolor, which should make the icon adapt to its parent color.- On hover, the color changes to
var(--te-common-icon-primary).
These changes appear to support the dark theme, but please verify the inheritance ofcurrentcolorin various browsers.
暗色主题下样式调整 1.下拉框面板背景 2.折叠面板图标 3.消息提示文字颜色 4.固定面板图标 5.按钮hover背景
暗色主题下样式调整 1.下拉框面板背景 2.折叠面板图标 3.消息提示文字颜色 4.固定面板图标 5.按钮hover背景
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
暗色主题下样式调整
1.下拉框面板背景
2.折叠面板图标
3.消息提示文字颜色
4.固定面板图标
5.按钮hover背景
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information