css revert filter with invert(1) and hue-rotate(180deg)

Question

When enabled, my website uses a filter applied to the entire site to obtain a simple dark mode.

// this class applied to the entire body (when dark mode enabled)
.dark-mode {
    filter: invert(1) hue-rotate(180deg);
}

Since the backgrounds of all of my pages are either white (or light) and the text is all black (or dark), this filter works great for shifting to a dark mode without actually specifying every single color for the site.

The problem comes when there are a few things that shouldn't be filtered. Like right now I'm trying to create a color legend describing elements going on a map. The color legend goes from red->yellow->green->blue->purple. The legend looks great without dark mode applied, but looks wrong when I apply the dark mode filter, so I wanted to negate the dark mode filter for this color legend as well as for the elements going into the map.

// this class applied to elements that should counteract the dark mode filter (when dark mode enabled)
// notice that I just reversed the invert and hue-rotate from .dark-mode class
.negate-dark-mode {
    filter: hue-rotate(180deg) invert(1);
}

The problem is... this filter doesn't seem to counter act the .dark-mode class filter

Here's an example showing what's happening

<div style="position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            height: 400px;
            background-color: white;
            z-index: 1000;
            border: 4px solid black;
            background: linear-gradient(to right, hsl(0, 100%, 50%), hsl(0, 100%, 50%) 0%, hsl(75, 100%, 50%) 25%, hsl(150, 100%, 50%) 50%, hsl(225, 100%, 50%) 75%, hsl(300, 100%, 50%) 100%, hsl(300, 100%, 50%));">
  Parent
  <div style="position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
                height: 300px;
                background-color: white;
                z-index: 1000;
                border: 4px solid black;
                filter: invert(1) hue-rotate(180deg);
                background: linear-gradient(to right, hsl(0, 100%, 50%), hsl(0, 100%, 50%) 0%, hsl(75, 100%, 50%) 25%, hsl(150, 100%, 50%) 50%, hsl(225, 100%, 50%) 75%, hsl(300, 100%, 50%) 100%, hsl(300, 100%, 50%));">
    Child
    <div style="position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 100%;
                    height: 200px;
                    background-color: white;
                    z-index: 1000;
                    border: 4px solid black;
                    filter: hue-rotate(180deg) invert(1);
                    background: linear-gradient(to right, hsl(0, 100%, 50%), hsl(0, 100%, 50%) 0%, hsl(75, 100%, 50%) 25%, hsl(150, 100%, 50%) 50%, hsl(225, 100%, 50%) 75%, hsl(300, 100%, 50%) 100%, hsl(300, 100%, 50%));">
      Grandchild
    </div>
  </div>
</div>

The parent div shows a nice color legend, the child div shows the same color legend but with the dark mode filter (notice it doesn't look very nice), the grandchild div shows yet another color legend but with the attempt at negating the dark mode filter (notice it doesn't fully negate the filter applied to the Child div)

Clearly my understanding of filters isn't right... I figured if the dark mode filter was applying an invert(1) followed by a hue-rotate(180deg) then surely negating it would just be hue-rotate(180deg) followed by invert(1).

Any assistance is greatly appreciated.

Answer 1

One would think the two filters (invert(1) and hue-rotate(180deg)) I'm using are both "reversible" by simply applying them a second time, but after doing some more research it appears the implementation of the hue-rotate() filter is just an approximation and that it also has roundoff error and that applying hue-rotate(180deg) twice does not result in the original pixels.

Taking the advice from some of the answers in that post, I'm going to drop the saturation values from 100% to instead be 75%. The colors still look just fine when not in dark mode, and when moving to dark mode (and negating the dark mode for the legend) the colors look almost exactly the same as before the 2 filters were applied.