An Astro-based portfolio website exhibited inconsistencies in dark mode styling and used overly complex background designs, resulting in a cluttered and unprofessional appearance.

Issue

The website displayed inconsistent styling between light and dark modes, with text colors varying based on the active theme. Additionally, the background design used multiple layered JPG images, creating visual noise and contributing to a disjointed user experience.

Culprit

The inconsistencies stemmed from:

Dual CSS Variable Definitions: Separate :root and :root.theme-dark variable sets caused style conflicts and bleeding between themes.
Background Complexity: Multi-layered background images introduced performance overhead and visual clutter, complicating maintenance and appearance.

Solution

Dark Mode Consolidation

The implementation was simplified by removing all light mode-specific CSS variables and consolidating dark mode colors into the primary :root selector. This ensured consistent styling and eliminated conflicts between themes.

Minimal Background Implementation

The complex multi-layer JPG backgrounds were replaced with a single, minimal noise texture. This change reduced visual clutter, improved performance, and maintained a cohesive design. The noise texture was blended subtly with the base background color for a refined appearance.

Ayu Mirage Integration

The Ayu Mirage color scheme was fully adopted, applying its palette for consistent dark mode styling. This included base background colors, text colors, and accent elements, ensuring a cohesive and professional visual experience.

Outcome: The portfolio now features consistent dark mode styling and a cleaner, more professional design, enhancing user experience and visual coherence.