How to darken a canvas-based editor without changing the document
Dark mode is easy until the important part of the page is not HTML. Google Sheets and parts of Google Docs render the editing surface into canvas-backed layers. A normal page-color stylesheet can darken the toolbar while leaving the grid bright. A page-wide CSS filter reaches the grid, but it also reaches every photo, video frame and icon inside it. That creates a worse problem: a photo can…
Dark mode poses challenges when the editing surface is a canvas-backed layer, as seen in Google Sheets and parts of Google Docs. Normal page-color stylesheets can darken the toolbar but fail to affect the grid without also affecting photos, videos, and icons. A page-wide CSS filter reaches the grid but also affects all media, creating an undesirable problem where photos can become negative images and careless color changes can alter the editor's perception of document colors.
To address this, DarkWave was developed. It maintains a separation between the visual presentation and the document's data, ensuring the editor's drawing operations are preserved while applying dark mode effects to the page's surfaces. The implementation involves installing a canvas adapter that observes drawImage() operations, applying an inverse presentation transform to images drawn onto the presentation canvas.
This approach avoids unintentionally altering the photos or photos' perceived colors. The adapter also checks the size and source of canvas draws to determine if they are photos, preventing the drawing of old snapshots and avoiding "ghost photo" bugs. Additionally, it reads pixels from a separate scratch canvas to avoid interfering with the editor's rendering path.
Users should experience dark mode as a seamless improvement in readability without affecting the document's content or altering media elements. DarkWave offers an escape hatch for users to disable the feature on a per-site basis, acknowledging that automatic themes cannot predict every site's intent. Ultimately, dark mode should be a presentation problem rather than a data-mutation problem, ensuring the page's visual appearance is separate from its authored data.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.