magnetar/fe_calckey/frontend/client/src/directives/panel.ts

import { Directive } from "vue";

export default {
    mounted(src, binding, vn) {
        const getBgColor = (el: HTMLElement) => {
            const style = window.getComputedStyle(el);
            if (
                style.backgroundColor &&
                !["rgba(0, 0, 0, 0)", "rgba(0,0,0,0)", "transparent"].includes(
                    style.backgroundColor
                )
            ) {
                return style.backgroundColor;
            } else {
                return el.parentElement
                    ? getBgColor(el.parentElement)
                    : "transparent";
            }
        };

        const parentBg = getBgColor(src.parentElement);

        const myBg = getComputedStyle(
            document.documentElement
        ).getPropertyValue("--panel");

        if (parentBg === myBg) {
            src.style.backgroundColor = "var(--bg)";
        } else {
            src.style.backgroundColor = "var(--panel)";
        }
    },
} as Directive;