テーマをレジストリに保存するように

src/client/pages/settings/theme.install.vue

@@ -25,6 +25,7 @@ import FormButton from '@/components/form/button.vue';
 import { applyTheme, validateTheme } from '@/scripts/theme';
 import * as os from '@/os';
 import { ColdDeviceStorage } from '@/store';
+import { addTheme, getThemes } from '@/theme-store';
 
 export default defineComponent({
 	components: {
@@ -74,7 +75,7 @@ export default defineComponent({
 				});
 				return false;
 			}
-			if (ColdDeviceStorage.get('themes').some(t => t.id === theme.id)) {
+			if (getThemes().some(t => t.id === theme.id)) {
 				os.dialog({
 					type: 'info',
 					text: this.$ts._theme.alreadyInstalled
@@ -90,11 +91,10 @@ export default defineComponent({
 			if (theme) applyTheme(theme, false);
 		},
 
-		install(code) {
+		async install(code) {
 			const theme = this.parseThemeCode(code);
 			if (!theme) return;
-			const themes = ColdDeviceStorage.get('themes').concat(theme);
-			ColdDeviceStorage.set('themes', themes);
+			await addTheme(theme);
 			os.dialog({
 				type: 'success',
 				text: this.$t('_theme.installed', { name: theme.name })

src/client/pages/settings/theme.manage.vue

@@ -37,6 +37,7 @@ import { Theme, builtinThemes } from '@/scripts/theme';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
 import * as os from '@/os';
 import { ColdDeviceStorage } from '@/store';
+import { getThemes, removeTheme } from '@/theme-store';
 
 export default defineComponent({
 	components: {
@@ -57,7 +58,7 @@ export default defineComponent({
 				title: this.$ts._theme.manage,
 				icon: faFolderOpen
 			},
-			installedThemes: ColdDeviceStorage.ref('themes'),
+			installedThemes: getThemes(),
 			builtinThemes,
 			selectedThemeId: null,
 			faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye
@@ -91,10 +92,7 @@ export default defineComponent({
 		},
 
 		uninstall() {
-			const theme = this.selectedTheme;
-			const themes = ColdDeviceStorage.get('themes').filter(t => t.id != theme.id);
-			ColdDeviceStorage.set('themes', themes);
-			os.success();
+			removeTheme(this.selectedTheme);
 		},
 	}
 });

src/client/pages/settings/theme.vue

@@ -77,6 +77,7 @@ import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
 import { ColdDeviceStorage } from '@/store';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
+import { fetchThemes, getThemes } from '@/theme-store';
 
 export default defineComponent({
 	components: {
@@ -96,7 +97,7 @@ export default defineComponent({
 			icon: faPalette
 		};
 
-		const installedThemes = ColdDeviceStorage.ref('themes');
+		const installedThemes = ref(getThemes());
 		const themes = computed(() => builtinThemes.concat(installedThemes.value));
 		const darkThemes = computed(() => themes.value.filter(t => t.base == 'dark' || t.kind == 'dark'));
 		const lightThemes = computed(() => themes.value.filter(t => t.base == 'light' || t.kind == 'light'));
@@ -137,6 +138,10 @@ export default defineComponent({
 			emit('info', INFO);
 		});
 
+		fetchThemes().then(() => {
+			installedThemes.value = getThemes();
+		});
+
 		return {
 			INFO,
 			darkThemes,