Welcome!

Let's talk about scheming and theming best practices.

Whether you use a framework like TailwindCSS, Open Props, or roll your own solution using CSS variables and utility classes, here are some tips to help you create a visually appealing and accessible.

There are a few schools of thought on color schemes, let's look at light and dark mode, though some concepts will also work for completely alternate themes like joyofcode.xyz.

A few different approaches

1. Using a light.css and dark.css
   Advantage: works everywhere, easy to understand
   Disadvantage: managing multiple css files when a change is needed
2. Using CSS features like light-dark¹
   Advantage: widely supported css function, relatively easy to manage
   Disadvantage: few, may result in more keystrokes during development
3. Using CSS custom properties (variables)
   Advantage: reusable, easy to manage, can be easily overridden
   Disadvantage: if you need to support IE 11 (or opera mini), you will want to supply fallback properties

1. if you want to see a simple example of light-dark you can use this codepen.