テーマ周りをリファクタリング

src/backend/browser/sandbox.ts

@@ -284,32 +284,15 @@ export const api: Sandbox = {
     // TODO: Impl
     return;
   },
-  async theme(newData?: string) {
-    if (newData != undefined) {
-      await this.setSetting("currentTheme", newData);
-      return;
-    }
+  async getAvailableThemes() {
     // NOTE: Electron版では起動時にテーマ情報が必要なので、
     //       この実装とは違って起動時に読み込んだキャッシュを返すだけになっている。
     return Promise.all(
       // FIXME: themeファイルのいい感じのパスの設定
       ["/themes/default.json", "/themes/dark.json"].map((url) =>
-        fetch(url).then((res) => res.json()),
+        fetch(url).then((res) => res.json() as Promise<ThemeConf>),
       ),
-    )
-      .then((v) => ({
-        currentTheme: "Default",
-        availableThemes: v,
-      }))
-      .then((v) =>
-        this.getSetting("currentTheme").then(
-          (currentTheme) =>
-            ({
-              ...v,
-              currentTheme,
-            }) as { currentTheme: string; availableThemes: ThemeConf[] },
-        ),
-      );
+    );
   },
   vuexReady() {
     // NOTE: 何もしなくて良さそう

src/backend/electron/main.ts

@@ -922,15 +922,8 @@ ipcMainHandle("HOTKEY_SETTINGS", (_, { newData }) => {
   return configManager.get("hotkeySettings");
 });
 
-ipcMainHandle("THEME", (_, { newData }) => {
-  if (newData != undefined) {
-    configManager.set("currentTheme", newData);
-    return;
-  }
-  return {
-    currentTheme: configManager.get("currentTheme"),
-    availableThemes: themes,
-  };
+ipcMainHandle("GET_AVAILABLE_THEMES", () => {
+  return themes;
 });
 
 ipcMainHandle("ON_VUEX_READY", () => {

src/backend/electron/preload.ts

@@ -226,8 +226,8 @@ const api: Sandbox = {
     ipcRenderer.invoke("SET_NATIVE_THEME", source);
   },
 
-  theme: (newData) => {
-    return ipcRenderer.invoke("THEME", { newData });
+  getAvailableThemes: () => {
+    return ipcRenderer.invoke("GET_AVAILABLE_THEMES");
   },
 
   vuexReady: () => {

src/components/Dialog/SettingDialog/SettingDialog.vue

@@ -609,14 +609,14 @@ const isDefaultConfirmedTips = computed(() => {
 
 // 外観
 const currentThemeNameComputed = computed({
-  get: () => store.state.themeSetting.currentTheme,
+  get: () => store.state.currentTheme,
   set: (currentTheme: string) => {
-    store.dispatch("SET_THEME_SETTING", { currentTheme: currentTheme });
+    store.dispatch("SET_CURRENT_THEME_SETTING", { currentTheme });
   },
 });
 
 const availableThemeNameComputed = computed(() => {
-  return [...store.state.themeSetting.availableThemes]
+  return [...store.state.availableThemes]
     .sort((a, b) => a.order - b.order)
     .map((theme) => {
       return { label: theme.displayName, value: theme.name };

src/store/setting.ts

@@ -7,7 +7,6 @@ import {
   SavingSetting,
   ExperimentalSettingType,
   ThemeColorType,
-  ThemeConf,
   ToolbarSettingType,
   EngineId,
   ConfirmedTips,
@@ -32,10 +31,8 @@ export const settingStoreState: SettingStoreState = {
   engineIds: [],
   engineInfos: {},
   engineManifests: {},
-  themeSetting: {
-    currentTheme: "Default",
-    availableThemes: [],
-  },
+  currentTheme: "Default",
+  availableThemes: [],
   editorFont: "default",
   showTextLineNumber: false,
   showAddAudioItemButton: true,
@@ -78,16 +75,12 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
         });
       });
 
-      const theme = await window.backend.theme();
-      if (theme) {
-        commit("SET_THEME_SETTING", {
-          currentTheme: theme.currentTheme,
-          themes: theme.availableThemes,
-        });
-        dispatch("SET_THEME_SETTING", {
-          currentTheme: theme.currentTheme,
-        });
-      }
+      commit("SET_AVAILABLE_THEMES", {
+        themes: await window.backend.getAvailableThemes(),
+      });
+      dispatch("SET_CURRENT_THEME_SETTING", {
+        currentTheme: await window.backend.getSetting("currentTheme"),
+      });
 
       dispatch("SET_ACCEPT_RETRIEVE_TELEMETRY", {
         acceptRetrieveTelemetry: await window.backend.getSetting(
@@ -221,19 +214,13 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
     },
   },
 
-  SET_THEME_SETTING: {
-    mutation(
-      state,
-      { currentTheme, themes }: { currentTheme: string; themes?: ThemeConf[] },
-    ) {
-      if (themes) {
-        state.themeSetting.availableThemes = themes;
-      }
-      state.themeSetting.currentTheme = currentTheme;
+  SET_CURRENT_THEME_SETTING: {
+    mutation(state, { currentTheme }: { currentTheme: string }) {
+      state.currentTheme = currentTheme;
     },
     action({ state, commit }, { currentTheme }: { currentTheme: string }) {
-      window.backend.theme(currentTheme);
-      const theme = state.themeSetting.availableThemes.find((value) => {
+      window.backend.setSetting("currentTheme", currentTheme);
+      const theme = state.availableThemes.find((value) => {
         return value.name == currentTheme;
       });
 
@@ -275,7 +262,7 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
 
       window.backend.setNativeTheme(theme.isDark ? "dark" : "light");
 
-      commit("SET_THEME_SETTING", {
+      commit("SET_CURRENT_THEME_SETTING", {
         currentTheme: currentTheme,
       });
     },

src/store/type.ts

@@ -29,7 +29,6 @@ import {
   MoraDataType,
   SavingSetting,
   ThemeConf,
-  ThemeSetting,
   ExperimentalSettingType,
   ToolbarSettingType,
   UpdateInfo,
@@ -1527,7 +1526,8 @@ export type SettingStoreState = {
   engineIds: EngineId[];
   engineInfos: Record<EngineId, EngineInfo>;
   engineManifests: Record<EngineId, EngineManifest>;
-  themeSetting: ThemeSetting;
+  currentTheme: string;
+  availableThemes: ThemeConf[];
   acceptTerms: AcceptTermsStatus;
   acceptRetrieveTelemetry: AcceptRetrieveTelemetryStatus;
   experimentalSetting: ExperimentalSettingType;
@@ -1568,8 +1568,8 @@ export type SettingStoreTypes = {
     action(payload: KeyValuePayload<RootMiscSettingType>): void;
   };
 
-  SET_THEME_SETTING: {
-    mutation: { currentTheme: string; themes?: ThemeConf[] };
+  SET_CURRENT_THEME_SETTING: {
+    mutation: { currentTheme: string };
     action(payload: { currentTheme: string }): void;
   };
 
@@ -1783,6 +1783,10 @@ export type UiStoreTypes = {
     action(payload: { activePointScrollMode: ActivePointScrollMode }): void;
   };
 
+  SET_AVAILABLE_THEMES: {
+    mutation: { themes: ThemeConf[] };
+  };
+
   DETECT_UNMAXIMIZED: {
     mutation: undefined;
     action(): void;

src/store/ui.ts

@@ -342,6 +342,12 @@ export const uiStore = createPartialStore<UiStoreTypes>({
     },
   },
 
+  SET_AVAILABLE_THEMES: {
+    mutation(state, { themes }) {
+      state.availableThemes = themes;
+    },
+  },
+
   DETECT_UNMAXIMIZED: {
     mutation(state) {
       state.isMaximized = false;

src/type/ipc.ts

@@ -244,9 +244,9 @@ export type IpcIHData = {
     return: ToolbarSettingType;
   };
 
-  THEME: {
-    args: [obj: { newData?: string }];
-    return: ThemeSetting | void;
+  GET_AVAILABLE_THEMES: {
+    args: [];
+    return: ThemeSetting;
   };
 
   ON_VUEX_READY: {

src/type/preload.ts

@@ -276,7 +276,7 @@ export interface Sandbox {
   getDefaultHotkeySettings(): Promise<HotkeySettingType[]>;
   getDefaultToolbarSetting(): Promise<ToolbarSettingType>;
   setNativeTheme(source: NativeThemeType): void;
-  theme(newData?: string): Promise<ThemeSetting | void>;
+  getAvailableThemes(): Promise<ThemeConf[]>;
   vuexReady(): void;
   getSetting<Key extends keyof ConfigType>(key: Key): Promise<ConfigType[Key]>;
   setSetting<Key extends keyof ConfigType>(
@@ -552,11 +552,6 @@ export type ThemeConf = {
   };
 };
 
-export type ThemeSetting = {
-  currentTheme: string;
-  availableThemes: ThemeConf[];
-};
-
 export const experimentalSettingSchema = z.object({
   enablePreset: z.boolean().default(false),
   shouldApplyDefaultPresetOnVoiceChanged: z.boolean().default(false),