feat(theme): add dark mode lint check and fixes #120
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add scripts/theme-check.ts to validate dark mode usage - Add docs/white-book/02-设计篇/02-视觉设计/dark-mode.md - Update best-practices.md with dark mode rules - Add theme:check and theme:run scripts to package.json - Add theme:run task to turbo.json - Integrate theme:run into CI workflow Rules implemented: - no-bg-as-text: Prevent using background colors as text colors - orphan-foreground: Warn when foreground colors lack matching background - missing-dark-variant: Warn when hardcoded colors lack dark: variants
Add two new lint rules: - text-white-on-semantic-bg: Detect text-white on bg-primary/destructive - bg-muted-no-text-color: Detect bg-muted without explicit text color Update documentation with new rules and examples. Current detection: 19 errors, 30 warnings
Fix 19 dark mode errors by replacing text-white with text-xxx-foreground: - bg-primary text-white -> bg-primary text-primary-foreground - bg-destructive text-white -> bg-destructive text-destructive-foreground - bg-muted -> bg-muted text-muted-foreground (where needed) Also improve theme-check.ts to reduce false positives: - Skip hover/focus/active-only bg-muted patterns - Skip peer/group conditional foreground styles - Expand context range for better detection Files modified: - 15 component/page files with dark mode fixes - scripts/theme-check.ts with improved detection Result: 0 errors, 5 warnings (down from 19 errors, 30 warnings)
The stackflow basicUIPlugin with cupertino theme has hardcoded white backgrounds using vanilla-extract generated classes. Added CSS overrides targeting stable data-stackflow-* attributes to use our theme colors. Changes: - Override stackflow CSS variables for dark mode using data attributes - Force background-color on activity containers - Changed wallet/list and settings/wallet-chains to use bg-background
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Add comprehensive dark mode support with automated lint checks and fixes.
Changes
Lint Script (
scripts/theme-check.ts)no-bg-as-text: Prevents using background colors as text colorstext-white-on-semantic-bg: Detects text-white on bg-primary/destructiveorphan-foreground: Foreground colors without matching backgroundbg-muted-no-text-color: bg-muted without explicit text colormissing-dark-variant: Hardcoded gray colors without dark: variantFixes
text-whitewith semantic foreground colors in 15+ filesbg-backgroundinstead of semi-transparentbg-muted/30Documentation
docs/white-book/02-设计篇/02-视觉设计/dark-mode.mddocs/white-book/00-必读/best-practices.mdCI Integration
theme:checkandtheme:runscriptsTesting