@gorazdo/material-you/dist/mjs/services/MaterialYouColor.js

Material You theme for @material-ui library

import { emphasize, getLuminance, useTheme, darken, } from "@material-ui/core";
import React, { createContext, useContext, useMemo, } from "react";
const MaterialYouColorContext = createContext(undefined);
const generateColors = (color) => {
    const luminance = getLuminance(color);
    console.log({ color, luminance });
    if (luminance > 0.3) {
        // todo change the lightness detection
        // change color and background-color generation
        return {
            color: darken(color, 0.6),
            backgroundColor: color,
        };
    }
    return {
        color,
        backgroundColor: emphasize(color, 1.1),
    };
};
export const MaterialYouColor = ({ children, color, }) => {
    const contextValue = useMemo(() => generateColors(color), [color]);
    return (React.createElement(MaterialYouColorContext.Provider, { value: contextValue }, children));
};
export const useMaterialYouColors = (cssProperties = {}) => {
    const colors = useContext(MaterialYouColorContext);
    const theme = useTheme();
    if (!colors) {
        return {
            backgroundColor: theme.palette.background.default,
            color: theme.palette.text.secondary,
            ...cssProperties,
        };
    }
    return {
        ...colors,
        ...cssProperties,
    };
};