Merge remote-tracking branch 'origin/main' into refactor/ui

layouts/default.vue

@@ -66,15 +66,12 @@
 <script>
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
-
-import {
-  setupLocalPersistence,
-  getLocalConfig,
-} from "~/newstore/localpersistence"
+import { setupLocalPersistence } from "~/newstore/localpersistence"
 import { performMigrations } from "~/helpers/migrations"
 import { initUserInfo } from "~/helpers/teams/BackendUserInfo"
 import { registerApolloAuthUpdate } from "~/helpers/apollo"
 import { initializeFirebase } from "~/helpers/fb"
+import { getSettingSubject } from "~/newstore/settings"
 
 export default {
   components: { Splitpanes, Pane },
@@ -93,8 +90,13 @@ export default {
   beforeMount() {
     registerApolloAuthUpdate()
 
-    const color = getLocalConfig("THEME_COLOR") || "green"
-    document.documentElement.setAttribute("data-accent", color)
+    this.$subscribeTo(getSettingSubject("THEME_COLOR"), (color) => {
+      document.documentElement.setAttribute("data-accent", color)
+    })
+
+    this.$subscribeTo(getSettingSubject("BG_COLOR"), (color) => {
+      this.$colorMode.preference = color
+    })
   },
   async mounted() {
     performMigrations()
@@ -112,13 +114,13 @@ export default {
     if (workbox) {
       workbox.addEventListener("installed", (event) => {
         if (event.isUpdate) {
-          this.$toast.show(this.$t("new_version_found"), {
+          this.$toast.show(this.$t("new_version_found").toString(), {
             icon: "info",
             duration: 0,
             theme: "toasted-primary",
             action: [
               {
-                text: this.$t("reload"),
+                text: this.$t("reload").toString(),
                 onClick: (_, toastObject) => {
                   toastObject.goAway(0)
                   window.location.reload()