Flagsmith / Flagsmith/flagsmith

Checkbox and switch dark mode states

Open
#6,894 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.