feat:[anchor,calendar-view,filter-panel,loading,date-picker,pop-upload,search,scroll-text,step,tabs,wizard,file-upload, calendar]The widget supports dark themes. #2965
Conversation
|
Warning Rate limit exceeded@discreted66 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 15 minutes and 20 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (33)
WalkthroughThis pull request applies a series of CSS and styling refinements across multiple Vue component files and theme packages. The changes include switching CSS processing to Less, removing fixed color values in favor of CSS variables, adding new pseudo-element rules, and adjusting hover states, spacing, and typography. Additionally, minor template and constant cleanups were made in both demo examples and core theme files, ensuring a more dynamic and consistent visual presentation across components. Changes
Possibly related PRs
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 (
|
Walkthrough此PR为组件添加了对暗色主题的支持，涉及多个文件的样式调整和变量修改，以适应暗色主题的需求。主要更改包括样式文件中颜色变量的调整和组件样式的更新。 Changes
🪧 TipsFor further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me. |
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
|
[e2e-test-warn] The title of the Pull request should look like "fix(vue-renderless): [action-menu, alert] fix xxx bug". Please make sure you've read our contributing guide |
WalkthroughThis PR adds support for dark themes to the component, involving style adjustments and variable modifications of multiple files to suit the needs of dark themes. The main changes include adjustments to color variables in the style file and updates to component styles. Changes
🪧 TipsFor further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me. |
|
It seems like you've shared a detailed walkthrough of a pull request that adds support for dark themes to a component in the opentiny/tiny-vue project. The changes involve style adjustments and variable modifications across multiple files to accommodate dark themes. If you have any specific questions or need further assistance regarding this PR or any other aspect of opentiny/tiny-vue, feel free to ask! 🪧 TipsFor further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me. |
discreted66
force-pushed
the
darkTheme1
branch
from
216f887 to
75ec1d5
Compare
![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 (1)
examples/sites/demos/pc/app/icon/list-composition-api.vue (1)
105-112: Consider using CSS variables for hover colors.While the hover effects enhance the UI, using hardcoded color values (
#191919) may not fully support dark themes. Consider using CSS variables for better theme compatibility..svgs-item:hover { background-color: #f6f8fa; - color: #191919; + color: var(--tv-color-text-active, #191919); } .svgs-item:hover .svgs-icon { - fill: #191919; + fill: var(--tv-color-icon-active, #191919); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (30)
examples/sites/demos/pc/app/filter-panel/code-composition-api.vue(2 hunks)examples/sites/demos/pc/app/filter-panel/code.vue(2 hunks)examples/sites/demos/pc/app/icon-multicolor/list-composition-api.vue(1 hunks)examples/sites/demos/pc/app/icon-multicolor/list.vue(1 hunks)examples/sites/demos/pc/app/icon/list-composition-api.vue(1 hunks)examples/sites/demos/pc/app/icon/list.vue(2 hunks)examples/sites/demos/pc/app/time-line/set-node-width-composition-api.vue(1 hunks)examples/sites/demos/pc/app/time-line/set-node-width.vue(1 hunks)packages/theme/src/anchor/vars.less(1 hunks)packages/theme/src/base/reset.less(1 hunks)packages/theme/src/calendar-view/index.less(3 hunks)packages/theme/src/calendar-view/vars.less(1 hunks)packages/theme/src/filter-box/index.less(2 hunks)packages/theme/src/filter-box/vars.less(1 hunks)packages/theme/src/loading/vars.less(1 hunks)packages/theme/src/picker/index.less(6 hunks)packages/theme/src/pop-upload/index.less(2 hunks)packages/theme/src/pop-upload/vars.less(1 hunks)packages/theme/src/scroll-text/vars.less(1 hunks)packages/theme/src/search/index.less(1 hunks)packages/theme/src/search/vars.less(1 hunks)packages/theme/src/steps/index.less(6 hunks)packages/theme/src/steps/vars.less(1 hunks)packages/theme/src/tabs/index.less(3 hunks)packages/theme/src/tabs/vars.less(1 hunks)packages/theme/src/upload-list/index.less(1 hunks)packages/theme/src/wizard/vars.less(1 hunks)packages/vue/src/calendar/src/pc.vue(1 hunks)packages/vue/src/picker/src/pc.vue(1 hunks)packages/vue/src/search/src/pc.vue(1 hunks)
✅ Files skipped from review due to trivial changes (3)
- packages/theme/src/scroll-text/vars.less
- examples/sites/demos/pc/app/time-line/set-node-width.vue
- examples/sites/demos/pc/app/time-line/set-node-width-composition-api.vue
🔇 Additional comments (46)
packages/theme/src/pop-upload/vars.less (1)
32-33: Good addition of a theme variable for dark theme support.The new variable
--tv-PopUpload-table-body-col-colorreferences the general text color variable--tv-color-text, which is a good practice for theme compatibility. This will ensure text in the pop-upload table is properly visible in both light and dark themes.examples/sites/demos/pc/app/icon-multicolor/list-composition-api.vue (1)
9-9: Appropriate removal of hardcoded fill color.Removing the hardcoded
fill: #000;style property allows the icon to inherit its color from the theme, making it compatible with dark themes. This change aligns with the PR's objective of adding dark theme support.packages/theme/src/upload-list/index.less (1)
41-43: Good replacement of hardcoded color with a theme variable.Replacing the fixed hover color with the CSS variable
--tv-UploadList-item-hover-text-colorallows the component to adapt to different themes. This ensures proper contrast and visibility in dark mode.examples/sites/demos/pc/app/icon-multicolor/list.vue (1)
9-9: Appropriate removal of hardcoded fill color.Removing the hardcoded
fill: #000;style property allows the icon to inherit its color from the theme, making it compatible with dark themes. This change is consistent with the equivalent modification in the composition API version.packages/theme/src/search/index.less (1)
194-194: Good improvement to variable naming consistencyThe change from
--tv-Search-selector-textto--tv-Search-selector-text-colorimproves naming clarity and maintains consistency with other color variables in the file that already use the-colorsuffix. This makes it clear that this variable is specifically for a color value.packages/theme/src/pop-upload/index.less (2)
65-65: Consistent text coloring added for dialog tipsAdding this color variable helps ensure consistent text coloring in dark themes. Good enhancement for theme support.
99-99: Consistent text coloring added for table body columnsAdding the same color variable to table body columns ensures consistent text appearance throughout the component. This is important for proper dark theme support.
packages/vue/src/calendar/src/pc.vue (1)
100-102: Removed primary button styling for better theme flexibilityRemoving the
type="primary"attribute allows the button to use default styling, which is likely more adaptable to theme changes. This is a good adjustment for dark theme support where the primary button styling might be too prominent or conflict with the dark background.packages/theme/src/loading/vars.less (1)
19-19: Improved loading mask visibility for dark themesChanging the loading mask background color to
var(--tv-color-bg-active-dark)enhances visibility in dark themes. This provides better contrast for the loading indicator against darker backgrounds, improving user experience.packages/theme/src/base/reset.less (1)
44-45: Good addition of CSS variables for icon colors.These new CSS properties enable proper color theming for SVG icons by using variables instead of hardcoded values. This is essential for dark theme support, allowing icons to adapt their colors based on the current theme setting.
packages/theme/src/steps/vars.less (1)
261-262: Well-documented variable for timeline component theming.The addition of the
--tv-Steps-border-left-colorvariable with clear documentation helps maintain consistency in the UI when switching between light and dark themes. This is a good practice for component theming.packages/theme/src/search/vars.less (1)
57-57: Appropriate update to search dropdown background variable.Changing the selector background color variable from
var(--tv-color-bg-secondary)tovar(--tv-color-bg-2)ensures proper contrast in different theme modes.packages/vue/src/search/src/pc.vue (1)
46-48: Excellent change for dark theme support.Replacing the conditional background color with 'inherit' ensures the component adapts properly to both light and dark themes by taking on the parent element's background color.
packages/theme/src/anchor/vars.less (1)
47-47: Good semantic variable change.Updating from
--tv-color-border-disabledto--tv-color-border-divider-shortbetter reflects the purpose of this UI element, maintaining visual consistency in dark themes.packages/theme/src/calendar-view/vars.less (1)
23-23: Better contrast for dark theme compatibility.Switching to
--tv-color-text-controlvariable improves the contrast of active radio icons in dark themes, ensuring proper visibility of interactive elements.packages/theme/src/tabs/vars.less (1)
163-163: Great replacement of hardcoded color with theme variable.Converting from a hardcoded hex value to the
--tv-color-border-activevariable enables proper theme adaptation while maintaining backward compatibility with the fallback value.packages/theme/src/wizard/vars.less (1)
103-103: Improved dark theme compatibility for wizard timeline nodesThe background color variable for wizard timeline nodes has been updated to use a more theme-appropriate variable. This change supports dark themes by using a variable that adapts to the current theme context rather than relying on a background color that might not work well in dark mode.
packages/theme/src/filter-box/vars.less (1)
26-26: Enhanced text contrast for button active statesUsing
--tv-color-textinstead of--tv-color-text-activefor active button text ensures consistent text visibility in dark themes. This change improves usability by maintaining appropriate contrast regardless of theme.packages/theme/src/picker/index.less (4)
37-39: Added hover effect for iconsAdding a hover state for SVG icons improves user feedback and accessibility. This is particularly important in dark themes where visual indicators need to be more pronounced.
78-78: Improved background inheritance for cleariconChanging from hardcoded white background to
inheritallows the component to properly adapt to dark themes. This prevents white backgrounds from appearing in dark mode contexts.
106-106: Fixed input background for theme compatibilitySetting the range input background to
inheritensures it adapts to parent container backgrounds in different themes. This prevents inconsistent appearances when switching between light and dark themes.
132-132: Minor selector formatting adjustmentThe space removal between selector parts is a minor formatting change that doesn't affect functionality but maintains code consistency.
examples/sites/demos/pc/app/filter-panel/code-composition-api.vue (2)
51-51: Added Less language supportSwitching to Less preprocessor enables more powerful styling capabilities needed for theme implementations, such as nesting, variables, and mixins.
78-83: Enhanced textarea pseudo-elements for theme supportAdding background inheritance to pseudo-elements is crucial for dark theme compatibility. This prevents pseudo-elements from having hardcoded backgrounds that would stand out inappropriately in dark modes.
examples/sites/demos/pc/app/filter-panel/code.vue (2)
60-60: Style language updated for better theming support.Changing the style language to LESS enables more powerful styling capabilities like nesting, variables, and mixins, which are crucial for maintaining consistent theming across the application.
87-92: Good implementation for pseudo-element background inheritance.Adding the
background: inheritproperty to the pseudo-elements ensures they adapt to theme changes automatically, which is essential for proper dark theme rendering. Without this, the pseudo-elements might display with incorrect backgrounds when the theme changes.packages/vue/src/picker/src/pc.vue (1)
53-61: Improved icon rendering for dark theme compatibility.The refactored structure simplifies the component implementation while improving theme compatibility. Removing the transition and restructuring the conditionally rendered components ensures proper icon visibility in both light and dark themes.
packages/theme/src/filter-box/index.less (2)
37-41: Enhanced disabled state visual feedback.Adding
cursor: not-allowedand ensuring color consistency on hover for disabled elements improves accessibility and user experience. This change is particularly important for dark themes where visual cues need to be more pronounced.
69-72: Added hover effect for better interactive feedback.The hover effect on title labels provides visual feedback to users, enhancing usability by clearly indicating interactive elements. This is especially important in dark themes where contrast may be different.
packages/theme/src/tabs/index.less (3)
303-303: Added text color variable for theme consistency.Using the variable
var(--tv-Tabs-header-font-normal-text-color)for tab content ensures consistent color theming across the component. This is critical for dark theme support.
456-456: Removed box-shadow for cleaner appearance in dark themes.Setting
box-shadow: noneimproves visual consistency in dark themes where shadows may appear too harsh or misplaced.
497-497: Changed background to inherit for theme adaptability.Switching from a hardcoded background color to
inheritensures the component automatically adapts to the parent container's background, which is essential for proper dark theme rendering.packages/theme/src/steps/index.less (7)
248-249: Changed text color for 'done' and 'doing' icons for better visibility in dark mode.The color change from white to black improves visibility in dark themes, as these icons would appear against a darker background.
252-253: Updated active icon text color for better contrast.Similar to the previous change, this improves visibility in dark themes by using a higher contrast color.
269-270: Replaced hardcoded fill with CSS variable.Good refactoring - replacing the hardcoded
currentColorwith a theme variablevar(--tv-Steps-line-doing-active-icon-color)allows for dynamic color changes based on theme.
289-290: Converted hardcoded color to theme variable.Using the theme variable for active text color ensures consistent styling throughout the component when switching between light and dark themes.
506-507: Updated icon color to use theme variable.Consistently using the theme variable here maintains visual coherence across different states of the component.
526-527: Applied theme variable to active icon fill.This change ensures the active state icon fill color is properly themed, which is crucial for dark mode compatibility.
885-886: Used theme variable for border color.Replacing hardcoded color with
var(--tv-Steps-border-left-color)improves theme consistency and allows proper adaptation in dark mode.examples/sites/demos/pc/app/icon/list.vue (3)
12-15: Improved HTML structure for class bindings.The refactored div element consolidates class bindings into a single block, improving code readability while maintaining the same functionality.
115-116: Added color styling for hover state.Setting a specific text color (#191919) on hover provides better visual feedback for users. This matches the hover behavior with other components.
118-120: Added fill color for SVG on hover.This change ensures that the icon color changes consistently with the text on hover, creating a cohesive interaction experience.
packages/theme/src/calendar-view/index.less (4)
35-38: Improved code readability with proper spacing.Added blank line before selector block improves code organization and readability.
47-54: Added hover state styling for radio buttons.The new hover state with background-color: #ededed provides visual feedback when users interact with radio buttons, improving the UX.
61-71: Enhanced active state styling structure.Improved code organization with proper spacing and clearer nesting of selectors for the active state styling. This makes the code more maintainable.
80-81: Added spacing for better code structure.Consistent spacing around selector blocks improves code readability and maintenance.
|
触发下所有修改组件的E2E测试用例哈 |
Trigger E2E test cases for all modified components |
discreted66
changed the title
discreted66
force-pushed
the
darkTheme1
branch
from
75ec1d5 to
7ac042b
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (2)
examples/sites/demos/pc/app/icon/basic-usage.vue (1)
46-48: 💡 Verification agent🧩 Analysis chain
Consider using theme variables for specific icon colors.
This icon has a hardcoded red fill which won't adapt to dark themes. Consider using a theme variable if this icon should change color based on theme.
🏁 Script executed:
#!/bin/bash # Check if there are theme variables defined for colored icons rg -A 1 -B 1 "--tv-color-(red|blue|accent|primary|error|warning|success)" packages/theme/src/Length of output: 556
Action: Update Icon Fill Color to Use Theme Variables
The icon in
examples/sites/demos/pc/app/icon/basic-usage.vue(lines 46-48) currently uses a hardcodedredfill. Since hardcoded colors won’t adapt to dark themes, please consider switching to a theme variable—e.g., usingvar(--tv-color-red)if your theme defines such variables.To verify whether theme variables like
--tv-color-red(or other equivalents such as--tv-color-blue,--tv-color-accent, etc.) are available in the codebase, please run the following updated search command:If you find a suitable variable, update the code snippet as follows:
- font-size: 48px; - fill: red; + font-size: 48px; + fill: var(--tv-color-red); /* Or the appropriate theme variable */If no theme variable is available, please consult with the design/system team before hardcoding colors that may not support dark themes.
🏁 Script executed:
[run_scripts] #!/bin/bash # Corrected command to search for theme variable definitions in packages/theme/src/ rg -o '\-\-tv-color-(red|blue|accent|primary|error|warning|success)' packages/theme/src/Length of output: 11712
Replace Hardcoded Color with a Theme Variable
The icon in examples/sites/demos/pc/app/icon/basic-usage.vue (lines 46–48) currently uses a hardcoded red fill, which won't adapt for dark themes. Our search confirms that theme variables such as
--tv-color-successand--tv-color-errorexist in the codebase; however, there is no predefined--tv-color-red.
- If the red fill indicates an alert/error state: Consider replacing it with
var(--tv-color-error).- If a distinct red is required: Collaborate with the design/system team to introduce a new theme variable (e.g.,
--tv-color-red), then update the icon accordingly.Example diff adjustment:
- font-size: 48px; - fill: red; + font-size: 48px; + fill: var(--tv-color-error); /* Or use/define another appropriate theme variable */examples/sites/demos/pc/app/icon/basic-usage-composition-api.vue (1)
39-40: 💡 Verification agent❓ Verification inconclusive
Consider using theme variables for specific icon colors.
This icon has a hardcoded blue fill which won't adapt to dark themes. Consider using a theme variable if this icon should change color based on theme.
🏁 Script executed:
#!/bin/bash # Check if there are existing theme-based implementations of colored icons rg -A 2 -B 2 "\.icon-\w+\s*\{\s*fill:\s*var\(--tv-color" --type css --type less examples/sites/demos/Length of output: 103
Action Required: Replace Hardcoded Color with Theme Variable
In the file
examples/sites/demos/pc/app/icon/basic-usage-composition-api.vue(lines 39–40), the icon’s fill property is hardcoded to blue:fill: blue; }This approach won’t adapt when switching to dark themes or other theme variations. To improve theme consistency, consider updating this to use a theme variable. For example, you might change it to something like:
fill: var(--tv-color, blue); }This change would allow the icon to inherit the appropriate color based on the active theme, while still providing a fallback.
🧹 Nitpick comments (1)
examples/sites/demos/pc/app/icon/basic-usage-composition-api.vue (1)
42-44: Consider using theme variables for specific icon colors.This icon has a hardcoded red fill which won't adapt to dark themes. Consider using a theme variable if this icon should change color based on theme.
Consider updating the hardcoded colors to use theme variables like:
.icon-demo .icon-clock-work { font-size: 48px; - fill: red; + fill: var(--tv-color-error, red); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (35)
examples/sites/demos/pc/app/filter-panel/code-composition-api.vue(2 hunks)examples/sites/demos/pc/app/filter-panel/code.vue(2 hunks)examples/sites/demos/pc/app/icon-multicolor/list-composition-api.vue(1 hunks)examples/sites/demos/pc/app/icon-multicolor/list.vue(1 hunks)examples/sites/demos/pc/app/icon/basic-usage-composition-api.vue(1 hunks)examples/sites/demos/pc/app/icon/basic-usage.vue(1 hunks)examples/sites/demos/pc/app/icon/list-composition-api.vue(2 hunks)examples/sites/demos/pc/app/icon/list.vue(2 hunks)examples/sites/demos/pc/app/icon/show-title-composition-api.vue(1 hunks)examples/sites/demos/pc/app/icon/show-title.vue(1 hunks)examples/sites/demos/pc/app/time-line/set-node-width-composition-api.vue(1 hunks)examples/sites/demos/pc/app/time-line/set-node-width.vue(1 hunks)examples/sites/src/const.ts(2 hunks)packages/theme/src/anchor/vars.less(1 hunks)packages/theme/src/calendar-view/index.less(3 hunks)packages/theme/src/calendar-view/vars.less(1 hunks)packages/theme/src/filter-box/index.less(2 hunks)packages/theme/src/filter-box/vars.less(1 hunks)packages/theme/src/loading/vars.less(1 hunks)packages/theme/src/picker/index.less(6 hunks)packages/theme/src/picker/vars.less(1 hunks)packages/theme/src/pop-upload/index.less(2 hunks)packages/theme/src/pop-upload/vars.less(1 hunks)packages/theme/src/scroll-text/vars.less(1 hunks)packages/theme/src/search/index.less(1 hunks)packages/theme/src/search/vars.less(1 hunks)packages/theme/src/steps/index.less(6 hunks)packages/theme/src/steps/vars.less(1 hunks)packages/theme/src/tabs/index.less(3 hunks)packages/theme/src/tabs/vars.less(1 hunks)packages/theme/src/upload-list/index.less(1 hunks)packages/theme/src/wizard/vars.less(1 hunks)packages/vue/src/calendar/src/pc.vue(1 hunks)packages/vue/src/picker/src/pc.vue(1 hunks)packages/vue/src/search/src/pc.vue(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- examples/sites/demos/pc/app/icon/show-title-composition-api.vue
🚧 Files skipped from review as they are similar to previous changes (29)
- examples/sites/demos/pc/app/icon-multicolor/list-composition-api.vue
- packages/theme/src/search/index.less
- packages/theme/src/pop-upload/vars.less
- packages/theme/src/upload-list/index.less
- examples/sites/demos/pc/app/icon-multicolor/list.vue
- packages/vue/src/search/src/pc.vue
- packages/vue/src/picker/src/pc.vue
- packages/vue/src/calendar/src/pc.vue
- packages/theme/src/scroll-text/vars.less
- packages/theme/src/loading/vars.less
- packages/theme/src/tabs/vars.less
- examples/sites/demos/pc/app/time-line/set-node-width-composition-api.vue
- packages/theme/src/pop-upload/index.less
- packages/theme/src/steps/vars.less
- packages/theme/src/anchor/vars.less
- packages/theme/src/wizard/vars.less
- examples/sites/demos/pc/app/filter-panel/code.vue
- examples/sites/demos/pc/app/time-line/set-node-width.vue
- examples/sites/demos/pc/app/filter-panel/code-composition-api.vue
- examples/sites/demos/pc/app/icon/list.vue
- packages/theme/src/picker/index.less
- packages/theme/src/tabs/index.less
- examples/sites/demos/pc/app/icon/list-composition-api.vue
- packages/theme/src/filter-box/index.less
- packages/theme/src/search/vars.less
- packages/theme/src/filter-box/vars.less
- packages/theme/src/calendar-view/index.less
- packages/theme/src/steps/index.less
- packages/theme/src/calendar-view/vars.less
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (6)
examples/sites/src/const.ts (1)
1-1:✅ Verification successful
Verify theme implementation approach has changed.
The changes remove the
tinyDarkThemeimport and comment out its mapping inthemeToolValuesMap, which seems counterintuitive for a PR adding dark theme support. This suggests a shift in implementation strategy - likely moving from a separate theme object to using CSS variables for more dynamic theming.Ensure this change is intentional and that dark theme functionality is properly implemented via the new approach (CSS variables in Less files) as mentioned in the PR description.
Also applies to: 28-29
🏁 Script executed:
#!/bin/bash # Check how dark theme is being implemented in the codebase # Look for CSS variables related to dark theme echo "Searching for dark theme related CSS variables:" rg -t less "dark|theme|mode" --glob "*.less" | head -n 20 # Check for theme switching logic echo -e "\nChecking for theme switching mechanisms:" rg "theme|mode|dark" --glob "*.{vue,ts,js}" -A 3 -B 3 | grep -v "import" | head -n 20Length of output: 4051
Dark Theme Implementation Approach is Updated and Intentional
We've verified that the removal of the
tinyDarkThemeimport and the commented-out mapping inthemeToolValuesMapis in line with the new dark theme strategy. Specifically:
- CSS Variables in Less Files: Searches confirm the presence of dark theme-related styling (e.g., the
.darkclass inexamples/sites/src/assets/custom-block.lessand various CSS variable references in package files) indicating that styling is now handled via CSS variables.- Theme Switching Logic: Findings in Vue files (e.g., in
examples/docs/newsrc/App.vue) suggest that dynamic theming is managed through application state (e.g.,modeState.mode), supporting the shift from a separate theme object to a CSS-based approach.Please ensure that all aspects of dark theme functionality are thoroughly tested under the new implementation.
packages/theme/src/picker/vars.less (1)
37-38: Added CSS variable supports dark theme.This new CSS variable
--tv-Picker-input-clear-icon-bgproperly leverages the contextual background color with a fallback to white, which will help maintain proper contrast in dark themes when the clear icon appears.examples/sites/demos/pc/app/icon/basic-usage.vue (2)
29-30: Icon colors now respect theme variables.Adding
fillandcolorproperties with the CSS variable--tv-color-icon-controlensures icons will adapt properly to dark themes instead of using implicit default colors.
43-44:❓ Verification inconclusive
Consider using theme variables for specific icon colors.
This icon has a hardcoded blue fill which won't adapt to dark themes. Consider using a theme variable if this icon should change color based on theme.
🏁 Script executed:
#!/bin/bash # Check if other icons in the codebase use hardcoded colors or theme variables rg "fill: (blue|red|#[0-9a-fA-F]{3,6})" --type css --type less examples/sites/demos/pc/app/icon/Length of output: 98
Theme Variables for Icon Color
In
examples/sites/demos/pc/app/icon/basic-usage.vue(lines 43–44), the CSS currently hardcodes the fill asblue, which won’t automatically adjust for dark themes. If your design system provides a theme variable for icon colors, consider updating the code. For example, you might change the style to:fill: var(--icon-fill, blue); }This approach uses the theme variable if available, while defaulting to blue otherwise. It would also be worthwhile to manually verify that similar icons in this directory follow a consistent pattern for theme adaptability.
examples/sites/demos/pc/app/icon/show-title.vue (1)
28-29: Icon colors now respect theme variables.Adding
fillandcolorproperties with the CSS variable--tv-color-icon-controlensures icons will adapt properly to dark themes instead of using implicit default colors. This is consistent with the changes in other icon-related files.examples/sites/demos/pc/app/icon/basic-usage-composition-api.vue (1)
25-26: Icon colors now respect theme variables.Adding
fillandcolorproperties with the CSS variable--tv-color-icon-controlensures icons will adapt properly to dark themes instead of using implicit default colors.
discreted66
force-pushed
the
darkTheme1
branch
3 times, most recently
from
af8d926 to
2ca8618
Compare
PR
组件支持暗色主题
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
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