From 816493e01ffe613ba4eca1d56a71a8cbf1099bf6 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 11 Oct 2021 00:36:47 +0900
Subject: [PATCH] :art:

---
 src/client/components/global/header.vue     | 15 ++++++++++++---
 src/client/events.ts                        |  4 ++++
 src/client/pages/settings/import-export.vue |  2 +-
 src/client/scripts/theme.ts                 |  4 ++++
 4 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 src/client/events.ts

diff --git a/src/client/components/global/header.vue b/src/client/components/global/header.vue
index 32a332cf6..346bf4261 100644
--- a/src/client/components/global/header.vue
+++ b/src/client/components/global/header.vue
@@ -37,13 +37,14 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, PropType, ref } from 'vue';
+import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from 'vue';
 import * as tinycolor from 'tinycolor2';
 import { popupMenu } from '@client/os';
 import { url } from '@client/config';
 import { scrollToTop } from '@client/scripts/scroll';
 import MkButton from '@client/components/ui/button.vue';
-import { i18n } from '../../i18n';
+import { i18n } from '@client/i18n';
+import { globalEvents } from '@client/events';
 
 export default defineComponent({
 	components: {
@@ -136,11 +137,19 @@ export default defineComponent({
 			scrollToTop(el.value, { behavior: 'smooth' });
 		};
 
-		onMounted(() => {
+		const calcBg = () => {
 			const rawBg = props.info?.bg || 'var(--bg)';
 			const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
 			tinyBg.setAlpha(0.85);
 			bg.value = tinyBg.toRgbString();
+		};
+
+		onMounted(() => {
+			calcBg();
+			globalEvents.on('themeChanged', calcBg);
+			onUnmounted(() => {
+				globalEvents.off('themeChanged', calcBg);
+			});
 		
 			if (el.value.parentElement) {
 				narrow.value = el.value.parentElement.offsetWidth < 500;
diff --git a/src/client/events.ts b/src/client/events.ts
new file mode 100644
index 000000000..dbbd908b8
--- /dev/null
+++ b/src/client/events.ts
@@ -0,0 +1,4 @@
+import { EventEmitter } from 'eventemitter3';
+
+// TODO: 型付け
+export const globalEvents = new EventEmitter();
diff --git a/src/client/pages/settings/import-export.vue b/src/client/pages/settings/import-export.vue
index 64def6fdf..2b49996dd 100644
--- a/src/client/pages/settings/import-export.vue
+++ b/src/client/pages/settings/import-export.vue
@@ -1,5 +1,5 @@
 <template>
-<div>
+<div style="margin: 16px;">
 	<FormSection>
 		<template #label>{{ $ts._exportOrImport.allNotes }}</template>
 		<MkButton :class="$style.button" inline @click="doExport('notes')"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>
diff --git a/src/client/scripts/theme.ts b/src/client/scripts/theme.ts
index 3fb5666a7..10842b894 100644
--- a/src/client/scripts/theme.ts
+++ b/src/client/scripts/theme.ts
@@ -1,3 +1,4 @@
+import { globalEvents } from '@client/events';
 import * as tinycolor from 'tinycolor2';
 
 export type Theme = {
@@ -62,6 +63,9 @@ export function applyTheme(theme: Theme, persist = true) {
 	if (persist) {
 		localStorage.setItem('theme', JSON.stringify(props));
 	}
+
+	// 色計算など再度行えるようにクライアント全体に通知
+	globalEvents.emit('themeChanged');
 }
 
 function compile(theme: Theme): Record<string, string> {