I’m curious on the ways of implementing color schemes that can be toggled on the fly on a website, something like the youtube/twitter dark modes:

Easiest way would be to separate the color styles into a new stylesheet and apply a toggle class over the body.
Are there any other, better ways of doing it? perhaps using CSS variables?
I usually architecture theming into the CSS from the beginning, by just following Harry's BEMIT guide.
t--light t- (theme) CSS class. For example t-menu__item--active >>> Full example
That's how I would do it
Not really sure on how I would approach it, but here's an interesting talk by Harry Roberts which might help. 🙂
Modern option:
Use CSS variables and toggle them with JS, it would be the easiest option. Not all browsers support CSS variables.
Another option:
Just make a class (or attribute) to apply on body and override styles in any element within that body you want to change. In JS you just toggle that one class/attribute on body.
body[theme="dark"] { background: #000; color: #fff; } body[theme="dark"] nav { ... } body[theme="dark"] footer { ... }From the architecture point of view I would recommend creating a separate
themesCSS/SASS/whatever folder and put there everything in the original structure, something like:core.css variables.css components/nav.css components/footer.css themes/dark/core.css (override and change variable names where needed) themes/dark/variables.css themes/dark/components/nav.css (only override main nav.css) themes/dark/components/footer.css (only override) and at the end you might have main.css and main-dark.cssP.S. you may also use
currentColorto save you some CSS. Basically you should change main styles on html/body and that should be enough for most simple cases if you just want to invert colors.