🎨

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;

src/client/events.ts

@@ -0,0 +1,4 @@
+import { EventEmitter } from 'eventemitter3';
+
+// TODO: 型付け
+export const globalEvents = new EventEmitter();

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>

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> {