Canvas Voronoi stippling dots invisible in light mode theme

Working with HTML5 Canvas in an Astro-based portfolio site to implement theme-aware Voronoi stippling visualization, where the rendering needed to dynamically adapt between light and dark mode color schemes.

Issue

The Voronoi stippling portrait visualization rendered white dots that became completely invisible when users switched to light mode, where the background was also white. This caused a critical UX issue, as the primary homepage visual disappeared for ~50% of users.

Culprit

The canvas rendering logic used a hardcoded white color, ignoring the site’s CSS-based theme system. This approach failed to adapt dynamically to theme changes, resulting in invisible dots in light mode.

Solution

Replaced the hardcoded color with dynamic CSS custom property lookup to ensure the visualization adapts automatically to light and dark themes. This approach leverages existing CSS variable infrastructure for theme management without adding significant overhead.

Technical Approach

1. CSS Variable System: Used theme-specific CSS custom properties (--gray-0) to define light (black) and dark (white) dot colors.
2. Runtime Property Access: Dynamically read the computed CSS property at runtime using getComputedStyle(), ensuring the visualization updates automatically with theme changes.
3. Performance: Negligible overhead, with zero measurable impact on rendering performance.

This solution ensures the visualization remains fully responsive to theme toggles while maintaining compatibility with existing workflows.