fix(theme): [card,qr-code,skeleton] add dark theme #3052
Conversation
WalkthroughThe changes update the CSS styling across several Vue components and LESS files. In card components, the background color of the Changes
Possibly related PRs
Suggested labels
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
ERR_PNPM_OPTIONAL_DEPS_REQUIRE_PROD_DEPS Optional dependencies cannot be installed without production dependencies 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🔇 Additional comments (4)
✨ Finishing Touches
🪧 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 (
|
github-actions
bot
added
bug
WalkthroughThis PR introduces a dark theme for card, QR code, and skeleton components. It replaces hardcoded background colors with CSS variables to support theme customization. Additionally, it updates the QR code component's styles and imports a new variables file for QR code styling. Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
![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 (2)
packages/theme/src/qr-code/index.less (2)
22-25: Consider using theme variables for border colorWhile the update to a more transparent border is good, consider using a theme variable for the border color as well to ensure complete theme compatibility.
&.border { - border: 1px solid rgba(231, 220, 220, 0.06); + border: 1px solid var(--tv-color-border-light); border-radius: 8px; }
37-67: Well-structured mask implementationThe mask implementation is well-organized and properly uses flexbox for centering. The transparent colors should work well in both light and dark themes.
One minor suggestion: consider using CSS variables for the mask background colors to ensure they adapt correctly to themes.
&-status { z-index: 20; - background: rgb(255 255 255 / 96%); + background: var(--tv-color-bg-mask); } .icon { position: absolute; display: flex; align-items: center; justify-content: center; border: none; - background: white; + background: var(--tv-color-bg); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (33)
examples/sites/demos/pc/app/card/basic-usage-composition-api.vue(1 hunks)examples/sites/demos/pc/app/card/basic-usage.vue(1 hunks)examples/sites/demos/pc/app/card/card-disabled-composition-api.vue(1 hunks)examples/sites/demos/pc/app/card/card-disabled.vue(1 hunks)examples/sites/demos/pc/app/card/card-events-composition-api.vue(1 hunks)examples/sites/demos/pc/app/card/card-events.vue(1 hunks)examples/sites/demos/pc/app/card/card-group-composition-api.vue(1 hunks)examples/sites/demos/pc/app/card/card-group.vue(1 hunks)examples/sites/demos/pc/app/card/card-select-composition-api.vue(1 hunks)examples/sites/demos/pc/app/card/card-select.vue(1 hunks)examples/sites/demos/pc/app/card/card-size-composition-api.vue(1 hunks)examples/sites/demos/pc/app/card/card-size.vue(1 hunks)examples/sites/demos/pc/app/card/card-status-composition-api.vue(1 hunks)examples/sites/demos/pc/app/card/card-status.vue(1 hunks)examples/sites/demos/pc/app/card/card-type-composition-api.vue(1 hunks)examples/sites/demos/pc/app/card/card-type.vue(1 hunks)examples/sites/demos/pc/app/card/check-mode-composition-api.vue(1 hunks)examples/sites/demos/pc/app/card/check-mode.vue(1 hunks)examples/sites/demos/pc/app/card/check-type-checkbox-composition-api.vue(1 hunks)examples/sites/demos/pc/app/card/check-type-checkbox.vue(1 hunks)examples/sites/demos/pc/app/card/check-type-radio-composition-api.vue(1 hunks)examples/sites/demos/pc/app/card/check-type-radio.vue(1 hunks)examples/sites/demos/pc/app/card/custom-class-composition-api.vue(1 hunks)examples/sites/demos/pc/app/card/custom-class.vue(1 hunks)examples/sites/demos/pc/app/card/operate-bar-composition-api.vue(1 hunks)examples/sites/demos/pc/app/card/operate-bar.vue(1 hunks)examples/sites/demos/pc/app/card/slot-composition-api.vue(1 hunks)examples/sites/demos/pc/app/card/slot.vue(1 hunks)packages/theme/src/qr-code/index.less(1 hunks)packages/theme/src/qr-code/vars.less(1 hunks)packages/theme/src/skeleton-item/vars.less(1 hunks)packages/theme/src/vars.less(1 hunks)packages/vue/src/qr-code/src/pc.vue(1 hunks)
✅ Files skipped from review due to trivial changes (22)
- examples/sites/demos/pc/app/card/custom-class-composition-api.vue
- examples/sites/demos/pc/app/card/card-select-composition-api.vue
- examples/sites/demos/pc/app/card/card-type-composition-api.vue
- examples/sites/demos/pc/app/card/card-events.vue
- examples/sites/demos/pc/app/card/card-disabled-composition-api.vue
- packages/theme/src/qr-code/vars.less
- examples/sites/demos/pc/app/card/card-select.vue
- examples/sites/demos/pc/app/card/card-events-composition-api.vue
- examples/sites/demos/pc/app/card/custom-class.vue
- examples/sites/demos/pc/app/card/card-disabled.vue
- examples/sites/demos/pc/app/card/basic-usage.vue
- examples/sites/demos/pc/app/card/operate-bar.vue
- examples/sites/demos/pc/app/card/card-group.vue
- examples/sites/demos/pc/app/card/check-type-radio.vue
- examples/sites/demos/pc/app/card/check-type-checkbox.vue
- examples/sites/demos/pc/app/card/operate-bar-composition-api.vue
- examples/sites/demos/pc/app/card/check-mode-composition-api.vue
- examples/sites/demos/pc/app/card/card-status-composition-api.vue
- examples/sites/demos/pc/app/card/basic-usage-composition-api.vue
- examples/sites/demos/pc/app/card/check-type-radio-composition-api.vue
- examples/sites/demos/pc/app/card/check-type-checkbox-composition-api.vue
- packages/vue/src/qr-code/src/pc.vue
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (12)
packages/theme/src/vars.less (1)
71-71: Good addition of QR code theme variablesAdding the QR code variables import is consistent with the project structure and helps support dark theme for the QR code component.
examples/sites/demos/pc/app/card/card-group-composition-api.vue (1)
66-66: Well implemented theme variableReplacing the hardcoded
#f5f5f5with the CSS variablevar(--tv-color-bg-gray-1)enables proper dark theme support for the card component.examples/sites/demos/pc/app/card/slot.vue (1)
73-73: Good implementation of theme variableThe change from hardcoded background color to
var(--tv-color-bg-gray-1)properly supports theme switching, including dark mode.examples/sites/demos/pc/app/card/card-size.vue (1)
64-64: Appropriate use of theme variableConverting the hardcoded background color to
var(--tv-color-bg-gray-1)ensures consistent theming across different card sizes and supports dark mode properly.examples/sites/demos/pc/app/card/card-size-composition-api.vue (1)
56-56: Good use of CSS variables for themingReplacing the hardcoded background color with a CSS variable
var(--tv-color-bg-gray-1)is a good approach for supporting dark theme. This change ensures that the component will adapt to different themes by changing variable values in a centralized location.examples/sites/demos/pc/app/card/check-mode.vue (1)
88-88: Good use of CSS variables for themingReplacing the hardcoded background color with a CSS variable
var(--tv-color-bg-gray-1)enables dark theme support. This is consistent with the approach used in other card components.examples/sites/demos/pc/app/card/card-status.vue (1)
55-55: Good use of CSS variables for themingReplacing the hardcoded background color with a CSS variable
var(--tv-color-bg-gray-1)properly enables dark theme support. This is a consistent approach across the card component files.examples/sites/demos/pc/app/card/slot-composition-api.vue (1)
64-64: Good use of CSS variables for themingReplacing the hardcoded background color with a CSS variable
var(--tv-color-bg-gray-1)is the right approach for implementing dark theme support. This change follows the pattern established across all card component files.examples/sites/demos/pc/app/card/card-type.vue (1)
52-52: Good update for theme support!Replacing the hardcoded
#f5f5f5background color with the CSS variablevar(--tv-color-bg-gray-1)improves theme compatibility, allowing the card component to adapt to both light and dark modes.packages/theme/src/skeleton-item/vars.less (1)
31-31: Excellent transition to theme variables!This change properly updates the skeleton gradient from hardcoded colors to theme variables. Using
var(--tv-color-bg-hover)andvar(--tv-color-border-container)ensures the skeleton animation will look appropriate in both light and dark themes.packages/theme/src/qr-code/index.less (2)
13-13: Good addition of vars importAdding the import for vars.less is necessary to access the QR code theme variables.
17-20: Proper theme implementationThe injection of QR code variables and addition of background color using
var(--tv-QrCode-container-bg-color)correctly implements theme support for the container.
3 participants
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
Style
Chores