stash

src/components/App.vue

@@ -32,6 +32,7 @@ import AllDialog from "@/components/Dialog/AllDialog.vue";
 import MenuBar from "@/components/Menu/MenuBar/MenuBar.vue";
 import { useMenuBarData as useTalkMenuBarData } from "@/components/Talk/menuBarData";
 import { useMenuBarData as useSingMenuBarData } from "@/components/Sing/menuBarData";
+import { themeToCss } from "@/domain/theme";
 
 const store = useStore();
 
@@ -79,6 +80,33 @@ watch(
   },
 );
 
+// テーマの変更を監視してCSS変数を変更する
+watch(
+  () =>
+    [
+      store.state.currentTheme,
+      store.state.availableThemes,
+      store.state.isVuexReady,
+    ] as const,
+  ([currentTheme, availableThemes, isVuexReady]) => {
+    const theme = availableThemes.find((value) => {
+      return value.name == currentTheme;
+    });
+
+    if (theme == undefined) {
+      // NOTE: Vuexが初期化されていない場合はまだテーマが読み込まれていないので無視
+      if (isVuexReady) {
+        throw Error(`Theme not found: ${currentTheme}`);
+      } else {
+        return;
+      }
+    }
+
+    themeToCss(theme);
+  },
+  { immediate: true },
+);
+
 // ソフトウェアを初期化
 const { hotkeyManager } = useHotkeyManager();
 const isEnginesReady = ref(false);

src/components/Talk/TalkEditor.stories.ts

@@ -12,12 +12,20 @@ import {
   mockHost,
 } from "@/storybook/engineMock";
 import { proxyStoreCreator } from "@/store/proxy";
-import { CharacterInfo, EngineId, SpeakerId, StyleId } from "@/type/preload";
+import {
+  CharacterInfo,
+  EngineId,
+  SpeakerId,
+  StyleId,
+  ThemeConf,
+} from "@/type/preload";
 import { getEngineManifestMock } from "@/storybook/engineMock/manifestMock";
 import {
   getSpeakerInfoMock,
   getSpeakersMock,
 } from "@/storybook/engineMock/speakerResourceMock";
+import { themeToCss } from "@/domain/theme";
+import defaultTheme from "@/../public/themes/default.json";
 
 const meta: Meta<typeof TalkEditor> = {
   component: TalkEditor,
@@ -33,7 +41,10 @@ const meta: Meta<typeof TalkEditor> = {
       const store = createStoreWrapper({
         proxyStoreDI: proxyStoreCreator(createOpenAPIEngineMock()),
       });
-      store.dispatch("HYDRATE_SETTING_STORE"); // FIXME: 色設定取得のため。設定も読み込んでしまうため不要にしたい。
+
+      themeToCss(defaultTheme as ThemeConf);
+
+      document.body.setAttribute("data-editor-font", "default"); // TODO: 共通化する
 
       // context.parameters.store = store;
 

src/domain/theme.ts

@@ -0,0 +1,37 @@
+import { colors, Dark, setCssVar } from "quasar";
+import { ThemeColorType, ThemeConf } from "@/type/preload";
+
+/** テーマの設定をCSSへ反映する */
+export function themeToCss(theme: ThemeConf) {
+  for (const key in theme.colors) {
+    const color = theme.colors[key as ThemeColorType];
+    const { r, g, b } = colors.hexToRgb(color);
+    document.documentElement.style.setProperty(`--color-${key}`, color);
+    document.documentElement.style.setProperty(
+      `--color-${key}-rgb`,
+      `${r}, ${g}, ${b}`,
+    );
+  }
+  const mixColors: ThemeColorType[][] = [
+    ["primary", "background"],
+    ["warning", "background"],
+  ];
+  for (const [color1, color2] of mixColors) {
+    const color1Rgb = colors.hexToRgb(theme.colors[color1]);
+    const color2Rgb = colors.hexToRgb(theme.colors[color2]);
+    const r = Math.trunc((color1Rgb.r + color2Rgb.r) / 2);
+    const g = Math.trunc((color1Rgb.g + color2Rgb.g) / 2);
+    const b = Math.trunc((color1Rgb.b + color2Rgb.b) / 2);
+    const propertyName = `--color-mix-${color1}-${color2}-rgb`;
+    const cssColor = `${r}, ${g}, ${b}`;
+    document.documentElement.style.setProperty(propertyName, cssColor);
+  }
+  Dark.set(theme.isDark);
+  setCssVar("primary", theme.colors["primary"]);
+  setCssVar("warning", theme.colors["warning"]);
+
+  document.documentElement.setAttribute(
+    "is-dark-theme",
+    theme.isDark ? "true" : "false",
+  );
+}

src/store/setting.ts

@@ -219,6 +219,8 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
       state.currentTheme = currentTheme;
     },
     action({ state, commit }, { currentTheme }: { currentTheme: string }) {
+      // メモ：テーマ周りリファクタリングしたのでモック挿せるはず。
+      // うまくいけば、テーマ周りのリファクタリングだけでプルリク出す。
       window.backend.setSetting("currentTheme", currentTheme);
       const theme = state.availableThemes.find((value) => {
         return value.name == currentTheme;
@@ -228,38 +230,6 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
         throw Error("Theme not found");
       }
 
-      for (const key in theme.colors) {
-        const color = theme.colors[key as ThemeColorType];
-        const { r, g, b } = colors.hexToRgb(color);
-        document.documentElement.style.setProperty(`--color-${key}`, color);
-        document.documentElement.style.setProperty(
-          `--color-${key}-rgb`,
-          `${r}, ${g}, ${b}`,
-        );
-      }
-      const mixColors: ThemeColorType[][] = [
-        ["primary", "background"],
-        ["warning", "background"],
-      ];
-      for (const [color1, color2] of mixColors) {
-        const color1Rgb = colors.hexToRgb(theme.colors[color1]);
-        const color2Rgb = colors.hexToRgb(theme.colors[color2]);
-        const r = Math.trunc((color1Rgb.r + color2Rgb.r) / 2);
-        const g = Math.trunc((color1Rgb.g + color2Rgb.g) / 2);
-        const b = Math.trunc((color1Rgb.b + color2Rgb.b) / 2);
-        const propertyName = `--color-mix-${color1}-${color2}-rgb`;
-        const cssColor = `${r}, ${g}, ${b}`;
-        document.documentElement.style.setProperty(propertyName, cssColor);
-      }
-      Dark.set(theme.isDark);
-      setCssVar("primary", theme.colors["primary"]);
-      setCssVar("warning", theme.colors["warning"]);
-
-      document.documentElement.setAttribute(
-        "is-dark-theme",
-        theme.isDark ? "true" : "false",
-      );
-
       window.backend.setNativeTheme(theme.isDark ? "dark" : "light");
 
       commit("SET_CURRENT_THEME_SETTING", {