DUMP

src/App.vue

@@ -29,7 +29,10 @@
         />
       </q-page-container>
 
-      <Footer :standalone="config.standalone" />
+      <Footer
+        :standalone="config.standalone"
+        :projectcolors="config.colors"
+        />
     </q-layout>
   </div>
 </template>
@@ -38,6 +41,7 @@
 import Footer from '@/components/footer.vue';
 import Header from '@/components/header.vue';
 import PanelsMixin from '@/config/panels.js';
+import { colors } from 'quasar';
 
 export default {
   name: 'Viewer',
@@ -301,6 +305,11 @@ export default {
     this.getConfig();
     this.init();
 
+    // TODO: check if colors are defined in index.template.html, if not, use colors from quasar.conf.js
+    colors.setBrand('primary', this.config.colors.primary);
+    colors.setBrand('secondary', this.config.colors.secondary);
+    colors.setBrand('accent', this.config.colors.accent);
+
     this.$q.dark.set('auto');
 
     this.itemurls.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));

src/components/color.vue

 <template>
   <div class="col-xs-auto colors">
+    <!-- // FIXME: remove this code, when feature is done -->
+    <!-- <div>|{{ projectcolors }}|</div> -->
     <q-btn
       flat
       title="Change color"
@@ -34,6 +36,14 @@
           </q-item>
           -->
 
+          <q-item
+            clickable
+            @click="() => changeColorsTo('subugoe')"
+            v-close-popup
+            >
+            <q-item-section>SUBUGOE</q-item-section>
+          </q-item>
+
           <q-item
             clickable
             @click="() => changeColorsTo('unicorn')"
@@ -55,8 +65,24 @@ import { colors } from 'quasar';
 export default {
   name: 'color',
   created() {
+    // this.getConfig();
+    // this.projectcolors = projectcolors;
     this.fasPalette = fasPalette;
   },
+  // data() {
+  //   return {
+  //     config: {},
+  //   };
+  // },
+  props: {
+    projectcolors: Object,
+  },
+  computed: {
+    asdf() {
+      // console.log(this.$colors);
+      return this.$colors.primary;
+    },
+  },
   methods: {
     changeColorsTo(color) {
       // FIXME: remove this code, when feature is done
@@ -65,15 +91,23 @@ export default {
         // FIXME: remove this code, when feature is done
         // this.$q.dark.set(false);
         if (this.$q.dark.isActive === false) {
-          colors.setBrand('primary', this.$q.config.brand.primary);
-          colors.setBrand('secondary', this.$q.config.brand.secondary);
-          colors.setBrand('accent', this.$q.config.brand.accent);
+          colors.setBrand('primary', this.projectcolors.primary);
+          colors.setBrand('secondary', this.projectcolors.secondary);
+          colors.setBrand('accent', this.projectcolors.accent);
+          // colors.setBrand('primary', this.$q.config.brand.primary);
+          // colors.setBrand('secondary', this.$q.config.brand.secondary);
+          // colors.setBrand('accent', this.$q.config.brand.accent);
         }
       }
       // FIXME: remove this code, when feature is done
       // if (color === 'dark') {
       //   this.$q.dark.set(true);
       // }
+      if (color === 'subugoe') {
+        colors.setBrand('primary', this.$q.config.brand.primary);
+        colors.setBrand('secondary', this.$q.config.brand.secondary);
+        colors.setBrand('accent', this.$q.config.brand.accent);
+      }
       if (color === 'unicorn') {
         if (this.$q.dark.isActive === false) {
           // FIXME: remove this code, when feature is done

src/components/footer.vue

@@ -6,7 +6,7 @@
     :class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'"
     >
     <Language v-if="standalone" />
-    <Color />
+    <Color :projectcolors="projectcolors" />
     <Softwareinfo />
   </q-footer>
 </template>
@@ -25,6 +25,7 @@ export default {
   },
   props: {
     standalone: Boolean,
+    projectcolors: Object,
   },
 };
 </script>

src/index.template.html

@@ -34,7 +34,12 @@
         "item": "Sheet",
         "manifest": "Manuscript"
       },
-      "standalone": true
+      "standalone": true,
+      "colors": {
+        "primary": "black",
+        "secondary": "papayawhip",
+        "accent": "darkred"
+      }
     }
     </script>