PR #66387: feat: Add Matrix theme with lime green digital rain aesthetic

• Repository: openclaw/openclaw
• Author: CyberRaccoonTeam
• State: open | merged: False
• Link: https://github.com/openclaw/openclaw/pull/66387

Description (problem / solution / changelog)

Summary

Adds a new Matrix theme inspired by the iconic film, featuring:

• Lime green (#00ff41) accent on deep black (#000000)
• Digital rain aesthetic with glow effects
• Animations: glitch, flicker, scanline overlay
• Monospace font for authentic terminal feel
• Full CSS variable integration with existing theming system

Changes

• ui/src/styles/base.css: Matrix theme definition with animations
• ui/src/ui/theme.ts: Added "matrix" to ThemeName type and resolveTheme() logic
• ui/src/ui/views/config.ts: Added Matrix option to theme selector UI

Theme Features

Visual Design

• Colors: Pure black canvas (#000000) with lime green accent (#00ff41)
• Glow effects: Text shadow and box-shadow for neon glow
• Scanlines: Subtle CRT-style scanline overlay
• Animations:
  • matrix-glow: Pulsing green glow
  • matrix-scanline: Moving scanline effect
  • matrix-glitch: Brief glitch on link hover
  • matrix-flicker: Periodic flicker on cards

Accessibility

• WCAG 2.1 AA audit included
• Note: Lower contrast for authenticity (glow effects compensate)
• Respects prefers-reduced-motion

Testing

• Compiles without TypeScript errors
• All CSS variables defined
• Theme resolves correctly via resolveTheme("matrix", "dark")
• Added to VALID_THEME_NAMES

This follows the established theme pattern and integrates seamlessly.

Changed files

• ui/src/styles/base.css (modified, +538/-0)
• ui/src/ui/theme.ts (modified, +11/-3)
• ui/src/ui/views/config.ts (modified, +2/-0)