Flagsmith / Flagsmith/flagsmith
Checkbox and switch dark mode states
- Dominant language
- Python
- Stars
- 6.6k
- Forks
- 567
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 121
Description
## Problem
1. **Switch.tsx** uses hardcoded colours for sun/moon icons — they do not adapt in dark mode:
- `fill={checked ? '#656D7B' : '#1A2634'}` (sun icon, line 57)
- `fill={checked ? '#FFFFFF' : '#9DA4AE'}` (moon icon, line 58)
2. **Radio buttons** have no `.dark` overrides in SCSS. `Radio.tsx` also hardcodes `fill='#6837FC'` (lines 42, 56) with no dark mode alternative.
> **Note:** Checkboxes already have `.dark` overrides in `_input.scss` (lines 281–294), so only radio buttons need new dark mode styles.
## Proposed Fix
1. In `Switch.tsx`, replace hardcoded colours with `currentColor` or CSS custom properties
2. In `Radio.tsx`, replace hardcoded `#6837FC` fill with a theme-aware value
3. Add `.dark` overrides for radio button styles (border, background, checked state, focus ring)
## Acceptance Criteria
- [ ] Switch sun/moon icons display correctly in both themes
- [ ] Radio buttons render correctly in dark mode (all states)
- [ ] No visual regression in light mode
---
Part of the Design System Audit (#6606) · Epic: #6882
Contributor guide
Assessment
This issue has not been assessed yet.