Discussion on: What are CSS variables?

[Jack Harner 🚀]

I use CSS variables to enable the Color Picker on JackHarner.com.

I define the defaults as

:root {
  --color: #E91E63;
  --text-color: white;
  --darkerColor: #AA1145;
  --darker-text-color: white
}

Then take the color chosen from the Color Picker, calculate the slightly darker value, calculate what color text is good on both of those colors and adjust the CSS vars accordingly.

That way all the content still shows up with appropriate contrast and users are free to select whatever color they want.

[JkImExploring]

That's a cool site! I might have to play around with how to code that just for fun!