From 1c683c3fccac04f15d72ce7e5cd159362d472aaa Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 31 Mar 2025 20:36:49 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E3=82=A4=E3=83=B3=E3=82=B9?=
=?UTF-8?q?=E3=83=88=E3=83=BC=E3=83=AB=E3=81=97=E3=81=9F=E3=83=86=E3=83=BC?=
=?UTF-8?q?=E3=83=9E=E3=81=8C=E3=83=86=E3=83=BC=E3=83=9E=E4=B8=80=E8=A6=A7?=
=?UTF-8?q?=E3=81=AB=E3=81=99=E3=81=90=E5=8F=8D=E6=98=A0=E3=81=95=E3=82=8C?=
=?UTF-8?q?=E3=81=AA=E3=81=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/pages/settings/theme.manage.vue | 5 ++-
.../frontend/src/pages/settings/theme.vue | 9 ++---
packages/frontend/src/pages/theme-editor.vue | 3 +-
packages/frontend/src/theme-store.ts | 33 -------------------
packages/frontend/src/theme.ts | 33 ++++++++++++++++---
5 files changed, 34 insertions(+), 49 deletions(-)
delete mode 100644 packages/frontend/src/theme-store.ts
diff --git a/packages/frontend/src/pages/settings/theme.manage.vue b/packages/frontend/src/pages/settings/theme.manage.vue
index c68c04bb44..5fd550da4a 100644
--- a/packages/frontend/src/pages/settings/theme.manage.vue
+++ b/packages/frontend/src/pages/settings/theme.manage.vue
@@ -38,14 +38,13 @@ import MkTextarea from '@/components/MkTextarea.vue';
import MkSelect from '@/components/MkSelect.vue';
import MkInput from '@/components/MkInput.vue';
import MkButton from '@/components/MkButton.vue';
-import { getBuiltinThemesRef } from '@/theme.js';
+import { getBuiltinThemesRef, getThemesRef } from '@/theme.js';
import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
import * as os from '@/os.js';
-import { getThemes, removeTheme } from '@/theme-store.js';
import { i18n } from '@/i18n.js';
import { definePage } from '@/page.js';
-const installedThemes = ref(getThemes());
+const installedThemes = getThemesRef();
const builtinThemes = getBuiltinThemesRef();
const selectedThemeId = ref<string | null>(null);
diff --git a/packages/frontend/src/pages/settings/theme.vue b/packages/frontend/src/pages/settings/theme.vue
index 0e4f791f2c..9a8aeb00d6 100644
--- a/packages/frontend/src/pages/settings/theme.vue
+++ b/packages/frontend/src/pages/settings/theme.vue
@@ -210,20 +210,19 @@ import FormLink from '@/components/form/link.vue';
import MkButton from '@/components/MkButton.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkThemePreview from '@/components/MkThemePreview.vue';
-import { getBuiltinThemesRef } from '@/theme.js';
+import { getBuiltinThemesRef, getThemesRef } from '@/theme.js';
import { selectFile } from '@/utility/select-file.js';
import { isDeviceDarkmode } from '@/utility/is-device-darkmode.js';
import { store } from '@/store.js';
import { i18n } from '@/i18n.js';
import { instance } from '@/instance.js';
import { uniqueBy } from '@/utility/array.js';
-import { getThemes } from '@/theme-store.js';
import { definePage } from '@/page.js';
import { miLocalStorage } from '@/local-storage.js';
import { reloadAsk } from '@/utility/reload-ask.js';
import { prefer } from '@/preferences.js';
-const installedThemes = ref(getThemes());
+const installedThemes = getThemesRef();
const builtinThemes = getBuiltinThemesRef();
const instanceDarkTheme = computed<Theme | null>(() => instance.defaultDarkTheme ? JSON5.parse(instance.defaultDarkTheme) : null);
@@ -281,10 +280,6 @@ watch(wallpaper, async () => {
await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
});
-onActivated(() => {
- installedThemes.value = getThemes();
-});
-
function setWallpaper(event) {
selectFile(event.currentTarget ?? event.target, null).then(file => {
wallpaper.value = file.url;
diff --git a/packages/frontend/src/pages/theme-editor.vue b/packages/frontend/src/pages/theme-editor.vue
index d088fe2f56..b16edffc29 100644
--- a/packages/frontend/src/pages/theme-editor.vue
+++ b/packages/frontend/src/pages/theme-editor.vue
@@ -86,10 +86,9 @@ import MkCodeEditor from '@/components/MkCodeEditor.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import MkFolder from '@/components/MkFolder.vue';
import { $i } from '@/i.js';
-import { applyTheme } from '@/theme.js';
+import { addTheme, applyTheme } from '@/theme.js';
import * as os from '@/os.js';
import { store } from '@/store.js';
-import { addTheme } from '@/theme-store.js';
import { i18n } from '@/i18n.js';
import { useLeaveGuard } from '@/use/use-leave-guard.js';
import { definePage } from '@/page.js';
diff --git a/packages/frontend/src/theme-store.ts b/packages/frontend/src/theme-store.ts
deleted file mode 100644
index 2ae5d8730e..0000000000
--- a/packages/frontend/src/theme-store.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import type { Theme } from '@/theme.js';
-import { getBuiltinThemes } from '@/theme.js';
-import { $i } from '@/i.js';
-import { prefer } from '@/preferences.js';
-
-export function getThemes(): Theme[] {
- if ($i == null) return [];
- return prefer.s.themes;
-}
-
-export async function addTheme(theme: Theme): Promise<void> {
- if ($i == null) return;
- const builtinThemes = await getBuiltinThemes();
- if (builtinThemes.some(t => t.id === theme.id)) {
- throw new Error('builtin theme');
- }
- const themes = getThemes();
- if (themes.some(t => t.id === theme.id)) {
- throw new Error('already exists');
- }
- prefer.commit('themes', [...themes, theme]);
-}
-
-export async function removeTheme(theme: Theme): Promise<void> {
- if ($i == null) return;
- const themes = getThemes().filter(t => t.id !== theme.id);
- prefer.commit('themes', themes);
-}
diff --git a/packages/frontend/src/theme.ts b/packages/frontend/src/theme.ts
index cd44fff0c4..268f879d17 100644
--- a/packages/frontend/src/theme.ts
+++ b/packages/frontend/src/theme.ts
@@ -8,11 +8,13 @@ import tinycolor from 'tinycolor2';
import lightTheme from '@@/themes/_light.json5';
import darkTheme from '@@/themes/_dark.json5';
import JSON5 from 'json5';
+import type { Ref } from 'vue';
import type { BundledTheme } from 'shiki/themes';
import { deepClone } from '@/utility/clone.js';
import { globalEvents } from '@/events.js';
import { miLocalStorage } from '@/local-storage.js';
-import { addTheme, getThemes } from '@/theme-store.js';
+import { $i } from '@/i.js';
+import { prefer } from '@/preferences.js';
export type Theme = {
id: string;
@@ -57,11 +59,34 @@ export const getBuiltinThemes = () => Promise.all(
].map(name => import(`@@/themes/${name}.json5`).then(({ default: _default }): Theme => _default)),
);
-export const getBuiltinThemesRef = () => {
+export function getBuiltinThemesRef() {
const builtinThemes = ref<Theme[]>([]);
getBuiltinThemes().then(themes => builtinThemes.value = themes);
return builtinThemes;
-};
+}
+
+export function getThemesRef(): Ref<Theme[]> {
+ return prefer.r.themes;
+}
+
+export async function addTheme(theme: Theme): Promise<void> {
+ if ($i == null) return;
+ const builtinThemes = await getBuiltinThemes();
+ if (builtinThemes.some(t => t.id === theme.id)) {
+ throw new Error('builtin theme');
+ }
+ const themes = prefer.s.themes;
+ if (themes.some(t => t.id === theme.id)) {
+ throw new Error('already exists');
+ }
+ prefer.commit('themes', [...themes, theme]);
+}
+
+export async function removeTheme(theme: Theme): Promise<void> {
+ if ($i == null) return;
+ const themes = prefer.s.themes.filter(t => t.id !== theme.id);
+ prefer.commit('themes', themes);
+}
let timeout: number | null = null;
@@ -173,7 +198,7 @@ export function parseThemeCode(code: string): Theme {
if (!validateTheme(theme)) {
throw new Error('This theme is invaild');
}
- if (getThemes().some(t => t.id === theme.id)) {
+ if (prefer.s.themes.some(t => t.id === theme.id)) {
throw new Error('This theme is already installed');
}