Seeking Help & Feedback on Theme Changer

[larvapuppy]

After looking at the site of Noah S, I was inspired to try adding dark mode to my site.  I'm following this tutorial, but I need some help/feedback on this before I move forward with applying it to my whole site.  EDIT: It seems that the js part of this tutorial is no good!

Here's the page I'm testing it on. There are little sun and moon icons near the top of the page, just below the huge header (or below the navbar if you're on mobile).

*I only have the switcher on my index so far and haven't yet added the js to save the user's preference, so I'm not looking for help with that yet.

So, my main problem is that my navbar for desktop is a separate HTML file, and I insert it onto each page as an iframe. So the css on that page is not affected by the style changer. Do any of you know if there is a way to fix this? 

I'm also looking for opinions/feedback on a few things:

• Is the dark mode theme dark enough?
• Is the dark mode theme legible?
• Is it obvious enough that the sun/moon icons are there to change the style? Is their position on the page good/ are they easy enough to find?
• Any other feedback on the style switcher to be honest!

[IndigoGolem]

I'll start at the end.

• I think your dark theme is plenty dark, tho the buttons the left do look rather bright against the purple background. I believe you can use CSS variables for images, so one solution might be to make a dark version of the button image with purple and white swapped, even if it still uses the same colors.
• I think the purple links are too close to the background color. Darkening the solid background a bit (where the Draw me a picture! thing is) would help, as would just making the links lighter. You can also use contrast checker tools for an idea of if your text colors are distinct enough. Here's one.
• The sun and moon seem alright. It's hard to say how obvious they are. I found them in a second or two, but i was looking for them. I've never noticed them before, but i don't look at your site often and i don't know if they were actually there the last time i was. I do think they're easier to identify as a sun and moon and not some other symbols in dark mode, which maybe is not ideal because that's not the default.
• The sun and moon make sense if the only themes you have are light and dark. If you decide later to add more themes (Anve Ozo has 5, from the same tutorial), you might need something else for that. I toyed with the idea of having a bunch of astrological symbols, and one theme for each classical planet, but i ended up just using a simple dropdown menu instead. That said, just having light and dark is also good. Fewer options means less stuff to test whenever you make a page with a weird layout. And a light/dark switch is the most many people will want or expect.
  

I'll also add that it can be helpful to have testing pages, just so if you break something then important pages like the index still work fine. But it's your site and you can do whatever you want with it.

Oh, the buttons are the frame that won't switch. Hmm. I don't suppose this is as simple as adding a <link> in the nav frame's page to the stylesheet with your themes? I don't know, i mostly don't use frames on my site so i hadn't considered how they'd interact with themes. You could look into alternatives to using frames for this, like Dan Q's <embed-html> element, or a static site generator.

[larvapuppy]

I believe you can use CSS variables for images

Yeah! That's how I got the leaf and gingham textures in the various page headers/footer to change. I think I'll go with the same dark leaf background texture from the main header for the nav (like how they both have the same texture in the light theme) if I can get the switcher to work for it.

I think the purple links are too close to the background color.

Looking at them again, I agree with you, so I've lightened them :D

It's hard to say how obvious they are. I found them in a second or two, but i was looking for them. I've never noticed them before, but i don't look at your site often and i don't know if they were actually there the last time i was. I do think they're easier to identify as a sun and moon and not some other symbols in dark mode, which maybe is not ideal because that's not the default.

I just added the icons today. & Thanks, that's good feedback! I think I'll make a different version of the icons for each mode.

If you decide later to add more themes (Anve Ozo has 5, from the same tutorial), you might need something else for that.

So far I just want the two, and since I really like my default light theme anyway I modeled the dark one after it without other changes to texturing etc (only the colours). Buuut I think if I do want to add more I will keep with the icons because they're cute :3

I'll also add that it can be helpful to have testing pages, just so if you break something then important pages like the index still work fine.

I have backups, but a testing page sounds like a good method too!

I don't suppose this is as simple as adding a <link> in the nav frame's page to the stylesheet with your themes?

I already tried that and it didn't do anything, unfortunately D: I think since they're different pages, the iframe document can't react to the inputs made to the main document without some other kind of interference like a script. I have 1 other similar idea that I'm going to try tomorrow, but if someone gives me a better solution by then I will do it.

You could look into alternatives to using frames for this, like Dan Q's <embed-html> element

I think I will look into this if I find out that styling the frame in the way that I want to isn't possible (don't want to go the ssg route though)

[larvapuppy]

Ok, I'm back to ask for help with the js part of this.  I added the theme saver script from this part of the tutorial under "Saving a CSS Theme with Javascript" .(I'm trying to do it mostly through css just like the tutorial says but have the theme necessarily save itself to localstorage via javascript). But it is simply not saving my theme preference when I leave and come back to the page.

I honestly have no clue what's wrong because I *think* I did it exactly as the tutorial said, and that anything I changed was purely cosmetic, but I don't know for sure. 

I do find the tutorial's wording is confusing in the parts where it matters, I just chalk that up to disorganized writing... For example:

The second block checks the user's browser to see if the "theme" group matches one of the values (make one for each theme). If it does the JS will select the respective input that changes the theme.

I'm meant to make one of what for each theme? A group or value?

*It's still only updated on my index page; I added the html/css part to my other pages but not the proper script

My html:

Code

<div id="themeswitcher">
   <script src="/styles/styleswitcher.js"></script>
   <noscript>Enable Javascript to save your theme preference.</noscript>
        
    <label for="light" id="lightmode">
        <input type="radio" id="light" name="theme">
    </label>
      
    <label for="dark" id="darkmode">
        <input type="radio" id="dark" name="theme">
    </label>
</div>

The styleswitcher.js in question:

Code

