Featherweb BlogBlog index
one aha moment later..
I'm one step closer to the final solution. It suddenly became clear to me that this theme switching could be further simplified, ending up with even less code and less weight. One of the advantages of doing your writing directly in the html document, is that you have the head of the document always available. My current proposal is to just change the current color-name in the head to the desired color name.
The basic idea is to have two stylesheets: the general one, containing everything, except colors ("blogstyle-min.css" in the image) and a very small second stylesheet, containing only the color theme ("light.css" in the image). All that is needed is to replace the word "light" with the name of one of the other colors. The color.css's are so small, just two lines, I manually wrote them minified. 😉
Its fun to play with this. Not only is it very easy, it is also reliable and adhering to the principle:
The fastest code is the one that does not exist ~ Sylvain Kerkour
Just like in my former post the color circles are not a theme switcher. They are links to 10 different html pages, only here to demonstrate how the different color themes look like.
The method I explained above however, changing the color name in the head of the page, is a real theme switcher. It enables one document to have 10 different color themes, almost effortlessly. Another advantage of this way of switching themes is that it automatically "remembers" a writer's preferred theme. No coding needed.