---
title: "light mode screen recording css"
description: "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: 2026-01-02
published: true
tags:
  - dev
  - webdev
template: til
---


Yesterday I wrote about a way to do <a href="/light-mode-screen-recording/" class="wikilink" data-title="light mode screen recording" data-description="I saw this tip from Cassidoo and had to try it out for myself. I kicked on a screen recording right from where my terminal was, converted it, and it actually..." data-date="2026-01-01">light mode screen recording</a> 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.

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

> 0 deg hue rotate

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

> 90 deg hue rotate

<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>

> 180 deg hue rotate

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

> 270 deg hue rotate