2 files changed, 26 insertions, 0 deletions
diff --git a/packages/client/src/directives/index.ts b/packages/client/src/directives/index.ts
index cd71bc26d3..4b11bb6213 100644
--- a/packages/client/src/directives/index.ts
+++ b/packages/client/src/directives/index.ts
@@ -10,6 +10,7 @@ import appear from './appear';
 import anim from './anim';
 import stickyContainer from './sticky-container';
 import clickAnime from './click-anime';
+import panel from './panel';
 
 export default function(app: App) {
 	app.directive('userPreview', userPreview);
@@ -23,4 +24,5 @@ export default function(app: App) {
 	app.directive('anim', anim);
 	app.directive('click-anime', clickAnime);
 	app.directive('sticky-container', stickyContainer);
+	app.directive('panel', panel);
 }
diff --git a/packages/client/src/directives/panel.ts b/packages/client/src/directives/panel.ts
new file mode 100644
index 0000000000..86ec2a9116
--- /dev/null
+++ b/packages/client/src/directives/panel.ts
@@ -0,0 +1,24 @@
+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 getBgColor(el.parentElement);
+			}
+		}
+	
+		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;