Making a style switcher?

Talk about your website ideas, web design, coding, software and hardware.
Post Reply
User avatar
realachao
Newbie
Reactions:
Posts: 11
Joined: Fri Jan 27, 2023 1:55 am
Pronouns: she/they
Website: https://realachao.neocities.org/

Making a style switcher?

Post by realachao »

(I'm really sorry for the essay - I wanted to make it clear enough what I do and don't know and what I want to accomplish but this ended up being way longer than I intended. Also, please let me know if this is in the wrong board)

Let me preface this with the statement that while I have decent HTML and CSS knowledge, it is very scattered, and I've never taken the time to really learn it from the bottom up except for one semester of a web design class. Most of my knowledge is gleaned from observing and learning from existing code, templates, etc. So it's completely on me for not knowing some basics and more advanced stuff that I probably should know after messing around with web design on and off for over a decade. I've almost always had help or a crutch of some sort, so my foundation is not great.

Essentially, what I want to do is create a dropdown menu style switcher - the reason I want it to be a dropdown menu is because I love to create many different themes and already have three with more coming, so a toggle isn't really what I want (I also just prefer it stylistically, it takes up less space than having a bunch of radio buttons or links). It's also worth mentioning that I really don't plan on having anything really crazy or dynamic going on; my site is very simple in design and the extent of differences between themes is just colors and assets all located in the same spots.

I have three themes so far, the default one (a light theme), a dark theme, and a warm theme. I know how to link CSS files in HTML, and I know how to create a dropdown menu and add options, but that is pretty much all that I'm 100% confident in. I know that each option in the dropdown menu can be linked to an ID assigned to a theme (such as <option value="themename">theme</option>) but I'm not sure where those IDs are coming from (presumably the CSS, but I'm not totally confident in that). As far as I know, I think JavaScript is my best option here.

I also want the style switcher to then save the selected theme to a cookie or the cache so that someone can select a theme and have that remain across the whole site, without always defaulting back to the original theme every reload. This I also know must be done in JS or possibly some more advanced CSS stuff.

I've spent a LOT of time doing research on this, and I've come across several different ways to do it, but every way is a little bit off from what I'm looking for, and I've only been able to get one of them kind of working. The main issue is that most guides I've found only cover light mode/dark mode switching. I know next to nothing about JavaScript but I'm able to deduce some things, such as what values to edit so that it works with my other code. I also know that this can be done in only CSS using CSS variables, but I don't think that's what I want to do. But maybe it is! I really don't know.

The style switcher on The Cave of Dragonflies is probably the best example of what I'm trying to accomplish (I'm also using one of Butterfree's free layout templates on my site for testing - and my main layout right now is made with Sadness's Layout Builder, so thank you so much for that!)

As far as where to put the menu div, styling it, I can figure that part out. My main issue is making it go. Lost of JavaScript templates for this were either not doing what I'm trying to do, or were too difficult for me to edit properly to fit my code. I had a bunch of code I was working with but decided to just start over from scratch. Feel free to let me know if I should share what I have. My whole site is very much in draft mode, though, so I would prefer not to share it publicly yet. ^^;

Please be nice, lol...I've tried so hard to do this on my own but I'm painfully scatterbrained and decided I should reach out and talk about this to people who actually know what they're doing. Thanks so much for any help! ;v;
User avatar
loaf
Newbie
Reactions:
Posts: 11
Joined: Mon Jan 23, 2023 5:48 pm
Pronouns: he/him
Website: https://loafsona.neocities.org/

Re: Making a style switcher?

Post by loaf »

realachao wrote: Fri Jan 27, 2023 11:14 pm
Most of my knowledge is gleaned from observing and learning from existing code, templates, etc. So it's completely on me for not knowing some basics and more advanced stuff that I probably should know after messing around with web design on and off for over a decade. I've almost always had help or a crutch of some sort, so my foundation is not great.
Hey, no need to apologize for not knowing things. Everyone has their own journey of learning/figuring things out.

I wrote up a quick demo that should do what you need:

Code: Select all

<html>
<head>
  <link href="styles/blue.css" rel="stylesheet" type="text/css" id="blue">
  <link href="styles/green.css" rel="stylesheet" type="text/css" id="green" disabled="">
  <link href="styles/red.css" rel="stylesheet" type="text/css" id="red" disabled="">  
</head>
<body>
  
  <form id="style-switch">
    <select name="style-select" onchange="chooseStyle(this.options[this.selectedIndex].value)">
      <option value="blue" selected="selected">blue</option>
      <option value="red">red</option>
      <option value="green">green</option>
    </select>
  </form>
  
<script>
  // if no user preference is saved, set the theme to a default 
  if (window.sessionStorage.getItem('curStyle') == null) {
    window.sessionStorage.setItem('curStyle', "blue");
  }
  
  // change which style is currently displayed, and change that choice
  function chooseStyle(style) {
    prevStyle = window.sessionStorage.getItem('curStyle');
    document.getElementById(prevStyle).disabled = true;
    window.sessionStorage.setItem('curStyle', style);
    document.getElementById(style).disabled = false;
  }
  
  // initialize previously selected theme when loading the page
  let curStyle = window.sessionStorage.getItem('curStyle');
  chooseStyle(curStyle);
  document.getElementById("style-select").value = curStyle; 
