fix: Color issues with some components in dark theme #66
Conversation
|
@fzzv is attempting to deploy a commit to the Retro UI Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe changes update several UI components to replace hardcoded color classes (such as Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UIComponent
participant Theme
User->>UIComponent: Interacts with Select/Tab/Toggle/Textarea
UIComponent->>Theme: Apply theme-based color classes
Theme-->>UIComponent: Provide dynamic colors (border, background, etc.)
UIComponent-->>User: Rendered with updated, theme-consistent styles
Possibly related PRs
Poem
✨ Finishing Touches
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:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (1)
components/retroui/Select.tsx (1)
17-20: Consistent theme-based styling for SelectTriggerReplaced hardcoded border and background classes with
border-borderandbg-transparentto align with theme tokens for dark mode. Approve this update.
Consider whether theborder-inputclass is still required or if it could be removed to avoid redundant border-color definitions.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
components/retroui/Select.tsx(2 hunks)components/retroui/Tab.tsx(2 hunks)components/retroui/Textarea.tsx(2 hunks)components/retroui/Toggle.tsx(1 hunks)preview/components/tab-style-default.tsx(1 hunks)preview/components/textarea-style-default.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
components/retroui/Tab.tsx (1)
lib/utils.ts (1)
cn(4-6)
preview/components/textarea-style-default.tsx (1)
components/retroui/Textarea.tsx (1)
Textarea(4-21)
components/retroui/Textarea.tsx (1)
lib/utils.ts (1)
cn(4-6)
🔇 Additional comments (10)
components/retroui/Toggle.tsx (1)
18-18: Excellent dark theme improvement!The solid variant now uses semantic color tokens (
secondary,secondary-foreground) instead of hardcoded colors, which will properly adapt to both light and dark themes. This change maintains visual consistency while improving accessibility.preview/components/textarea-style-default.tsx (2)
1-1: Good migration to custom component.Adding the import for the custom
Textareacomponent aligns with the project's component architecture.
5-8: Excellent theming consistency improvement!Replacing the native
<textarea>with the custom<Textarea>component and removing the hardcodedborder-blackclass ensures consistent theming. The custom component (from the relevant code snippet) usesborder-borderwhich properly adapts to dark themes.components/retroui/Textarea.tsx (2)
2-2: Good addition of utility function.Adding the
cnutility import enables proper class name composition and merging, which is essential for theme-aware styling.
14-17: Excellent theming improvements!The changes implement several best practices for dark theme support:
- Better class composition: Using
cn()instead of template literals provides better Tailwind class merging- Theme-aware border: Replacing
border-blackwithborder-borderensures proper adaptation to light/dark themes- Enhanced placeholder styling: Adding
placeholder:text-muted-foregroundimproves readability in both themesThese changes significantly improve the component's theming capabilities while maintaining backward compatibility.
components/retroui/Tab.tsx (2)
38-38: Perfect theming improvement for selected tab state.Replacing
data-selected:border-blackwithdata-selected:border-borderensures the selected tab border adapts properly to both light and dark themes, maintaining visual hierarchy and accessibility.
54-54: Consistent theming for tab content.Updating the border from
border-blacktoborder-bordermaintains visual consistency with other components and ensures proper dark theme support for the tab content panel.components/retroui/Select.tsx (1)
44-49: Apply theme-based border and background in SelectContentSwitching from fixed
border-black/bg-whitetoborder-border/bg-backgroundensures the dropdown content adapts to the dark theme while preserving existing animations and layout.preview/components/tab-style-default.tsx (2)
1-3: Use custom Tabs components from retrouiUpdated import to use the new
TabsAPI from@/components/retroui/Tabinstead of Headless UI’sTab*components. This change is consistent with the underlying component refactor.
5-19: Refactor TabStyleDefault to the new Tabs APIThe JSX structure now leverages
Tabs,TabsTriggerList,TabsTrigger,TabsPanels, andTabsContent, preserving the original tab semantics and content. This adoption maintains feature parity while benefiting from the updated theming and styling in the custom Tab components.
2 participants
Component Dark Theme Support
This PR adds dark mode support for several UI components. The following components have been updated to ensure proper theming, contrast, and visual consistency in dark environments.
Updated Components (Before vs After)
Summary by CodeRabbit
Style
Refactor