Upstream

pages/graphql.vue

@@ -152,7 +152,7 @@
           />
         </pw-section>
 
-        <pw-section class="cyan" :label="$t('query')" ref="query">
+        <pw-section class="teal" :label="$t('query')" ref="query">
           <div class="row-wrapper gqlRunQuery">
             <label for="gqlQuery">{{ $t("query") }}</label>
             <div>

pages/index.vue

@@ -519,7 +519,7 @@
             </tab>
 
             <tab :id="'authentication'" :label="$t('authentication')">
-              <pw-section class="cyan" :label="$t('authentication')" ref="authentication">
+              <pw-section class="teal" :label="$t('authentication')" ref="authentication">
                 <ul>
                   <li>
                     <div class="row-wrapper">

pages/settings.vue

@@ -51,42 +51,12 @@
       </ul>
     </pw-section>
 
-    <pw-section class="cyan" :label="$t('theme')" ref="theme">
+    <pw-section class="teal" :label="$t('theme')" ref="theme">
       <ul>
-        <li>
-          <label>{{ $t("background") }}</label>
-          <div class="backgrounds">
-            <span :key="theme.class" @click="applyTheme(theme)" v-for="theme in themes">
-              <swatch
-                :active="settings.THEME_CLASS === theme.class"
-                :class="{ vibrant: theme.vibrant }"
-                :color="theme.color"
-                :name="theme.name"
-                class="bg"
-              />
-            </span>
-          </div>
-        </li>
+        <color-mode-picker />
       </ul>
       <ul>
-        <li>
-          <label>{{ $t("color") }}</label>
-          <div class="colors">
-            <span
-              :key="entry.color"
-              @click="setActiveColor(entry.color, entry.vibrant)"
-              v-for="entry in colors"
-            >
-              <swatch
-                :active="settings.THEME_COLOR === entry.color.toUpperCase()"
-                :class="{ vibrant: entry.vibrant }"
-                :color="entry.color"
-                :name="entry.name"
-                class="fg"
-              />
-            </span>
-          </div>
-        </li>
+        <accent-mode-picker />
       </ul>
       <ul>
         <li>
@@ -243,16 +213,6 @@
         </li>
       </ul>
     </pw-section>
-
-    <!-- <div>
-      <h1>Color mode: {{ $colorMode.value }}</h1>
-      <select v-model="$colorMode.preference">
-        <option value="system">System</option>
-        <option value="light">Light</option>
-        <option value="dark">Dark</option>
-        <option value="sepia">Sepia</option>
-      </select>
-    </div> -->
   </div>
 </template>
 
@@ -263,84 +223,6 @@ import { hasExtensionInstalled } from "../helpers/strategies/ExtensionStrategy"
 export default {
   data() {
     return {
-      // NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
-      //        You should copy the existing light theme as a template and then just
-      //        set the relevant values.
-      themes: [
-        {
-          color: "#202124",
-          name: this.$t("kinda_dark"),
-          class: "",
-          aceEditor: "twilight",
-        },
-        {
-          color: "#ffffff",
-          name: this.$t("clearly_white"),
-          vibrant: true,
-          class: "light",
-          aceEditor: "iplastic",
-        },
-        {
-          color: "#000000",
-          name: this.$t("just_black"),
-          class: "black",
-          aceEditor: "vibrant_ink",
-        },
-        {
-          color: "var(--ac-color)",
-          name: this.$t("auto_system"),
-          vibrant: window.matchMedia("(prefers-color-scheme: light)").matches,
-          class: "auto",
-          aceEditor: window.matchMedia("(prefers-color-scheme: light)").matches
-            ? "iplastic"
-            : "twilight",
-        },
-      ],
-      // You can define a new color here! It will simply store the color value.
-      colors: [
-        // If the color is vibrant, black is used as the active foreground color.
-        {
-          color: "#50fa7b",
-          name: this.$t("green"),
-          vibrant: true,
-        },
-        {
-          color: "#f1fa8c",
-          name: this.$t("yellow"),
-          vibrant: true,
-        },
-        {
-          color: "#ff79c6",
-          name: this.$t("pink"),
-          vibrant: true,
-        },
-        {
-          color: "#ff5555",
-          name: this.$t("red"),
-          vibrant: false,
-        },
-        {
-          color: "#bd93f9",
-          name: this.$t("purple"),
-          vibrant: true,
-        },
-        {
-          color: "#ffb86c",
-          name: this.$t("orange"),
-          vibrant: true,
-        },
-        {
-          color: "#8be9fd",
-          name: this.$t("cyan"),
-          vibrant: true,
-        },
-        {
-          color: "#57b5f9",
-          name: this.$t("blue"),
-          vibrant: false,
-        },
-      ],
-
       extensionVersion: hasExtensionInstalled()
         ? window.__POSTWOMAN_EXTENSION_HOOK__.getVersion()
         : null,
@@ -351,11 +233,6 @@ export default {
             ? this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED
             : true,
 
-        THEME_CLASS: "",
-        THEME_COLOR: "",
-        THEME_TAB_COLOR: "",
-        THEME_COLOR_VIBRANT: true,
-
         FRAME_COLORS_ENABLED: this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false,
         PROXY_ENABLED: this.$store.state.postwoman.settings.PROXY_ENABLED || false,
         PROXY_URL:
@@ -387,31 +264,6 @@ export default {
     },
   },
   methods: {
-    applyTheme({ class: name, color, aceEditor }) {
-      this.applySetting("THEME_CLASS", name)
-      this.applySetting("THEME_ACE_EDITOR", aceEditor)
-      document.querySelector("meta[name=theme-color]").setAttribute("content", color)
-      this.applySetting("THEME_TAB_COLOR", color)
-      document.documentElement.className = name
-    },
-    setActiveColor(color, vibrant) {
-      // By default, the color is vibrant.
-      if (vibrant === null) vibrant = true
-      document.documentElement.style.setProperty("--ac-color", color)
-      document.documentElement.style.setProperty(
-        "--act-color",
-        vibrant ? "rgba(32, 33, 36, 1)" : "rgba(255, 255, 255, 1)"
-      )
-      this.applySetting("THEME_COLOR", color.toUpperCase())
-      this.applySetting("THEME_COLOR_VIBRANT", vibrant)
-    },
-    getActiveColor() {
-      // This strips extra spaces and # signs from the strings.
-      const strip = (str) => str.replace(/#/g, "").replace(/ /g, "")
-      return `#${strip(
-        window.getComputedStyle(document.documentElement).getPropertyValue("--ac-color")
-      ).toUpperCase()}`
-    },
     applySetting(key, value) {
       this.settings[key] = value
       this.$store.commit("postwoman/applySetting", [key, value])
@@ -457,10 +309,6 @@ export default {
       }
     },
   },
-  beforeMount() {
-    this.settings.THEME_CLASS = document.documentElement.className
-    this.settings.THEME_COLOR = this.getActiveColor()
-  },
   computed: {
     proxySettings() {
       return {