Skip to content

Dark mode: invert the exercise artwork instead of framing it in white - #549

Open
mzspicoli wants to merge 1 commit into
DuarteSantos8:mainfrom
mzspicoli:fix/dark-mode-exercise-artwork
Open

mzspicoli wants to merge 1 commit into
DuarteSantos8:mainfrom
mzspicoli:fix/dark-mode-exercise-artwork

Conversation

@mzspicoli

Copy link
Copy Markdown
Contributor

The exercise dataset is dark line art on white, which in dark mode is a bright block in the middle of the screen. This inverts it in CSS only (invert(1) hue-rotate(180deg) saturate(1.9), so the red muscle highlight stays red), on .exmedia images and videos and on thumbnails, with a black card behind. .thumb-x (the no-media placeholder) is excluded. Nothing is reprocessed; the files on the server are untouched.

CSS only, no behaviour change; checked by reading, not yet by eye on a device.

🤖 Generated with Claude Code

The whole 1,324-image dataset is line art on white, so in dark mode every
exercise card is a floodlight — a 320px one, mid-set, in a dim gym. The
browser can invert it for free: nothing is reprocessed and the files on the
server are untouched.

The hue-rotate is the part that matters. invert() flips lightness and hue
together, so the red highlight comes out cyan and stops reading as "this is
the muscle you are working"; rotating the hue back half a turn returns it to
red, and the saturate makes up for the wash-out inverting a mid-red leaves.
The card behind the picture goes black in the same rule, and the no-media
placeholder is excluded — it is an app icon on an app surface, with nothing
to invert.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0167AVafBcfxCkNqMNtfC7uW

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant