Settings styles; close #228

Former-commit-id: b564ba4e357b2d4b18c7f9407395894eb5e18159 [formerly 84ef220a2b10b8ed501c4499ef03d99acc148546] [formerly 00056633e5c2e947201a2dd1ad3bb937821edf61 [formerly e3212cd07675750e18c55516c51d669118b9f023]]
Former-commit-id: 866b84d788a5f8a9767affdef17806dbac984db6 [formerly a22d95ba5726dd5ea757410249bef37654213a68]
Former-commit-id: 4600591829c0a41c5de9defc3e30fbac28815e25

assets/src/App.vue

@@ -1,11 +1,11 @@
 <template>
-  <router-view></router-view>
+  <router-view @update:css="updateCSS" @clean:css="cleanCSS"></router-view>
 </template>
 
 <script>
 export default {
   name: 'app',
-  mounted: function () {
+  mounted () {
     // Remove loading animation.
     let loading = document.getElementById('loading')
     loading.classList.add('done')
@@ -13,6 +13,36 @@ export default {
     setTimeout(function () {
       loading.parentNode.removeChild(loading)
     }, 200)
+
+    this.updateCSS()
+  },
+  methods: {
+    updateCSS (global = false) {
+      let css = this.$store.state.css
+
+      if (typeof this.$store.state.user.css === 'string' && !global) {
+        css += '\n' + this.$store.state.user.css
+      }
+
+      this.removeCSS()
+
+      let style = document.createElement('style')
+      style.title = 'custom-css'
+      style.type = 'text/css'
+      style.appendChild(document.createTextNode(css))
+      document.head.appendChild(style)
+    },
+    removeCSS () {
+      let style = document.querySelector('style[title="custom-css"]')
+      if (style === undefined || style === null) {
+        return
+      }
+
+      style.parentElement.removeChild(style)
+    },
+    cleanCSS () {
+      this.updateCSS(true)
+    }
   }
 }
 </script>