app: add support for theme-color

I use the "web app" version of yarr on my iPhone and the area around the
notch/island is un-themed.

Using [theme-color][1] we can control that color.

[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/theme-color

Author: asimpson

src/assets/index.html

@@ -8,6 +8,7 @@
     <link rel="icon" href="./static/graphicarts/favicon.svg" type="image/svg+xml">
     <link rel="alternate icon" href="./static/graphicarts/favicon.png" type="image/png">
     <link rel="manifest" href="./manifest.json" />
+    <meta name="theme-color" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <script>
         window.app = window.app || {}

src/assets/javascripts/app.js

@@ -211,6 +211,7 @@ var vm = new Vue({
     api.feeds.list_errors().then(function(errors) {
       vm.feed_errors = errors
     })
+    this.updateMetaTheme(app.settings.theme_name)
   },
   data: function() {
     var s = app.settings
@@ -249,6 +250,11 @@ var vm = new Vue({
         'font': s.theme_font,
         'size': s.theme_size,
       },
+      'themeColors': {
+        'night': '#0e0e0e',
+        'sepia': '#f4f0e5',
+        'light': '#fff',
+      },
       'refreshRate': s.refresh_rate,
       'authenticated': app.authenticated,
       'feed_errors': {},
@@ -330,6 +336,7 @@ var vm = new Vue({
     'theme': {
       deep: true,
       handler: function(theme) {
+        this.updateMetaTheme(theme.name)
         document.body.classList.value = 'theme-' + theme.name
         api.settings.update({
           theme_name: theme.name,
@@ -405,6 +412,9 @@ var vm = new Vue({
     },
   },
   methods: {
+    updateMetaTheme: function(theme) {
+      document.querySelector("meta[name='theme-color']").content = this.themeColors[theme]
+    },
     refreshStats: function(loopMode) {
       return api.status().then(function(data) {
         if (loopMode && !vm.itemSelected) vm.refreshItems()