From be00a6fd603b2fb315bd6ab22bc79f93db81adad Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 29 Oct 2019 12:17:57 +0530
Subject: [PATCH] :sparkles: Browser tab color matches selected theme

---
 pages/settings.vue | 7 +++++--
 store/postwoman.js | 5 +++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/pages/settings.vue b/pages/settings.vue
index 06c707969..db15363bc 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -5,7 +5,7 @@
         <li>
           <h3 class="title">Background</h3>
           <div class="backgrounds">
-            <span :key="theme.class" @click="applyTheme(theme.class)" v-for="theme in themes">
+            <span :key="theme.class" @click="applyTheme(theme.class, theme.color)" v-for="theme in themes">
               <swatch
                 :active="settings.THEME_CLASS === theme.class"
                 :class="{ vibrant: theme.vibrant }"
@@ -164,6 +164,7 @@
         settings: {
           THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || "",
           THEME_COLOR: "",
+          THEME_TAB_COLOR: "",
           THEME_COLOR_VIBRANT: true,
 
           DISABLE_FRAME_COLORS:
@@ -187,8 +188,10 @@
     },
 
     methods: {
-      applyTheme(name) {
+      applyTheme(name, color) {
         this.applySetting("THEME_CLASS", name);
+        document.querySelector('meta[name=theme-color]').setAttribute('content', color)
+        this.applySetting("THEME_TAB_COLOR", color);
         document.documentElement.className = name;
         let imgGitHub = document.getElementById("imgGitHub");
         imgGitHub.style["filter"] = "";
diff --git a/store/postwoman.js b/store/postwoman.js
index cb6986e4c..b67b5fbc4 100644
--- a/store/postwoman.js
+++ b/store/postwoman.js
@@ -12,6 +12,11 @@ export const SETTINGS_KEYS = [
    */
   "THEME_COLOR",
 
+  /**
+   * The hex color code for browser tab color.
+   */
+  "THEME_TAB_COLOR",
+
   /**
    * Whether or not THEME_COLOR is considered 'vibrant'.
    *