[Bug] 剧情站主题切换问题

[notnotype]

问题描述

问题位置

https://blue-archive.io/

复现流程

暗色模式进入网页，切换成亮色模式，刷新后网页变成暗色主题但是按钮显示的是亮色模式

[mark9804]

我复现不出来

[notnotype]

这一段逻辑错误

https://github.com/ba-archive/blue-archive/blob/0856c14b25da1388e1f646bfb24cb5672aaa1d98/apps/blue-archive-story-viewer/src/App.vue#L65-L70

当 settingStore.getTheme === "light"，系统主题为 dark 时，这个时候需要展示 light 主题，但是条件表达式结果为 false

[notnotype]

改成

  const initTheme =
    (window.matchMedia &&
      window.matchMedia("(prefers-color-scheme: dark)").matches) &&
    "dark" === settingsStore.getTheme
      ? "dark"
      : "light";

可以修复，但是行为是：网页进入应用系统主题，然后再使用 switchTheme 修改主题，会出现主题快速变化的问题

[mark9804]

当 settingStore.getTheme === "light"，系统主题为 dark 时，这个时候需要展示 light 主题，但是条件表达式结果为 false

这一段是我故意的，就是要系统暗色模式优先于用户设置

想想你早上访问了网站，然后把页面调成了亮色。然后晚上12点（因为到了晚上，手机自动进入暗色模式）突发奇想又想访问一遍，如果没做这个 override 的话直接原神启动了

[mark9804]

唯一的问题是switch不太听使唤

[notnotype]

你这 switch 不跟 store 变

[notnotype]

store 是 light，但是你 switch 是 dark

[mark9804]

印象里我做了，刚刚测也没问题，应该是少了一个 watch

[mark9804]

复现了，我来弄