if(document.getElementById('light').checked) {
    localStorage.setItem('theme', 'light');}
if(document.getElementById('dark').checked) {
    localStorage.setItem('theme', 'dark');}

if(localStorage.getItem('theme') == 'light'){
    document.getElementById('light').checked = true;}
if(localStorage.getItem('theme') == 'dark'){
    document.getElementById('dark').checked = true;}

CSS relating to the switcher (other than the variables that change):

Code

#darkmode, #lightmode {
  width:15px;
  height:15px;
  margin: 0 10px 0 0;
  display:inline-block;
}

#dark, #light {
  appearance: none;
}

#darkmode {
  background-image: var(--moon);
}

#lightmode {
  background-image: var(--sun);
}

#darkmode:hover, #lightmode:hover {
  cursor: url('/miscpics/cursor_point_winter.png'), pointer;
}

#themeswitcher {
  float:right;
}

Any advice/help much appreciated; I'm lost 

[IndigoGolem]

I also never got past the JS part. I think that tutorial has broken JS, because the script provided changed and the guide was never rewritten.

You could try copying the script from a site that already has it working. I tried using what's at Coyote's site, but i never got it to work.

Probably what would help is knowing how to use javascript, which i mostly don't.

[Dan Q]

Any advice/help much appreciated; I'm lost 

This JavaScript won't do what you think it's going to do:

Code

	if(document.getElementById('light').checked) {
	    localStorage.setItem('theme', 'light');}
	if(document.getElementById('dark').checked) {
	    localStorage.setItem('theme', 'dark');}

What that JavaScript does is checks which radiobutton is checked, and then sets localStorage.

But it only does it once, when the script runs. The script runs where you put the <script> tag. Which is BEFORE the radiobuttons. So document.getElementById('light') will never find anything!

Even if you moved the <script> tag lower down the page, that wouldn't solve it either, because it'd only run it ONCE. When the page loads. Not when-the-radiobutton gets changed.

So you probably need to do two things. First, you need to move the <script> tag down the page a bit. A good idea is to put all your <script> tags RIGHT at the bottom, just before the </body>.

The second would be to make the JS react to what the user does. Something like this is probably what you want:

Code

// Get a handle on the theme switchers so we've got them, ready, for later:
const lightThemeRadiobutton = document.getElementById('light');
const darkThemeRadiobutton = document.getElementById('dark');

// This function checks which is currently checked and writes to localStorage:
function updateTheme() {
  if(lightThemeRadiobutton.checked) localStorage.setItem('theme', 'light');
  if(darkThemeRadiobutton.checked) localStorage.setItem('theme', 'dark');
}

// If either of them ever change their value, run the updateTheme function:
lightThemeRadiobutton.addEventListener('change', updateTheme);
darkThemeRadiobutton.addEventListener('change', updateTheme);

// When the page loads, we want to check the right radiobutton:
if(localStorage.getItem('theme') == 'dark') {
  darkThemeRadiobutton.checked = true;
} else { // using a plain "else" here means that the light theme gets to be the DEFAULT (if the user didn't check one yet)
  lightThemeRadiobutton.checked = true;
}

That should be sufficient for your users to select a theme and that selection to be properly reflected. Nice.

One more thing you might consider doing would be to make it so that the theme switcher only APPEARS if JS is enabled. Much better than a <noscript> tag. To do that, do something like <div id="themeswitcher" style="display: none;"> to hide it, and then extend your JavaScript with some code to show it again:

Code

document.getElementById('themeswitcher').style.display = 'block';

If you want to use your JS to change your theme (even within an iFrame, so long as it's on the same domain), you probably can! Personally, I'd use a data- attribute to make it clear that the theme is one thing, or another. I'd change my <body> element to say something like <body data-theme="light"> (to set the default theme, just in case they don't have JS!). And then I'd update my JS so that it changes that data-theme value. Here's some complete JS with everything I suggested, plus some protective code to ensure that it's safe to run the code even on pages without the theme switcher (e.g. inside your iframe):

Code

// Get a handle on the theme switchers so we've got them, ready, for later:
const lightThemeRadiobutton = document.getElementById('light');
const darkThemeRadiobutton = document.getElementById('dark');

// This function checks which is currently checked and writes to localStorage:
function updateTheme() {
  if(lightThemeRadiobutton.checked) {
    localStorage.setItem('theme', 'light');
    document.body.dataset.theme = 'light';
  }
  if(darkThemeRadiobutton.checked) {
    localStorage.setItem('theme', 'dark');
    document.body.dataset.theme = 'dark';
  }
}

// Only run these bits if there's a themeswitcher:
if(lightThemeRadiobutton && darkThemeRadiobutton) {

  // If either of them ever change their value, run the updateTheme function:
  lightThemeRadiobutton.addEventListener('change', updateTheme);
  darkThemeRadiobutton.addEventListener('change', updateTheme);

  // When the page loads, we want to check the right radiobutton:
  if(localStorage.getItem('theme') == 'dark') {
    darkThemeRadiobutton.checked = true;
    document.body.dataset.theme = 'dark';
  } else { // using a plain "else" here means that the light theme gets to be the DEFAULT (if the user didn't check one yet)
    lightThemeRadiobutton.checked = true;
    document.body.dataset.theme = 'light';
  }

  // Show the theme switcher (because JS is working!):
  document.getElementById('themeswitcher').style.display = 'block';
}

This means that everything else can be done in CSS! Like magic! Watch this:

Code

body[data-theme="light"] {
  /* CSS for the light theme goes here! E.g.: */
  background-image: var(--sun);
}

body[data-theme="dark"] {
  /* CSS for the dark theme goes here! E.g.: */
  background-image: var(--moon);
}

That's all off the top of my head; I might have written some bugs! But hopefully it'll set you in a good direction!