0

I want to invert colors via the css property 'invert' (for dark mode), but at the same time I want to leave 5 specific color to stay the same, and other 5 specific colors - not to invert, but to transform into specifically set 5 colors. Images are also to be left untouched. What code should be used in this case?

MiniDuos
  • 1
  • 1

1 Answers1

0

Sadly you can't do so using invert css property.

invert takes 1 parameter which is the amount of inverse

invert(amount);

you can invert all elements except some specific elements, but you can't specify this by color.

check MDN invert() Specifications

yherbawi
  • 509
  • 2
  • 7
  • Thanks! Apart from 'invert', perhaps there's some other way to specify scopes of color hex-codes and a pattern on how to transform them into appropriate colors that look better on darker backgrounds; with the exception of specific colors that need to be specified particularly? – MiniDuos Jan 02 '22 at 14:55
  • I don't know how you may implement such thing, even if you could it would be much harder than using two themes, I think you should consider using two themes and activate each one using javascript, by giving the body a class of dark/light on a button click , and style it in css. – yherbawi Jan 02 '22 at 15:08
  • Thanks! You're right, it would be the best way to stylize html where you know (or yourself set) the colors. But in this case, I'm intending to enhance dark theme for a free dictionary app which reads different formats of dictionaries and it's impossible to predict which colors were used in them. So I seek some automated way, and the invert function seems to be it. But at the same time, I need to leave untouched (or transform individually customized) the 5 colors that represent Chinese characters with different tones, hence the question – MiniDuos Jan 02 '22 at 20:23