Enabling night mode in CSS.

Talkr.app now has night mode support. It follows your OS such as Windows; if you have night-mode on, Talkr.app will follow the color scheme through a very simple CSS rule we added to our CSS stylesheets:

@media (prefers-color-scheme: dark) {	
	html {
	filter: invert(1) hue-rotate(180deg);
	}	
}

Of course, there is more to it. But this short snippet explains how to trigger nightmode -or darkmode- and then style accordingly. We simply invert all html colors through filter and then do a hue rotate of 180 degrees. On element such as images, we flip it again so that images will not be filtered in darkmode. A simple and effective way of making darkmode available without styling a ton of CSS. We like to keep things as small as possible at our dev team.

Hope you enjoyed this tip, 'till nex time! happy coding.