Color Schemes Boilerplate

# Managing all the colors

Color Management is hard. You want your colors to look pretty. You also want them to be easy to read. You don't want to micro manage, because that's tedious work.
Here's a boilerplate CSS file that will help you generate light, dark and colorful themes from only a few variables.

--theme-hue: 210deg; 
--theme-sat: 20%; 
--theme-lit: 90%;

--theme-accent-hue: 200deg; 
--theme-accent-sat: 100%;
--theme-accent-lit: 25%;

Define a Hue, Saturation and Lightness and start out with a robust and accessible foundation for all colors and themes on your website.

I also included a little Javascript, that will help you switch themes as efficiently as it gets.
_{(This will require localStorage to work.)}

# Input Elements

If your browser supports color-scheme, interactive elements will automatically adapt light or dark mode.

# Themed Browser UI

Look at me. Now look at the Browser Bar. Now look back at me. If your browser supports theme-color, this will paint your browser accordingly to the active theme.

window.themes includes a list of all themes with their according colors, so be sure to add your custom one here.

window.themes = {
	light: "#e0e6eb",
	dark: "#29333d",
	cherry: "#971127",
};

# Power to the people

# How to use it