Theme Switch
As you see, I am dabbling with a dark theme. I needed some little fun project amidst the drudgery of migration. You can switch between dark and light:
Alas, for this switch to work, I need a small JavaScript. Hence, no switching in case you have JavaScript disabled.
I quite like the dark theme, but maybe it’s only the newness. At least at night, the dark tone is soothing for my eyes. Some more tweaking might be required regarding the different colours and shades.
I am going to put the theme switch somewhere more permanent than this post, but I haven’t found a good solution yet. Somehow it should be easily reachable, and the availability of the choice easily discoverable, but then again, it’s not something that needs to be accessible all the time.
However, I don’t like my current solution. If you use the dark theme, which is the default right now, all is fine. But if you set the light theme, the dark theme flashes well visibly when you load a new page. Not good. The loading page needs to read the setting from the cookie, and scan the document for the available stylesheets, then enable the chosen one. Especially if the page loads an external resource, like from Vimeo or YouTube, the switch-over is clearly visible, but also if there’s just an image. Pure text pages fare a bit better. It seems to me that the detection of the available stylesheets for each and every page is not necessary.
Note to self: think a bit more. And scour the interwebs.
If you’re annoyed by the behaviour, simply stick to the dark theme for now. It’s the new shiny anyway.
(fixed, see updates below)
Drop-downs
The menu links at the top now also provide a drop-down to directly access the connected overview pages, if there are any, that is. A click on the main menu link itself still brings up the overview page.
The sub-menus are switched off on small mobile devices. Two level drop-down menus are not suited there. Heck, even one level drop-down are questionable, need to think about that as well at some point.
The drop-downs don’t use JavaScript, it’s pure CSS.
Update #1
I have resolved the flickering at-load issue mentioned above. The new solution does not rely anymore on enabling and disabling the available stylesheets, but by writing the <link> tag for the actually selected stylesheet – and only for that one – into the <head> section on the fly upon page load.
I have updated the above buttons accordingly. The theme selection is stored in localStorage, where it is kept forever or until you delete it in your browser’s prefs. I might change this so sessionStorage, from where it vanishes when you close the tab or window, just to decrease the creepiness level in general, even though it’s only a string with the stylesheet name. Or make this a user setting. Just kidding.
It’s simple JavaScript code, in fact, so that even I was able to come up with, once I had learned of the basic idea. For now the code is directly in the <head> section in case you’re curious. The JavaScript code there is partially written automatically by the template, for added fun.
In case JavaScript is disabled, there’s a <noscript> element with the stylesheet link for the main theme.
Update #2
I have added theme switches at the bottom of the pages.