How-to set browser background colour to dark mode in any browser

Sometimes you would just like to give your eyes a rest and read a long article without having the whiteness of the screen glaring and forcing you to squint.

This little hack allows to invert the lightness of any website i.e. change it from white to black or black to white for easier reading, at the click of a button.

To do this, simply add a bookmark from any site then right click it and go to properties. Change the bookmark name to “invert lightness” and change the location to:

javascript:(function(){function%20RGBtoHSL(RGBColor){with(Math){var%20R,G,B;var%20cMax,cMin;var%20sum,diff;var%20Rdelta,Gdelta,Bdelta;var%20H,L,S;R=RGBColor[0];G=RGBColor[1];B=RGBColor[2];cMax=max(max(R,G),B);cMin=min(min(R,G),B);sum=cMax+cMin;diff=cMax-cMin;L=sum/2;if(cMax==cMin){S=0;H=0;}else{if(L1)H-=1;}return[H,S,L];}}function%20getRGBColor(node,prop){var%20rgb=getComputedStyle(node,null).getPropertyValue(prop);var%20r,g,b;if(/rgb((\d+),\s(\d+),\s(\d+))/.exec(rgb)){r=parseInt(RegExp.$1,10);g=parseInt(RegExp.$2,10);b=parseInt(RegExp.$3,10);return[r/255,g/255,b/255];}return%20rgb;}function%20hslToCSS(hsl){return%20″hsl(“+Math.round(hsl[0]360)+”,%20″+Math.round(hsl[1]100)+”%,%20″+Math.round(hsl[2]*100)+”%)”;}var%20props=[“color”,”background-color”,”border-left-color”,”border-right-color”,”border-top-color”,”border-bottom-color”];var%20props2=[“color”,”backgroundColor”,”borderLeftColor”,”borderRightColor”,”borderTopColor”,”borderBottomColor”];if(typeof%20getRGBColor(document.documentElement,”background-color”)==”string”)document.documentElement.style.backgroundColor=”white”;revl(document.documentElement);function%20revl(n){var%20i,x,color,hsl;if(n.nodeType==Node.ELEMENT_NODE){for(i=0;x=n.childNodes[i];++i)revl(x);for(i=0;x=props[i];++i){color=getRGBColor(n,x);if(typeof(color)!=”string”){hsl=RGBtoHSL(color);hsl[2]=1-hsl[2];n.style[props2[i]]=hslToCSS(hsl);}}}}})()

OrangeDux Support Team.