pin voila in ci

Author: mariobuikhuizen

js/src/VuetifyView.js

@@ -106,6 +106,24 @@ export class VuetifyView extends VueView {
     };
     onColorsDark();
 
+    const stopSyncColorsLight = Vue.watch(
+      () => {
+        const light = this.theme.themes.value.light;
+        return light && light.colors;
+      },
+      (colors) => syncColorsToModel(colors, this.themeLightModel),
+      { deep: true }
+    );
+
+    const stopSyncColorsDark = Vue.watch(
+      () => {
+        const dark = this.theme.themes.value.dark;
+        return dark && dark.colors;
+      },
+      (colors) => syncColorsToModel(colors, this.themeDarkModel),
+      { deep: true }
+    );
+
     if (this.themeModel.get("dark") !== null) {
       onDark();
     } else if (document.body.dataset.jpThemeLight) {
@@ -132,6 +150,8 @@ export class VuetifyView extends VueView {
       this.themeModel.off("change:dark", onDark);
       this.themeLightModel.off("change", onColorsLight);
       this.themeDarkModel.off("change", onColorsDark);
+      stopSyncColorsLight();
+      stopSyncColorsDark();
     });
   }
 }
@@ -159,3 +179,32 @@ function getColors(colorModel) {
     (v, k) => k.replace(/_/g, "-")
   );
 }
+
+function syncColorsToModel(colors, colorModel) {
+  if (!colors || !colorModel) {
+    return;
+  }
+
+  let hasChanges = false;
+
+  Object.entries(colors).forEach(([key, value]) => {
+    const modelKey = key.replace(/-/g, "_");
+    if (
+      modelKey.startsWith("_") ||
+      modelKey === "accent" ||
+      modelKey === "anchor" ||
+      !(modelKey in colorModel.attributes) ||
+      typeof value !== "string" ||
+      colorModel.get(modelKey) === value
+    ) {
+      return;
+    }
+
+    colorModel.set(modelKey, value);
+    hasChanges = true;
+  });
+
+  if (hasChanges) {
+    colorModel.save_changes();
+  }
+}