The problem
Currently, all images and their palletes in the website are adapted to the light theme, but there is no variation of the images for the dark theme. Thus, we need a way to have a version of the image that has a pallete that fits the dark theme. If we do a simple invert of the colours, it results in a rather 'ugly' looking image. Thus, we need a person who can properly adapt the pallete. However, doing it manually is an error prone and time consuming task.
The solution
The way we can approach this is by creating a small program that will transform an image's pixels from one color to another, given two colors in hex notation: the source color and the result color. Something along the lines of:
let fromColor = 0x000000;
let toColor = 0x00FF00;
for pixel in pixelsFromImage:
if pixel.color == fromColor:
pixel.color = toColor;
This is a naive implementation. The problem with this implementation is that it doesn't cover certain pixels; due to compression, the color will not be exactly as fromColor, instead it will be an average of the surrounding pixels. An example of this is the text of an image when you zoom in:
Notice that some pixels are slightly green or orange or gray. Thus, a simple exact comparison won't do a proper pallete conversion.
It would be nice if we could use an already existing program, but if not, we will have implement it in our own.
The problem
Currently, all images and their palletes in the website are adapted to the light theme, but there is no variation of the images for the dark theme. Thus, we need a way to have a version of the image that has a pallete that fits the dark theme. If we do a simple invert of the colours, it results in a rather 'ugly' looking image. Thus, we need a person who can properly adapt the pallete. However, doing it manually is an error prone and time consuming task.
The solution
The way we can approach this is by creating a small program that will transform an image's pixels from one color to another, given two colors in hex notation: the source color and the result color. Something along the lines of:
This is a naive implementation. The problem with this implementation is that it doesn't cover certain pixels; due to compression, the color will not be exactly as
fromColor, instead it will be an average of the surrounding pixels. An example of this is the text of an image when you zoom in:Notice that some pixels are slightly green or orange or gray. Thus, a simple exact comparison won't do a proper pallete conversion.
It would be nice if we could use an already existing program, but if not, we will have implement it in our own.