1

Terminal displays would usually allow an effect called Reverse Video, or Inverted Video etc. Using ANSI escapes this is SGR 7. This effect swaps the foreground and background colours. (Wikipedia describes Reverse Video as performing a ones' complement on the brightness, which is not how I have seen it implemented. Maybe that was for older monochrome displays?)

Is there a way this effect can be implemented in CSS, such that it could be applied using a single class, without manually tracking the foreground and background colours of everything being output?

These do not do the effect I'm asking about:

  • filter: invert(): swaps colours by hue, turning a blue background into a yellow background etc.
  • mix-blend-mode: difference;: uses the background colour to calculate new colours, but again doesn't actually swap them. I couldn't see any other mix-blend-mode modes that do it either.

Code pen examples of these.

Is there some way to dynamically look up the foreground and set the background to it and vice versa within CSS, or is this just something that's impossible without some JS?

curiousdannii
  • 1,658
  • 1
  • 25
  • 40
  • The keyword youre looking for is not reverse, but invert. Also, did you try applying `filter.invert()` to the parent directly? – Omkar Aug 22 '19 at 12:48
  • @Omkar As I said, [swaps colours by hue, not fg and bg](https://codepen.io/curiousdannii/pen/gOYgbqK). – curiousdannii Aug 22 '19 at 13:01
  • 1
    There are a couple CSS-Tricks articles on this kind of technique: [1](https://css-tricks.com/reverse-text-color-mix-blend-mode/) and [2](https://css-tricks.com/methods-contrasting-text-backgrounds/). And in case you need to rely on JavaScript to do it, here's one implementation in jQuery: https://stackoverflow.com/questions/9101224/invert-text-color-of-a-specific-element-using-jquery – TylerH Aug 22 '19 at 13:17
  • The more broad concept of inverting (that you seem to avoid) is covered comprehensively (IMHO) here: https://stackoverflow.com/questions/35969656/how-can-i-generate-the-opposite-color-according-to-current-color While it may be using hues or "opposites" rather than swapping, there may be some useful information there for you. – TylerH Aug 22 '19 at 13:18
  • Possible duplicate of [Invert CSS font-color depending on background-color](https://stackoverflow.com/questions/16981763/invert-css-font-color-depending-on-background-color) (I haven't cast this as a close vote as I haven't had time to look closely, and my vote would be binding). – TylerH Aug 22 '19 at 13:20
  • @TylerH The first CSS-Trick is clever, but seem to require you to know the colour, so you couldn't have a general class that would work on top of everything. I wouldn't say I'm avoiding inverting; it's just a different effect than what the ANSI terminal reverse mode does. – curiousdannii Aug 22 '19 at 13:25
  • @curiousdannii I can say I don't think there is a way for CSS itself to swap a color with another one dynamically; it's not really designed to handle such things. If you want to have a dynamic color choice (e.g. a user-specified color), I believe you'll need to use JavaScript to insert the color choice into the CSS and then CSS can handle the inversion from there based on "knowing" the colors. – TylerH Aug 22 '19 at 13:31
  • That last question gets close, but it's still all hard coded: both hard coded colours, and pixel sizes. So yeah, I think unfortunately there's no simple pure CSS solution to this. – curiousdannii Aug 22 '19 at 13:31

0 Answers0