light mode screen recording css
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Yesterday I wrote about a way to do light-mode-screen-recording to convert to light mode from dark mode with ffmpeg. I was wondering if it could be done...

Date: January 2, 2026

Yesterday I wrote about a way to do light mode screen recording </light-mode-screen-recording/> to convert to light mode from dark mode with ffmpeg. I was wondering if it could be done entirely on the front end for web applications. Turns out you can. I’m sure there are limited wikis and site builders that don’t allow adding style like this, but it works if you can.

```
<video
    src="https://dropper.waylonwalker.com/file/1c53dbcb-4b84-4e94-9f04-a42986ab3fa1.mp4?width=800"
    controls
    style="filter: invert(1) hue-rotate(180deg) contrast(1.2) saturate(1.1);"
    >
</video>
```

Video: <https://dropper.waylonwalker.com/file/1c53dbcb-4b84-4e94-9f04-a42986ab3fa1.mp4?width=800>

│ 0 deg hue rotate

Video: <https://dropper.waylonwalker.com/file/1c53dbcb-4b84-4e94-9f04-a42986ab3fa1.mp4?width=800>

│ 90 deg hue rotate

Video: <https://dropper.waylonwalker.com/file/1c53dbcb-4b84-4e94-9f04-a42986ab3fa1.mp4?width=800>

│ 180 deg hue rotate

Video: <https://dropper.waylonwalker.com/file/1c53dbcb-4b84-4e94-9f04-a42986ab3fa1.mp4?width=800>

│ 270 deg hue rotate