So the first "real" feature i added to this site was the theme switcher, that little sun/moon toggle up top, going in i thought i'd have to write two stylesheets and swap them out, which sounded annoyying and also doesnt go with what i wanted, but nop, theres a way cleaner way, and it taught me the thing i'm probably most happy i learned on this whole project: CSS custom properties (css variables).
the idea is simple once you understand it, instead of hardcoding colors everywhere like color: #4a3319, you define them once in :root:
:root {
--bg-global: #fffcf0;
--text-main: #4a3319;
--color-primary: #ffaa00;
}and then everywhere in your css you just reach for var(--text-main), now the fun part is when i made a second theme (moony) that redefines those exact same variables, but scoped to an attribute:
:root[data-theme="moon"] {
--bg-global: #0d0d1a;
--text-main: #e8e0f5;
--color-primary: #7b68ee;
}so switching the entire site from day to night is literally just flipping one attribute on the <html> tag, the whole page recolors itself because every color was already pointing at a variable.
the toggle itself is a tiny bit of javascript, when you flip it, it sets data-theme="moon", and it saves your choice in localStorage so the site remembers it when you jump between pages, i also learned the hard way that if you apply the theme after the page loads you get an annoying flash of the wrong colors for a split second (and its called FOUC,(flash of unstyled content)), the fix was a tiny script in the <head> that reads localStorage and sets the theme before anything paints, that fixes the issue.
basically, name your colors by what they do, not what they are, --text-main instead of --brown, because in moon mode that "brown" is a pale lavender, and if i'd named it --brown i would have confused myself or its just easier to read when coding.