Skip to content

fix: resolve invisible text in Guide panel during light mode (#395)#426

Merged
ProdigyV21 merged 1 commit into
ProdigyV21:mainfrom
Himanth-reddy:fix/guide-light-mode-395
Jul 2, 2026
Merged

fix: resolve invisible text in Guide panel during light mode (#395)#426
ProdigyV21 merged 1 commit into
ProdigyV21:mainfrom
Himanth-reddy:fix/guide-light-mode-395

Conversation

@Himanth-reddy

@Himanth-reddy Himanth-reddy commented Jul 2, 2026

Copy link
Copy Markdown
Collaborator

Description

Resolves Issue #394 #395 where switching the web application / homepage to light mode caused text inside the Guide panel (Setup Roadmap section) and other hardcoded card components to become invisible due to hardcoded dark backgrounds (oklch(0.15...), oklch(0.18...)).

Root Cause

The CSS classes for .guide-card, .compare-row.head .compare-cell, .setup-step, and mobile compare tables used fixed dark backgrounds rather than theme-aware variables. When light mode ([data-theme="light"]) was active, text colors adapted to dark ink (var(--ink)), causing dark text to render over hardcoded dark backgrounds.

Fix

  • Updated .guide-card background to use var(--bg-2) so it adapts to white in light theme and dark grey in dark theme.
  • Updated .compare-row.head .compare-cell and mobile compare table cells to use var(--bg-3).
  • Replaced hardcoded icon and step indicator backgrounds in setup steps with theme variables.

Closes

Closes #395 #395

@Himanth-reddy Himanth-reddy linked an issue Jul 2, 2026 that may be closed by this pull request
2 tasks
@ProdigyV21 ProdigyV21 merged commit b5cb5df into ProdigyV21:main Jul 2, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: left panel text invisible in light mode on Guide page bug: comparison table ARVIO column background doesn't adapt to light mode

2 participants