Demonstrate basic runtime theming support by inserting global styles

(This is just a demonstration. Needs to be refactored and expanded into a full theming system.)

assets/data.json

@@ -4,7 +4,7 @@
   "bio": "Cyborg Rights Activist",
   "profileImage": "/profile-image.jpg",
   "backgroundImage": false,
-  "backgroundColour": "#73D8FF",
+  "backgroundColour": "#0062B1",
   "privateKey": "encrypted private key",
   "publicKey": "public key",
   "debug": false

components/settings.vue

@@ -99,7 +99,22 @@
       },
       backgroundColour: {
         get () { return this.$store.state.backgroundColour },
-        set (value) { this.$store.commit('backgroundColour', value) }
+        set (value) { this.$store.commit('backgroundColour', value)
+
+            // Very basic example of theming based on background colour.
+            // TODO: Refactor into a more robust, global solution.
+            // (See default.vue layout for redundancy)
+            let style = document.createElement('style')
+            document.head.appendChild(style)
+            let sheet = style.sheet
+
+            console.log('Background colour: ' + value.hex)
+
+             sheet.insertRule(`.tabs li.is-active a { color: ${value.hex}; border-bottom-color: ${value.hex}; }`)
+             sheet.insertRule(`.button.is-primary { background-color: ${value.hex}; }`)
+             sheet.insertRule(`.button.is-primary:hover { background-color: ${value.hex}; }`)
+
+        }
       },
       configured: {
         get () { return this.$store.state.configured },

layouts/default.vue

@@ -2,6 +2,28 @@
     <nuxt/>
 </template>
 
+<script>
+export default {
+  computed: {
+    backgroundColour () { this.$store.state.backgroundColour }
+  },
+  mounted () {
+    // Very basic example of theming based on background colour.
+    // TODO: Refactor into a more robust, global solution.
+    // (See settings.vue for redundancy)
+    let style = document.createElement('style')
+    document.head.appendChild(style)
+    let sheet = style.sheet
+
+    let themeColour = this.$store.state.backgroundColour
+
+    sheet.insertRule(`.tabs li.is-active a {color: ${themeColour}; border-bottom-color: ${themeColour}}`)
+    sheet.insertRule(`.button.is-primary { background-color: ${themeColour}; }`)
+    sheet.insertRule(`.button.is-primary:hover { background-color: ${themeColour}; }`)
+  }
+}
+</script>
+
 <style>
 body
 {