Styleswitchers, Light/Dark Mode
Figured I'd use this blog for now as some sort of log for working on my personal site. Often times it takes me a while to figure out something I'd like to implement, but on the viewer's side, barely anything changes! I thought it might be nice to write down a bit of the process.
Styleswitcher
At one point, I wanted to have multiple layouts of the site people could choose, as it made me nostalgic for old Pokemon fansites I used to visit back in the day that would have different headers and colors (DragonFlyCave is a good example of a site that has this). However, the more I worked on my site, the less inclined I felt to make multiple stylesheets, and right now I'm at a point where I think just a simple light/dark mode will do for me. I don't actually like coding multiple full CSS stylesheets in the end. It's nice to have the option though, and maybe I'll implement more in the future. I used KaleChips Styleswitcher tutorial to get started, though it took some fiddling around with the JS to get it to read my paths correctly on setup. This is the most elegant way I've found to do this.
Most recently, instead of having this script call individual CSS stylesheets, I've created a "base" CSS for all the site bones and have a few extraneous CSS sheets that simply contain the colors that will change. Previously, I just had three clones of the original stylesheet (System Default, Light, Dark) and every time I changed the entire site CSS for something, I'd have to go in and change all three at the same time. It took the better part of a day to figure out, and I'm not fully convinced it works, but now I can just edit one "base" sheet and swap colors in and out. There's some instructions on how to do this on the linked KaleChips tutorial, however I was having trouble understanding it so it took some Inspect Element sleuthing on other sites that have styleswitchers implemented.
The biggest pain in the butt is that I have a comment widget with its own CSS embedded on my site as a guestbook and in the newsletter sections. Because I am currently not a Neocities free user, you have to get a bit hacky with iFrames in order to embed Ayano's comment widget, one of the most commonly used comment widgets on Neocities. Because this is using an iFrame to embed the content, it does not inherit the parent CSS, though you can assign it its own stylesheet. But, I have multiple stylesheets that change from a dropdown, as discussed above! One singular stylesheet will not do. I wish I could say how I figured this one out, but it took a lot of copying and pasting from the JS of the Styleswitcher itself INTO the JS for the comment widget and fiddling, but it seems to be working currently. If you ever find yourself in a position where you're looking at my source code, I try to keep things neat but in some places like this it's really cobbled together with scotch tape and sticks.
Who knew a light/dark mode, something I feel like is implemented on most sites these days, requires this much work to set up? I couldn't even get a simple toggle button working, so I just left the Styleswitcher as is for now, since it is accomplishing basically the same purpose. Possibly in the future I'll remove this option entirely and just use one stylesheet that picks up the user preferences ("prefers-color-scheme") in the CSS, and the light/dark mode will just be whatever the user has the browser set to. I do like the ability to toggle though...