Show HN: Invertornot.com – API to enhance your images in dark-mode

mattismegevand | 175 points

Semi-related - I saw this on https://v8.dev a while back, but `filter: hue-rotate(180deg) invert();` can be a neat CSS trick to 'dark mode' some kinds of graphics, while not screwing with the colours so much. The `hue-rotate` help a bit to keep 'blues blue' etc.

It's far from perfect, but it's a neat one to have in your back pocket.

madeofpalk | a month ago

If you don't have a lot of images, you can go over them all manually and write the "please invert me" request directly into the filename.

CSS:

    img[src^="/images/invertable"] {
        filter: hue-rotate(180deg) invert(1);
    }
Now all image names starting with "invertable" will be inverted.
medstrom | a month ago

Neat, as a reader, I've absolutely wanted this exact behavior many times. Do you have any examples of incorrectly classified images? As you say, the model seems quite simple, but I wonder if there are some pathological kinds of photographs that result in inversion.

alanbernstein | a month ago

I built dark mode for an email client’s (shortwave.com) HTML emails and this was the last major hurdle to solve. I wish that had existed then :)

Generally making emails dark mode is a non trivial problem, there is an hope source library that is a good start from Tempo: https://github.com/yourtempo/tempo-message-dark-mode

However there are plenty of edge cases that plugin doesn’t handle that we had to fix at Shortwave. Examples include legacy HTML4 attributes, better support for emails that are half dark mode, emails that have background images of #fff (looking at you google play reciepts), the list goes on. It’s honestly pretty solid now

rockwotj | a month ago

Huh. This is neat.

As a side, I have a great frustration balancing dark mode with other things. I use flux on my Mac, not for color temp but strictly for the "darkroom" mode which inverts everything and makes the (inverted) brightness values into red. I only do this when coding at night, to help with my sleep... but the trouble is it's made for people who use light mode during the day. I use dark mode all day. So I have to get out of dark mode and change my vscode theme to light in order for it to work. Not a huge deal, but then I open up some web page with a black background and go blind from all the red.

noduerme | a month ago

Does this distinguish white backgrounds from transparent backgrounds? For example, a graph consisting of anything-on-white should probably be inverted, while a graph consisting of pure red on transparent should probably not be inverted. For the latter, increasing the luminance (i.e. make it pink on transparent) might be best, followed by leaving it as-is, followed by inverting.

But I guess with ML reinforced by human feedback, trends like this manifest without having to explicitly handle them as special cases at all...

hunter2_ | a month ago

I'm confused... has the meaning of "invert" changed since I last looked? Because the bar chart given as an example on the page isn't actually inverted (the color of the bars and as far as I can see also the text stay the same, only the background changes from light to dark). So, additionally to this API, you need another model that does the actual "inversion"? Or just good old editing?

EDIT: from another comment - actually "inverting" seems to refer to doing

    hue-rotate(180deg) invert()
...which (if I read it correctly) inverts the hue of colored areas before applying the actual inversion in order to keep the colors the same (more or less - see also https://stackoverflow.com/questions/65344006/why-does-filter...) ? Not a frontend developer, so I wasn't familiar with this trick until now. TIL...
rob74 | a month ago

How can you use or create this model for conventional non-API projects? Like to embed it within some C code?

a2code | a month ago

Very cool! Nice job! Out of curiosity, how much CPU/GPU/RAM resources do you need to allocate to run something like this? Like you mention you're using small models. For example, could this run on a t2.micro on EC2? (1 vCPU + 1GB RAM)

SCUSKU | a month ago

not exactly the same but for colored pictures GPT recently suggested inverting the image and then turning the color space by 180° so that the original colors are restored... pretty genius

singularity2001 | a month ago

What I am interested in is a plugin/extension for Firefox/Chrome that can invert a video running on a page (darkreader is not doing that).

noisy_boy | a month ago

I would be interested to see more samples. Naively it seems like you could just say "isPhoto ? REDUCE_BRIGHTNESS : INVERT"

pimlottc | a month ago

Is inverting the colors in a photo ever the right choice? People come out looking really strange.

bagels | a month ago

What's your accuracy?

klntsky | a month ago

This is really cool! Do you have some more example images somewhere?

hansihe | a month ago

Pretty cool! A nice addition would be an in-browser runtime!

Labo333 | a month ago

Dark Reader needs this! Nice work.

block_dagger | a month ago