← Back to issue list

docs: fix support chart colours for dark mode

View original Github issue

Metadata

Project
snapcraft
Number
#6169
Type
pull request
State
open
Author
Copilot
Labels
—
Created
Updated
Closed
—

Current evaluation

Docs-only CSS fix: adds dark-mode custom properties (--chart-pro-fill #aea79f, --chart-milestone-color #cd7c97) so Pro/Legacy bars and milestone markers in the support chart are visible; light mode unchanged. CLA passing, no reviewers yet.

Suggested action: needs review

Reason: Diff is +19/-6 in a single file (docs/_static/css/support-chart.css) and CI shows only 'Canonical CLA' passing with no failures and zero unresolved review comments, so nothing blocks it — it simply needs a maintainer to look at it. Review status is 'pending (0 reviewers)' and there has been no activity for 175 days, which justifies needs_review rather than keep_open only because nothing indicates further author work. I verified the current file still hardcodes `.chart__bar--black { fill: #111; }` and `.chart__milestone { stroke: #56334b; }`, confirming the described defect is real and unfixed at HEAD. One substantive design point for the reviewer: #aea79f is already the value used for `.chart__bar--grey`, so dark mode may make Pro/Legacy bars indistinguishable from the grey bar.

Evaluated by: mr-cal-bot

Impact: 30 Quick Win: 19 Complexity: 12 Confidence: 74 Actionability: 72

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: ![Support chart in dark mode showing invisible black bars and milestone lines](https://github.com/user-attachments/assets/9b41e217-abde-476a-9a33-2ffe08e59f69) **After (dark mode)** — all three bar types and milestone elements clearly visible: ![Colour swatches showing corrected dark mode colours](https://github.com/user-attachments/assets/326ae6bc-7fc5-473b-9825-9ab4079248ad)

Evaluation history

Date Model Scores Action Summary
stealth/space-bunny-alpha
Impact: 30
Quick Win: 19
Complexity: 12
Confidence: 74
Actionability: 72
needs review Docs-only CSS fix: adds dark-mode custom properties (--chart-pro-fill #aea79f, --chart-milestone-color #cd7c97) so Pro/Legacy bars and milestone markers in the support chart are visible; light mode unchanged. CLA passing, no reviewers yet.
qwen/qwen3.6-35b-a3b
Impact: 30
Quick Win: 22
Complexity: 10
Confidence: 85
Actionability: 80
needs review CSS fix for dark mode support chart visibility by introducing custom properties with fallbacks; clean diff, CI passing, awaiting maintainer review.
qwen/qwen3.8-27b
Impact: 25
Quick Win: 22
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.

Update history

No update history recorded yet.

Related work

  • Likely Fixed By: canonical/snapcraft#6161 (confidence 92%)

    Tracking issue 'Support chart colours aren't dark-mode friendly' is still open and its summary states a fix PR (#6169) exists but is open awaiting review; this PR is that fix.

Related issues

Issue Project State Summary Similarity
#6161 Support chart colours aren't dark-mode friendly snapcraft open Docs bug: support chart in docs/reference/support-schedule.rst uses hardcoded black/dark fills (#111, #56334b) for Pro bars and release milestones, unreadable in dark mode. Open fix PR #6169 adds CSS custom properties.
84%
#1108 docs: make package-slices.svg readable in dark mode rockcraft open Approved docs-only fix: replaces black strokes/fills in docs/_static/package-slices.svg with neutral greys/currentColor so the Chisel package-slicing diagram is readable in dark mode. Fixes #840; 2 approvals, no open comments, CI green apart from known persistent snap-tests failures.
71%