Flagsmith / Flagsmith/flagsmith
Toast notifications: add dark mode support
- Dominant language
- Python
- Stars
- 6.6k
- Forks
- 567
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 121
Description
## Problem
Toast notifications (`web/project/toast.tsx`) have no dark mode styles. In dark mode, toasts render with light mode colours, making them difficult to read. The inline SVGs for success/danger icons use hardcoded colour values.
### Current dark mode issues
- **Text contrast fails WCAG AA** — `rgba(255,255,255,0.48)` on dark surfaces gives ~3.2:1 contrast (needs 4.5:1)
- **Surfaces indistinguishable from page** — backgrounds like `rgba(17,32,46)` blend into the page background (`#101628`)
- **No semantic tokens** — title and body use `$alert-color-dark` (not a design token), close icon uses same dim `rgba(255,255,255,0.48)`
## Design reference
### Proposed dark surface values (hue-tinted)
| Variant | Current | Proposed | Notes |
|---------|---------|----------|-------|
| Success | `rgba(17, 32, 46)` | `#0D2623` | Hue-tinted green |
| Danger | `rgba(34, 23, 40)` | `#2A1219` | Hue-tinted red |
| Warning | `rgba(34, 31, 39)` | `#2A1F0D` | Hue-tinted amber |
| Info | `rgba(15, 32, 52)` | `#0D1D2A` | Hue-tinted blue |
### Semantic token mapping
| Element | Token | Dark value |
|---------|-------|------------|
| Background | `colorFeedback{Type}Surface` | Hue-tinted values above |
| Border | `colorFeedback{Type}` | At 40% opacity |
| Title | `colorTextHeading` | White |
| Body | `colorTextSecondary` | `#9DA4AE` |
| Close icon | `colorIconSecondary` | `#9DA4AE` |
| Elevation | `box-shadow` | `0 4px 16px rgba(0,0,0,0.25)` |
### Key improvements
1. **Text contrast** — title at `colorTextHeading` (~11:1) and body at `#B0B8C4` (~7.5:1), both pass AAA
2. **Surface tinting** — hue-tinted surfaces visually communicate intent, matching light mode strategy
3. **Elevation** — `box-shadow: 0 4px 16px rgba(0,0,0,0.25)` lifts toast above page; border softened to 40% opacity
## Acceptance Criteria
- [ ] Toast notifications are readable in dark mode with correct contrast ratios (WCAG AA minimum)
- [ ] Each variant uses hue-tinted surface colour matching its intent
- [ ] Title, body, and close icon use semantic colour tokens
- [ ] Success and danger toast icons display correctly in both themes
- [ ] 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.