Demo of light and dark themes. Light theme uses a bright button with white text, while dark theme uses a light button with black text.
View the CSS. It starts with a range of greys, blues, and yellows. These shades could be generated from single base colors, using Sass or PostCSS. The base colors are assigned to specific properity variables, --color-button, --color-button-text, --color-button--hover, etc. Since the text, hover colors, etc don't follow a pattern from light to dark, though, we can't assume a single "theme color" + variations will work. The button color variables still need to be individually assigned.