Featherweb Blog

Saving document color in LocalStorage

final part

in LocalStorage

While playing with colors can be great fun, most peple will eventually want their favorite color theme to appear each time they open a link.This used to be solved with a cookie, but nowadays the browser remembers the color choice in its LocalStorage.

As usual, it took me a while to figure out how to get this to work. Finally, it was an example by Johan Kohlin on Codepen that pointed me in the right direction. Johan's is a very simple example, only changing the background color. Needless to say, that is not enough "in real life". so the font color has to be added too. And then there are those stubborn links. I almost gave up because of those pesky links, but suddenly realized I could give them the same color as the fonts. That guarantees the contrast with the background will always be okay.

Wonder how to do that? Make the links a child of the color, e.g.:

.green{
	color:white;
	background:green;}
.green a:link {
	   color:inherit;
	 }

I left the color styles internal, in the head of the html page, so you can also look at the page source code. If you want to use the example at Codepen, make sure to remove the "@" in front of the color names in the CSS. That "@" is a LESS variable, not wanted in plain CSS.

Finally, don't study my color choices too much. I have not really looked at them esthetically, absorbed as I was in solving the technical part. I think though we can all agree, that red theme should be forbidden...( ͡° ͜ʖ ͡°)