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. everything here is responsive and works on mobile. I don't need credit—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 scheme that isn't always consistent and the spacing is sometimes wack because I'm a schizo. I also only just understand Javascript well enough to make it do what I need it to do. feel free to rename everything and/or mock my code with your friends.

Manual Theme Switcher

use this to have a theme switcher controlled by a dropdown menu selection like the one in my sidebar. the themes are purely determined by HTML and CSS, so you don't have to fuck with the Javascript to add more.

HTML

have the body for any page you want the theme switcher to work on written like this.

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

then put this anywhere within body, including separate HTML files that get inserted into body via Javascript.

<form id="themeForm" action="/action_page.php">
     <select name="themes" id="themes" class="selectorDropdown">
         <option value="defaultTheme">Default (Light)</option>
         <option value="darkTheme">Dark</option>
         <option value="sillyTheme">Silly</option>
     </select>
</form>

CSS

this entire section assumes that you already have a functional HTML/CSS, so you should just use it as a reference, not something to copy-paste. create variables for all the themes you want within data-theme. make sure that you use the same names you put in the option values of the HTML selector.

[data-theme="defaultTheme"] {
     --backgroundColor: #FFFFFF;
     --primaryColor: #000000;
     --secondaryColor: ##1B79E4;
     --fontColor: #000000;
     --dropdownArrow: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="%23000000" viewBox="0 0 10 10"><path d="M5 6.5L1 2.5h8z"/></svg>');
}

[data-theme="darkTheme"] {
     --backgroundColor: #000000;
     --primaryColor: #FFFFFF;
     --secondaryColor: #0C1863;
     --fontColor: #FFFFFF;
     --dropdownArrow: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="%23FFFFFF" viewBox="0 0 10 10"><path d="M5 6.5L1 2.5h8z"/></svg>');
}

[data-theme="sillyTheme"] {
     --backgroundColor: #DDFF00;
     --primaryColor: #1900FF;
     --secondaryColor: #00B7FF;
     --fontColor: #FF0F0F;
     --dropdownArrow: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="%23FF0F0F" viewBox="0 0 10 10"><path d="M5 6.5L1 2.5h8z"/></svg>');
}

style the selection dropdown. background-color is the color inside the box, but background-image is actually the dropdown arrow, so background-repeat, background-position, and background-size are all applied to the arrow. note that the dropdown arrow's color is determined by fill="%23[YOUR HEX # HERE]" within the variables above.

.selectorDropdown {
     width: 400px;
     border: 3px solid var(--primaryColor);
     background-color: var(--backgroundColor);
     color: var(--fontColor);
     appearance: none;
     background-image: var(--dropdownArrow);
     background-repeat: no-repeat;
     background-position: right 10px center;
     background-size: 10px;
}

textarea:focus, input:focus, select:focus {
     outline: none;
     border-color: inheret;
     box-shadow: none;
}

Javascript

and best (or worst) for last: the Javascript. if you're putting the theme switcher in an HTML file that gets inserted into the page via Javascript (like a sidebar) you should put initializeThemeSelector() in the fetched data for that sidebar, otherwise the switcher will break.


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);

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.');
     }
}

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

Image Loading Bar

if there's a lot of images on a page, the user will see them all progressively load in and it kinda looks like shit. use this to cover it with a progress loading bar until it's finished.

HTML

put this somewhere in body, it doesn't matter where because the z-index property in CSS is what makes it sit on top of everything.

<div id="loadingOverlay">
     <p>LOADING IMAGES... </p>
     <div id="loadingBarContainer">
         <div id="loadingBar"> </div>
     </div>
</div>

CSS

style the overlay and loading bar with something like this. this loading bar is styled like the one on my pet memoriam page. if you want it to look more like it does on my art pages, have loadingBarContainer use the same background color as the overlay and give loadingBar a border that's the same color as well. you might have to play around with that, sometimes it misaligns things.

#loadingOverlay {
     position: fixed;
     inset: 0;
     background: #fffeee;
     z-index: 9999;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     opacity: 1;
     transition: opacity 0.4s ease;
}

#loadingOverlay.is-hidden {
     opacity: 0;
     pointer-events: none;
}

#loadingOverlay p {
     margin: 0;
     padding: 0;
     margin-bottom: 10px;
     font-weight: bold;
     color: #000;
}

#loadingBarContainer {
     width: 40%;
     height: 20px;
     background: #83827a;
     border: 2px solid #000;
     overflow: hidden;
}

#loadingBar {
     width: 0%;
     height: 100%;
     background: #000;
     border: none;
     transition: width 0.2s ease;
}

Javascript

after you have all that set up, use this Javascript to actually make it work. this includes a fadeout of the overlay when complete and timeout that disables it if it gets stuck for whatever reason. so long as your naming conventions are consistent and you understand how to use containers, none of the adjustments you make in CSS will mess with the loadbar functioning correctly.

document.addEventListener('DOMContentLoaded', () => {
     const images = Array.from(document.images);
     const total = images.length;
     const bar = document.getElementById('loadingBar');
     const overlay = document.getElementById('loadingOverlay');

function hideOverlay() {
     overlay.getBoundingClientRect();

     overlay.classList.add('is-hidden');

     const removeOverlay = () => overlay.remove();

     overlay.addEventListener('transitionend', removeOverlay, { once: true });

     setTimeout(removeOverlay, 500);
}

     if (total === 0) {
         hideOverlay();
         return;
     }

     let loaded = 0;

function updateProgress() {
     loaded++;
     const percent = (loaded / total) * 100;
     bar.style.width = percent + '%';

     if (loaded === total) {
         setTimeout(hideOverlay, 500);
     }
}

    images.forEach(img => {
         if (img.complete) {
             updateProgress();
         } else {
             img.addEventListener('load', updateProgress);
             img.addEventListener('error', updateProgress);
         }
     });
});