🎨 Pattern: Main layout and universe-hub used hardcoded light colors (rg...

Date: 2026-02-25
Time: 21:47:15 UTC
Session: gspace1-143.2
Agent: angular
Confidence: 95%
Status: ✅ Documented

📋 Decision Context

Question:

Main layout and universe-hub used hardcoded light colors (rgba(255,255,255,0.95), #212529, #333, #666) — components rendered light when dark theme active. How to make theme-aware?

Task: Not specified

🎯 Decision Made

Chosen:

B) Replace all hardcoded values with var(--ux-*) theme variables

Options Considered:

1. A) Add data-theme-mode media queries in each component
2. B) Replace all hardcoded values with var(--ux-*) theme variables
3. C) Create wrapper components that inject theme context

💭 Reasoning

ROOT CAUSE: Components used fallbacks like #ffffff, #212529, #333, #666 which override theme variables. The theme system already injects --ux-background, --ux-surface, --ux-text-primary, --ux-on-background etc. via ThemeVariablesService. FIX: Replace hardcoded values with var(--ux-surface, var(--ux-background, #ffffff)) and var(--ux-on-background, var(--ux-text-primary, #212529)). For rgba use rgba(var(--ux-surface-rgb, 255, 255, 255), 0.95). Applied to main-layout.component.scss (.gograb-main, .unified-header-section, .context-breadcrumb, .navigation-loading) and universe-hub.component.scss (all --surface-*, --text-color usages).

📁 Files Involved

• apps/gograb-space/src/app/components/layout/main-layout/main-layout.component.scss
• libs/libs-space/universe-canvas/src/lib/components/universe-hub/universe-hub.component.scss

🔗 Related

• Decision ID: dev_1772056035186_mqvopac
• Session: 143 (migrated from 142)
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation. Moved to S143 per user request.