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. 

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)