summaryrefslogtreecommitdiff
path: root/packages/frontend/src/directives/adaptive-border.ts
blob: 8072a1ffd95cd6aaba09a85ef16f07e0d9be5c92 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/*
 * SPDX-FileCopyrightText: syuilo and misskey-project
 * SPDX-License-Identifier: AGPL-3.0-only
 */

import type { Directive } from 'vue';
import { getBgColor } from '@/utility/get-bg-color.js';
import { globalEvents } from '@/events.js';

const handlerMap = new WeakMap<any, any>();

export default {
	mounted(src, binding, vn) {
		function calc() {
			const parentBg = getBgColor(src.parentElement) ?? 'transparent';

			const myBg = window.getComputedStyle(src).backgroundColor;

			if (parentBg === myBg) {
				src.style.borderColor = 'var(--MI_THEME-divider)';
			} else {
				src.style.borderColor = myBg;
			}
		}

		handlerMap.set(src, calc);

		calc();

		globalEvents.on('themeChanged', calc);
	},

	unmounted(src, binding, vn) {
		globalEvents.off('themeChanged', handlerMap.get(src));
	},
} as Directive;