Trilium/apps/client/src/services/css_class_manager.ts

import {readCssVar} from "../utils/css-var";
import Color, { ColorInstance } from "color";

const registeredClasses = new Set<string>();

// Read the color lightness limits defined in the theme as CSS variables

const lightThemeColorMaxLightness = readCssVar(
                                        document.documentElement,
                                        "tree-item-light-theme-max-color-lightness"
                                    ).asNumber(70);

const darkThemeColorMinLightness = readCssVar(
                                        document.documentElement,
                                        "tree-item-dark-theme-min-color-lightness"
                                    ).asNumber(50);

function createClassForColor(colorString: string | null) {
    if (!colorString?.trim()) {
        return "";
    }

    const color = parseColor(colorString);
    if (!color) {
        return;
    }

    const className = `color-${color.hex().substring(1)}`;
    const adjustedColor = adjustColorLightness(color, lightThemeColorMaxLightness!,
                                               darkThemeColorMinLightness!);

    if (!registeredClasses.has(className)) {
        $("head").append(`<style>
            .${className}, span.fancytree-active.${className} {
                --light-theme-custom-color: ${adjustedColor.lightThemeColor};
                --dark-theme-custom-color: ${adjustedColor.darkThemeColor}
            }
        </style>`);

        registeredClasses.add(className);
    }

    return className;
}

function parseColor(color: string) {
    try {
        // Parse the given color in the CIELAB color space
        return Color(color);
    } catch (ex) {
        console.error(ex);
    }
}

/** 
 * Returns a pair of colors — one optimized for light themes and the other for dark themes, derived
 * from the specified color to maintain sufficient contrast with each theme.
 * The adjustment is performed by limiting the color’s lightness in the CIELAB color space,
 * according to the lightThemeMaxLightness and darkThemeMinLightness parameters.
 */
function adjustColorLightness(color: ColorInstance, lightThemeMaxLightness: number, darkThemeMinLightness: number) {
    let labColor = color.lab();

    const lightness = labColor.l();

    // For the light theme, limit the maximum lightness
    const lightThemeColor = labColor.l(Math.min(lightness, lightThemeMaxLightness)).hex();
    
    // For the dark theme, limit the minimum lightness
    const darkThemeColor = labColor.l(Math.max(lightness, darkThemeMinLightness)).hex();

    return {lightThemeColor, darkThemeColor};
}

export default {
    createClassForColor
};