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(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(() => 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 { - 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 { - 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([]); getBuiltinThemes().then(themes => builtinThemes.value = themes); return builtinThemes; -}; +} + +export function getThemesRef(): Ref { + return prefer.r.themes; +} + +export async function addTheme(theme: Theme): Promise { + 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 { + 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'); }