34 lines
997 B
JavaScript
34 lines
997 B
JavaScript
import colorSchemes from "../config/colors.js";
|
|
import { helperClassesToCss } from "./utils/helper-classes.js";
|
|
|
|
const lightScheme = colorSchemes.light;
|
|
const darkScheme = colorSchemes.dark;
|
|
|
|
const colorToCss = (key, value) => `--color-${key}: ${value};`;
|
|
|
|
const colorSchemeToCss = (scheme) =>
|
|
Object.entries(scheme).reduce(
|
|
(css, [key, value]) => css + colorToCss(key, value),
|
|
``,
|
|
);
|
|
|
|
const lightCss = colorSchemeToCss(lightScheme);
|
|
const darkCss = colorSchemeToCss(darkScheme);
|
|
|
|
const colorSchemeToHelperClassesCss = (scheme, helperClasses) => {
|
|
return Object.entries(scheme).reduce((css, [key]) => {
|
|
return css + helperClassesToCss(helperClasses, key, `var(--color-${key})`);
|
|
}, ``);
|
|
};
|
|
|
|
const helperClasses = [
|
|
["text", ["color"]],
|
|
["bg", ["background-color"]],
|
|
];
|
|
|
|
const helperClassesCss = colorSchemeToHelperClassesCss(
|
|
lightScheme,
|
|
helperClasses,
|
|
);
|
|
|
|
export default `:root{${lightCss}}${helperClassesCss}@media (prefers-color-scheme: dark) {:root{${darkCss}}}`;
|