rudeshark.net/packages/client/src/directives/panel.ts

32 lines
749 B
TypeScript
Raw Normal View History

2023-01-13 05:40:33 +01:00
import { Directive } from "vue";
2021-11-28 12:07:37 +01:00
export default {
mounted(src, binding, vn) {
const getBgColor = (el: HTMLElement) => {
const style = window.getComputedStyle(el);
2023-01-13 05:40:33 +01:00
if (
style.backgroundColor &&
!["rgba(0, 0, 0, 0)", "rgba(0,0,0,0)", "transparent"].includes(
style.backgroundColor,
)
) {
2021-11-28 12:07:37 +01:00
return style.backgroundColor;
} else {
2023-01-13 05:40:33 +01:00
return el.parentElement ? getBgColor(el.parentElement) : "transparent";
2021-11-28 12:07:37 +01:00
}
};
2023-01-13 05:40:33 +01:00
2021-11-28 12:07:37 +01:00
const parentBg = getBgColor(src.parentElement);
2023-01-13 05:40:33 +01:00
const myBg = getComputedStyle(document.documentElement).getPropertyValue(
"--panel",
);
2021-11-28 12:07:37 +01:00
if (parentBg === myBg) {
2023-01-13 05:40:33 +01:00
src.style.backgroundColor = "var(--bg)";
2021-11-28 12:07:37 +01:00
} else {
2023-01-13 05:40:33 +01:00
src.style.backgroundColor = "var(--panel)";
2021-11-28 12:07:37 +01:00
}
},
} as Directive;