HELP: How to make a style/theme switcher?

[OneMillionFurries]

I asked this in the chat but very quickly realized I should probably make it a forum post instead :P

Anyways yes. I am struggling to figure out how to make a style/theme switcher for my website? For some reason no matter what i google i just cannot find a guide on this? but i see style switers all the time so there MUST be some resources for an html/css newbie like me :[

Any help is appreciated! thank you!

[vvinrg]

Here's a copy of what I replied with in chat, so that it doesn't get lost:

[Saturday 6:52:31 pm] vvinrg: Uhhhhhh the way I tend do to it is by swapping CSS custom properties. Basically they're like variables for any CSS value. You can set --fg-color: black; somewhere and then do font-color: var(--fg-color). More info here: [link]
[Saturday 6:55:00 pm] vvinrg: It's more complicated if you wanna swap out the HTML too. For that, you'd probably wanna look into some system of templating pages, where you have an object with the title, text content, etc. that gets read by some JS and converted into the full page at load time(or on the server if you have that!)
[Saturday 6:55:36 pm] vvinrg: I guess you could also do something like having different html files for each theme, so, for some foo.html, have foo.dark.html, foo.light.html, foo.othertheme.html
[Saturday 6:55:52 pm] vvinrg: But that would involve a lot of extra manual for for each page.

To elaborate:
It depends on what you mean by a theme. If you just want to swap some colors, then CSS custom properties are for you.
Here's a little codepen with a basic theming setup built around that.

To have it persist between pages and reloads, you'll want to look into using localStorage.
LocalStorage is sorta like cookies, but for use with JavaScript.
You'd want to modify the JavaScript to be:

Code: javascript

function changeTheme() {
  document.body.id = themeform.theme.value; // set the document ID, so that the CSS knows what theme we're using.
  localStorage.setItem("theme", themeform.theme.value); // save the theme to localstorage
}

var currentTheme = localStorage.getItem("theme"); // load the previous theme

themeform.theme.value = currentTheme ? currentTheme : "light"; // set the theme to it, or to "light" if it's null.
changeTheme(); 

lightmode.addEventListener("change", changeTheme); // if the user clicks Light Mode, change the theme.
darkmode.addEventListener("change", changeTheme); // if the user clicks Dark Mode, change the theme.

I left that out of the codepen cause codepen doesn't allow you to use localStorage.

Keep in mind that, on pages where you don't want to have the theme changer, you can reduce the JS to just:

Code: javascript

var currentTheme = localStorage.getItem("theme");
document.body.id = currentTheme ? currentTheme : "light";

If you'd rather change the CSS and HTML, you'll need to get more creative.
Looking at your site, I see it's using neocities, so theming with server-side stuff is impossible. Because of this, I think your 2 main options are

1. Segment your site based on theme. This might mean having a onemillionfurries.com/theme1/index.html, onemillionfurries.com/theme2/index.html, etc, or it might mean having index.theme1.html, index.theme2.html, etc. This is totally doable, but it might get tedious after a while.

2. You could do some magic with JavaScript to construct the page when it loads. This might look something like

Code: javascript

const content = "This is the text for my page!"

var currentTheme = localStorage.getItem("theme");
document.body.id = currentTheme ? currentTheme : "light";

if (currentTheme == "light") {
  document.body.innerHTML =
    "Light theme!!!!! <p>" + content + "</p>";
}
if (currentTheme == "dark") {
  document.body.innerHTML =
    "Dark theme :O <p>" + content + "</p>";
}

If you have any questions abt the above, feel free to ask!

[wygolvillage]

Figured I might as well post this here... So, I might need this explained to me like I'm 5 since I'm not a Javascript-head at all lmao, but I have a future site idea where the theme switcher would swap out a few images and certain bits of text. Is there a way to do this? Like, set a couple variables, to display different images/text depending on which theme is "active" and have that remain consistent through the few pages of the section of the site.

Basically, the concept here is since it's a shrine to all the horse girl browser games I half-remember playing, at the "stables" page the person viewing the site can "choose a horse" via a theme switcher and see that horse in their stall, have a picture of that horse show up in the side bar while they explore the site, have the horse's name mentioned in certain places, etc.