why not just use `:root`, define some variables for each color and media queries for prefer theme? I don't understand react theming or this approach, you can do it with 1 line of css.
With :root, you can write css variables that can be accessed by any other element on the page (?).
So to implement a light and dark theme, you could have something like `@media (prefers-color-scheme: light){ :root { --bg-color: #FFF; }`, and then have the body element use that via `body { background: var(--bg-color); }`.
