DarkWave
Dark mode with room for exceptions.
DarkWave explores a familiar annoyance: a bright page in the middle of an otherwise dark workspace. The project gives users controls for global behavior, per-site exceptions, brightness, contrast and scheduling rather than a single fixed theme. Its documented approach uses CSS filtering, with separate handling for images and canvas content. The challenge is balancing visual comfort with the original page's legibility; behavior can differ between websites and browsers.
- MY ROLE
- Developer - personal extension project
- PROJECT STATUS
- Personal project
- BUILT WITH
- JavaScript / HTML / CSS / Web Extensions
A problem
worth exploring.
Not every website offers a useful dark theme, and changing a whole page's colors can distort images or canvas-rendered content. A browser tool needs both adjustable defaults and an easy way to make exceptions.
A focused browser-tool project with a public landing page and documented controls, exploring the trade-offs between consistent dark mode and site-specific rendering.
How I approached it
- Let a per-domain preference override the global setting so one awkward page does not require disabling the whole tool.
- Expose brightness, contrast, presets and scheduling instead of assuming one dark treatment will suit every situation.
- Use CSS inversion and hue adjustment with media-specific handling for images and canvas-rendered content.
What I took away
- A theme change is also a content-rendering change; images and canvas surfaces need their own checks.
- Per-site escape hatches are more useful than promising that one visual treatment will work everywhere.