While working on a recent project I noticed an issue with a canvas-based audio visualization when I toggled between light and dark modes. When I’d originally set it up I was browsing in dark mode and the light visualization stroke showed up perfectly on the dark background, but it was invisible when viewed using the light theme (which I’d neglected to test). I searched around, but didn’t find any articles on easy ways to make canvas respond nicely to user preferences, so I thought I’d share (in brief) how I solved it.

Aaron Gustafson

A practical guide to syncing CSS custom property theme colors (light/dark mode) with HTML canvas rendering. The technique uses `window.getComputedStyle()` to read CSS custom properties into a JavaScript theme object, then attaches a `MediaQueryList` event listener to `prefers-color-scheme` so canvas colors automatically update whenever the user switches themes.

Passing Your CSS Theme to `canvas` :: Aaron Gustafson