The Flip-Flop Technique
I recently implemented a colour scheme toggler in the footer of my website, following Andy Bell’s guide, Create a user controlled dark or light mode, and I found a wonky but fun alternative solution for styling my dark theme which leverages CSS’s filter property.
Andy does a great job at explaining how this solution works, so I recommending reading his article if you want more information.
dark palette by changing an attribute on the root element:
I need to put in some time to work on the colours used in my dark theme, but I wanted an interim solution because I was so excited to implement this, to be honest!
Eventually, I realised that with a handful of
filter values, we can come up with a decent-enough inversion of my
Inversion complete. We’ve gone from a light background to a dark one. Now we need to fix the hues of our colours—in this case, we want our brown to be blue.
Now we’ve managed to get our blue back, but the Dragon emoji looks completely wrong. This is where the flip-flop technique comes in.
That’s done it. By applying the same filter again to the emoji, it flip-flops back to its unaltered appearance.
But something’s off. The colours of the emoji in the final example seem less saturated or less vibrant than the unaltered emoji in the first example, which is most noticeable on the yellow hair of the dragon. Interact with this demo to see the unaltered state alongside the fully-filtered state and see for yourself.
Even more confusing to me is that this discrepancy only exists when I look at it using my default light theme—when viewed with my dark theme the unaltered emoji appears just as unsaturated as the final product.
Maybe someone knowledgable about colours or filters on the web has an idea of what’s going on here, but I can’t seem to get the emoji to return to its original colour using any combination of filters to try to flip-flop back to its unaltered state.
I’m definitely missing something, but it’s close.