</script>
  
</body>
</html>
Essentially what's happening here, is that when you change which option is selected in the dropdown, it disables the previously selected stylesheet, and enables the newly selected one. Alternatively, if you just wanted to use one stylesheet, you could have chooseStyle change which class body had, and have specific theming for each possible class. If anyone has any idea which of these would be faster, or if there's a better way of doing it, I'd love to know.

I chose to save this choice in session data, as opposed to cookies, as session data get deleted once a user leaves a website, which feels less intrusive to me. But you can feel free to swap them out for cookies. I've had some weird behavior getting session data to work properly when looking at a locally hosted site on firefox, but this should work once deployed (or when viewed locally with a different browser). Let me know if you have an questions / issues!
User avatar
realachao
Newbie
Reactions:
Posts: 11
Joined: Fri Jan 27, 2023 1:55 am
Pronouns: she/they
Website: https://realachao.neocities.org/

Re: Making a style switcher?

Post by realachao »

loaf wrote: Sat Jan 28, 2023 2:13 am
Essentially what's happening here, is that when you change which option is selected in the dropdown, it disables the previously selected stylesheet, and enables the newly selected one. Alternatively, if you just wanted to use one stylesheet, you could have chooseStyle change which class body had, and have specific theming for each possible class. If anyone has any idea which of these would be faster, or if there's a better way of doing it, I'd love to know.

I chose to save this choice in session data, as opposed to cookies, as session data get deleted once a user leaves a website, which feels less intrusive to me. But you can feel free to swap them out for cookies. I've had some weird behavior getting session data to work properly when looking at a locally hosted site on firefox, but this should work once deployed (or when viewed locally with a different browser). Let me know if you have an questions / issues!
You totally saved me! I can't thank you enough because I was getting such a headache over this lol. I also do like the session data route more because I wasn't a huge fan of cookies as an option - but I didn't really consider other options until this post. I primarily use Firefox and can see what you mean by weird behavior, since I haven't gotten it to work there on the laptop where I've been doing most of this stuff from, but I tested it out in other browsers and it does exactly the trick! :> (I'll definitely see if I can mess around with it some more to make sure it does work in Firefox for everyone, but now I know it's at least not a site-side issue. I haven't been able to get to my desktop yet but I was able to switch styles in Firefox on mobile so *shrug?*)

I'm also open to more input and methods if anybody has any, just for the sake of me learning more stuff, because this is really neat. But this has been hugely helpful, so thank you again. Q-Q I don't know what I can do in return but if you don't mind me using this, I will definitely credit you on my site, as long as you're okay with that!
User avatar
loaf
Newbie
Reactions:
Posts: 11
Joined: Mon Jan 23, 2023 5:48 pm
Pronouns: he/him
Website: https://loafsona.neocities.org/

Re: Making a style switcher?

Post by loaf »

realachao wrote: Mon Jan 30, 2023 12:30 am But this has been hugely helpful, so thank you again. Q-Q I don't know what I can do in return but if you don't mind me using this, I will definitely credit you on my site, as long as you're okay with that!
Thanks! I've got a site banner you can add if you'd like. Feel free to use what I wrote, happy to help!
User avatar
realachao
Newbie
Reactions:
Posts: 11
Joined: Fri Jan 27, 2023 1:55 am
Pronouns: she/they
Website: https://realachao.neocities.org/

Re: Making a style switcher?

Post by realachao »

loaf wrote: Mon Jan 30, 2023 3:18 pm Thanks! I've got a site banner you can add if you'd like. Feel free to use what I wrote, happy to help!
I will! Also, I love your site design, it's very stylish and cozy!
Thank you again. :>
User avatar
juette
Webmaster
Reactions:
Posts: 141
Joined: Tue May 10, 2022 3:30 pm
Pronouns: it/he/they
Website: https://mothcore.neocities.org/

Re: Making a style switcher?

Post by juette »

loaf wrote: Sat Jan 28, 2023 2:13 am I wrote up a quick demo that should do what you need:

Code: Select all

<html>
<head>
  <link href="styles/blue.css" rel="stylesheet" type="text/css" id="blue">
  <link href="styles/green.css" rel="stylesheet" type="text/css" id="green" disabled="">
  <link href="styles/red.css" rel="stylesheet" type="text/css" id="red" disabled="">  
</head>
<body>
  
  <form id="style-switch">
    <select name="style-select" onchange="chooseStyle(this.options[this.selectedIndex].value)">
      <option value="blue" selected="selected">blue</option>
      <option value="red">red</option>
      <option value="green">green</option>
    </select>
  </form>
  
