Code Snippets

you're always free to hit f12 and take some of my code straight from the webpage, but these are some code snippets that have my custom assets and website-specific adjustments removed. I don't need credit if you use my code, including the Javascripts—these are all incredibly simple, anyone with some basic web coding knowledge and a slightly more knowledgeable friend could easily figure out how to do them on their own. if you like the stuff I make, I would so much rather you just put my site button whatever page you keep links to cool websites.

I use a particular naming/capitalization that isn't always consistent because I'm a schizo. I also only just understand Javascript well enough to explain why I think it works. feel free to rename everything and mock my code with your friends, though I recommend you follow the tutorials as written before you start making major changes.

Advanced Manual Theme Switcher (Dropdown Menu)

most theme switchers I found when originally looking up how to do this had two options: either the attributes being changed were basically just colors or the Javascript swapped the stylesheet URL. the problem is that I have a lot of things that get changed within the CSS, including images and fonts, and managing more than two stylesheets given the sheer amount of stylized content I have on my site is incredibly limiting. if you just want to have a light/dark mode toggle, there are easier ways to do it than this.

the theme switcher works by giving <body> an ID and a default data theme. the data theme colors/images/fonts are determined within one stylesheet through variables, and the Javascript simply swaps what data theme <body> is using depending on what you select on the dropdown. the selected theme is stored locally, so it doesn't change back when someone goes to another page.

the reason I needed a theme switcher in the first place was because I knew my color scheme/font choice causes eyestrain and wanted to make my website more accessible without compromising my vision. if you're excited about the idea of a theme switcher but you're not sure how you want to use it, consider doing what I did and making a version of your site that is more accessible. experiencing eyestrain in response to high contrast is incredibly common and I've seen way too many websites with such low contrast that I have to highlight the text if I want to read anything. you could also make a Halloween theme with ghosts and shit.

begin by setting up the HTML on any page you want to have the theme switcher on. data-theme should be set to the default theme, whatever you want to name it. <body> should look like this:

<body id="themeLink" data-theme="theme1">

next is the actual selector itself. this uses a dropdown menu without a button, meaning simply clicking the option on the dropdown prompts the theme change. you can put this anywhere in body and have as many themes in it as you'd like. for the purpose of this tutorial, we're doing two.

<form id="themeForm" action="/action_page.php">
<label for="themes"><h3>Theme Selector</h3></label>
     <select name="themes" id="themes" class="sidebarSelect">
         <option value="theme1">Theme One</option>
         <option value="theme2">Theme Two</option>
     </select>
</form>

at this point, you'll probably want to have the CSS set up correctly, so I'm gonna jump over to that instead of explaining the Javascript. any attributes you want changed by the theme switcher must be determined by variables within each data-theme. this tutorial assumes you already have a stylesheet and some basic foundation to your website, so don't just copy and paste this exactly and be confused when it doesn't work. if you're renaming things, make sure that the option value names are the same names you chose for the corresponding data-theme. here's an example of what it might look like:

[data-theme="theme1"] {
     --headerImage: url('https://theme-switcher-guy.neocities.org/Assets/Theme1Header.png');
     --bodyColor: #5D2A42;
     --fontColor: black;
     --fontSize: 18px;
     --fontFamily: Arial, sans-serif;
     --pMargin: 0;
     --strongStyle: normal;
}

[data-theme="theme2"] {
     --headerImage: url('https://theme-switcher-guy.neocities.org/Assets/Theme2Header.png');
     --bodyColor: #1E1E24;
     --fontColor: white;
     --fontSize: 14px;
     --fontFamily: Times, serif;
     --pMargin: 5px;
     --strongStyle: italic;
}

be aware that changing font sizes, font family, and margins can easily make your website look like shit if you haven't made it responsive. I didn't use variables as a beginner, so in case you don't understand how they'd be used, here's what they look like in practice:

body {
     background-color: var(--bodyColor);
     color: var(--fontColor);
     padding: 20px;
     font-family: var(--fontFamily);
     font-size: var(--fontSize);
}

header {
     width: 100%;
     height: 200px;
     background-image: var(--headerImage);
}

main p {
     margin: var(--pMargin);
}

strong {
     font-style: var(--strongStyle);
}

and best (or worst) for last: the Javascript, starting with the very basic theme-switching function.


function setTheme(theme) {
     const body = document.getElementById('themeLink');
     if (body) {
         body.setAttribute('data-theme', theme);
     }

     localStorage.setItem('selectedTheme', theme);
}


function handleThemeChange(event) {
     const selectedTheme = event.target.value;
     setTheme(selectedTheme);
}

this tells the Javascript that themeLink, the ID we gave <body>, should have its data-theme attribute set based on a selection and saved in local storage. next is actually initalizing the selector so the Javascript knows that the dropdown menu we created is what makes the theme switching happen.

function initializeThemeSelector() {
     const themeSelector = document.getElementById('themes');

     if (themeSelector) {
         const savedTheme = localStorage.getItem('selectedTheme');
         if (savedTheme) {
             setTheme(savedTheme);
             themeSelector.value = savedTheme;
         }

         themeSelector.addEventListener('change', handleThemeChange);
     } else {
         console.error('Theme selector not found.');
     }
}

that also creates an error message that will appear in the console if you hit f12 to see why something didn't work. lastly, you want the theme switcher and any saved theme to load with the content on the page.

document.addEventListener('DOMContentLoaded', () => {
     initializeThemeSelector();
});

I personally have my theme switcher in a sidebar that gets added via loadElements. I'm not going to tell you how to use loadElements here, but if you're already doing that yourself, initialize the theme selector as data in the sidebar instead of within DOMContentLoaded, otherwise one or both of them break.

the beauty of this theme switcher is that you don't have to fuck with the Javascript to add more themes. they are entirely determined by the option values you put in the theme switcher itself and their corresponding data-themes in the CSS. have fun!

Image Loading Bar

given the nature of having an indie website, pages with a large amount of images will look like shit while they load. this code creates an overlay with a loading bar for image-heavy pages, so you can hide the ugly loading swipes. [MORE COMING SOON]