Episode LXIX
It is a period of a Pandemic. Rebel viruses, striking from a hidden base, have won their first victory against the evil Human Empire.
During this tough times, A Jedi programmer managed to steal secret plans to enable Dark Mode Integration in simple UI designs, the 'filter property', which defines visual effects (like blur and saturation) to an element.
Learn the ways of the force and to control CSS and JS through this demo until peace is restored in the galaxy...
This is a demo page to show how to use Simple CSS and JavaScript trick to integrate Dark-Mode on your page using filter: invert(1) hue-rotate(180deg); to invert the colors and using JS to control the rest of elements and events.
This is kind of a shortcut for toggling Dark-Mode and not suiatble for Complex UI Designs as the property inverts everything and if you have a complex color scheme going on, this is not ideal.
This demo is inspired by This Video and This Article and the Iconic Star Wars Universe.
Interested in how it's done? Check out the GitHub Repository.