<script>
  // if no user preference is saved, set the theme to a default 
  if (window.sessionStorage.getItem('curStyle') == null) {
    window.sessionStorage.setItem('curStyle', "blue");
  }
  
  // change which style is currently displayed, and change that choice
  function chooseStyle(style) {
    prevStyle = window.sessionStorage.getItem('curStyle');
    document.getElementById(prevStyle).disabled = true;
    window.sessionStorage.setItem('curStyle', style);
    document.getElementById(style).disabled = false;
  }
  
  // initialize previously selected theme when loading the page
  let curStyle = window.sessionStorage.getItem('curStyle');
  chooseStyle(curStyle);
  document.getElementById("style-select").value = curStyle; 
</script>
  
</body>
</html>
Essentially what's happening here, is that when you change which option is selected in the dropdown, it disables the previously selected stylesheet, and enables the newly selected one. Alternatively, if you just wanted to use one stylesheet, you could have chooseStyle change which class body had, and have specific theming for each possible class. If anyone has any idea which of these would be faster, or if there's a better way of doing it, I'd love to know.

I chose to save this choice in session data, as opposed to cookies, as session data get deleted once a user leaves a website, which feels less intrusive to me. But you can feel free to swap them out for cookies. I've had some weird behavior getting session data to work properly when looking at a locally hosted site on firefox, but this should work once deployed (or when viewed locally with a different browser). Let me know if you have an questions / issues!
hi so ive been trying this out on this page but it doesn't seeem to be working? id like the theme selector to be in the sidebar so i can just. load it on every page without needing to edit every page whenever i add a new style, so idk if that might be the issue. its definitely loading the missingto.css (making the background red, which i put as a test color) but when i select black and white from the dropdown it doesnt make things grey like it should.

idk i probably need to move the script or the dropdown between the different pages.
Image
User avatar
loaf
Newbie
Reactions:
Posts: 11
Joined: Mon Jan 23, 2023 5:48 pm
Pronouns: he/him
Website: https://loafsona.neocities.org/

Re: Making a style switcher?

Post by loaf »

juette wrote: Fri Feb 17, 2023 10:04 pm hi so ive been trying this out on this page but it doesn't seeem to be working? id like the theme selector to be in the sidebar so i can just. load it on every page without needing to edit every page whenever i add a new style, so idk if that might be the issue. its definitely loading the missingto.css (making the background red, which i put as a test color) but when i select black and white from the dropdown it doesnt make things grey like it should.

idk i probably need to move the script or the dropdown between the different pages.
Hm, I'm not sure if I'm seeing the same issue. I just tried it on my end, and it worked fine for me in Firefox and Chrome. It doesn't keep work on the other pages, as the script needs to be on every page that uses the theme, but on the page you linked to, I don't see what's wrong.
User avatar
juette
Webmaster
Reactions:
Posts: 141
Joined: Tue May 10, 2022 3:30 pm
Pronouns: it/he/they
Website: https://mothcore.neocities.org/

Re: Making a style switcher?

Post by juette »

loaf wrote: Sat Feb 18, 2023 1:59 am
Hm, I'm not sure if I'm seeing the same issue. I just tried it on my end, and it worked fine for me in Firefox and Chrome. It doesn't keep work on the other pages, as the script needs to be on every page that uses the theme, but on the page you linked to, I don't see what's wrong.
Firefox mustve been glitching on my computer i just tried it on my phone and it works as well. thank you
Image
amagicmuffin
Netizen
Reactions:
Posts: 31
Joined: Sat Jan 14, 2023 1:26 am
Pronouns: they/them
Website: https://amuffin.is-a.dev

Re: Making a style switcher?

Post by amagicmuffin »

juette wrote: Sat Feb 18, 2023 9:35 am
loaf wrote: Sat Feb 18, 2023 1:59 am
Hm, I'm not sure if I'm seeing the same issue. I just tried it on my end, and it worked fine for me in Firefox and Chrome. It doesn't keep work on the other pages, as the script needs to be on every page that uses the theme, but on the page you linked to, I don't see what's wrong.
Firefox mustve been glitching on my computer i just tried it on my phone and it works as well. thank you
Fyi your code seems to have the dropdown automatically set to missingTO. Try this: start on homepage > switch to black and white > go to writing > switch to black and white > go back to homepage. On my end, it seems like the writing page didn't turn black and white and the homepage is black and white while showing missingTO.
Image a broken ring of mail <3
User avatar
juette
Webmaster
Reactions:
Posts: 141
Joined: Tue May 10, 2022 3:30 pm
Pronouns: it/he/they
Website: https://mothcore.neocities.org/

Re: Making a style switcher?

Post by juette »

amagicmuffin wrote: Sun Feb 19, 2023 1:23 am Fyi your code seems to have the dropdown automatically set to missingTO. Try this: start on homepage > switch to black and white > go to writing > switch to black and white > go back to homepage. On my end, it seems like the writing page didn't turn black and white and the homepage is black and white while showing missingTO.
i haven't had time to put the script on the rest of the pages lol be patient
Image
Post Reply