docs: fix support chart colours for dark mode
Metadata
Current evaluation
Docs-only CSS fix making support-chart Pro bars and milestone markers visible in dark mode via two CSS custom properties with light-mode fallbacks. Pending review, 0 comments, CI passing, no activity since creation ~143 days ago.
Suggested action: needs review
Reason: The PR is a small, self-contained +19/-6 CSS change with CI passing and zero review activity for ~143 days, so it needs a maintainer to look at it. It is not stale-closable: the target file docs/_static/css/support-chart.css still contains the original #111/#56334b values at HEAD, and the underlying issue snapcraft#6161 remains open, so the fix is still applicable.
Impact:
25
Quick Win:
22.5
Staleness:
50
Complexity:
10
Confidence:
85
Issue body
The Pro/Legacy add-on bars (`#111`) and release milestone elements (`#56334b`) were near-invisible in dark mode — both colours have contrast ratios below 1.5:1 against a typical dark background.
## Changes (`docs/_static/css/support-chart.css`)
- Introduce two CSS custom properties (`--chart-pro-fill`, `--chart-milestone-color`) set to Canonical standard colours in dark mode: warm grey `#aea79f` and mid-light aubergine `#cd7c97`
- Apply via `var()` with the original values as fallbacks, so **light mode is completely unchanged**
- Cover both Furo's manual theme toggle (`html[data-theme="dark"]`) and OS-level preference (`@media (prefers-color-scheme: dark)`, excluding explicit `data-theme="light"` overrides)
```css
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) {
--chart-pro-fill: #aea79f;
--chart-milestone-color: #cd7c97;
}
}
html[data-theme="dark"] {
--chart-pro-fill: #aea79f;
--chart-milestone-color: #cd7c97;
}
.chart__bar--black { fill: var(--chart-pro-fill, #111); }
.chart__milestone { stroke: var(--chart-milestone-color, #56334b); }
.chart__milestone-release { fill: var(--chart-milestone-color, #56334b); }
```
**Before (dark mode)** — Pro bars and milestone markers invisible:
**After (dark mode)** — all three bar types and milestone elements clearly visible:
Evaluation history
| Date | Model | Scores | Action | Summary |
|---|---|---|---|---|
| qwen/qwen3.8-27b |
Impact:
25
Quick Win:
22.5
Staleness:
50
Complexity:
10
Confidence:
85
|
needs review | Docs-only CSS fix making support-chart Pro bars and milestone markers visible in dark mode via two CSS custom properties with light-mode fallbacks. Pending review, 0 comments, CI passing, no activity since creation ~143 days ago. | |
| qwen/qwen3.6-35b-a3b |
Staleness:
75
Complexity:
10
Confidence:
80
|
needs review | Fixes near-invisible Pro/Legacy add-on bars and milestone elements in dark mode by adding CSS custom properties with light-mode fallbacks. PR passes CI, is ready to merge, but has seen no maintainer activity in 102 days. | |
| qwen3.6-35b-a3b-mtp-q6 |
Staleness:
65
Complexity:
10
Confidence:
85
|
needs review | Fixes dark-mode contrast for support chart elements by introducing CSS custom properties with fallbacks. Currently inactive for 88 days with no maintainer feedback. | |
| qwen3.6-35b-a3b-mtp-q6 |
Staleness:
45
Complexity:
10
Confidence:
85
|
needs review | Fixes near-invisible support chart colors in dark mode by updating CSS variables for better contrast. Preserves light mode with fallbacks. Open for 67 days with no comments, awaiting review. |
Update history
No update history recorded yet.
Related work
-
Likely Fixed By:
snapcraft#6161
(confidence 90%)
Issue 'Support chart colours aren't dark-mode friendly' (still open) describes exactly the near-invisible Pro/Legacy bars and milestone elements this PR recolors.
Related issues
| Issue | Project | State | Summary | Similarity |
|---|---|---|---|---|
| #6161 Support chart colours aren't dark-mode friendly | snapcraft | open | Support-schedule chart in snapcraft docs renders release milestones and legacy add-on commitment in near-black (#111), unreadable in dark mode. Fix requested: Canonical colours with contrast for both modes. Unfixed; black fill still in support-chart.css, no activity since filing. |