Hi Tom — FYI from a member running the Cockpit daily. Love the Graphite redesign overall.
The bug: in light mode, the sidebar renders as a near-black slab with unreadable dark text, while the rest of the canvas themes correctly.
Cause: .cockpit-sidebar in web/src/cockpit.css (line ~95, cockpit 1.2.1) has a hardcoded background:
background:
linear-gradient(180deg, oklch(0.135 0.004 250) 0%, var(--surface-bg) 100%);
Everything else in the file draws from the theme tokens, but this gradient's top stop is a fixed near-black. In dark mode it blends in, so it's invisible in testing. In light mode --surface-bg resolves to paper (~L 0.975) and the sidebar becomes a black-to-white gradient with the light theme's dark ink text on top of the black half.
Fix that worked for me: move the gradient into a theme token defined in both blocks of index.css, e.g.
/* dark */
--sidebar-bg: linear-gradient(180deg, oklch(0.125 0.004 250) 0%, var(--surface-bg) 100%);
/* light */
--sidebar-bg: linear-gradient(180deg, oklch(0.93 0.004 250) 0%, var(--surface-bg) 100%);
and .cockpit-sidebar { background: var(--sidebar-bg); }. Keeps the "nav sits a step deeper than the canvas" intent in both modes.
One adjacent note: I view my display in grayscale, and I ended up re-laddering the theme's lightness values so the brass accent, status colors, and text mutes separate by luminance instead of hue (several sit within ~0.05 L of each other, so they collapse to the same gray). Happy to share the retuned token set if a grayscale/colorblind-friendly variant is ever of interest.
— Jess
Hi Tom — FYI from a member running the Cockpit daily. Love the Graphite redesign overall.
The bug: in light mode, the sidebar renders as a near-black slab with unreadable dark text, while the rest of the canvas themes correctly.
Cause:
.cockpit-sidebarinweb/src/cockpit.css(line ~95, cockpit 1.2.1) has a hardcoded background:Everything else in the file draws from the theme tokens, but this gradient's top stop is a fixed near-black. In dark mode it blends in, so it's invisible in testing. In light mode
--surface-bgresolves to paper (~L 0.975) and the sidebar becomes a black-to-white gradient with the light theme's dark ink text on top of the black half.Fix that worked for me: move the gradient into a theme token defined in both blocks of
index.css, e.g.and
.cockpit-sidebar { background: var(--sidebar-bg); }. Keeps the "nav sits a step deeper than the canvas" intent in both modes.One adjacent note: I view my display in grayscale, and I ended up re-laddering the theme's lightness values so the brass accent, status colors, and text mutes separate by luminance instead of hue (several sit within ~0.05 L of each other, so they collapse to the same gray). Happy to share the retuned token set if a grayscale/colorblind-friendly variant is ever of interest.
— Jess