Color modes (#1181)

README.md

@@ -93,8 +93,8 @@
 
 **Theming:** [Customize now ✨](https://hoppscotch.io/settings)
 
-- Choose theme: Kinda Dark (default), Clearly White, Just Black and System theme
+- Choose theme: System, Light, Dark (default) and Black
-- Choose accent color: Green (default), Yellow, Pink, Red, Purple, Orange, Cyan and Blue
+- Choose accent color: Blue, Green (default), Teal, Purple, Orange, Pink, Red, and Yellow
 - Toggle multi-colored headings
 - Toggle auto-scroll to response
 

assets/scss/styles.scss

@@ -87,9 +87,6 @@ a {
   @apply inline-flex;
   @apply text-current;
   @apply no-underline;
-  @apply transition;
-  @apply ease-in-out;
-  @apply duration-200;
   @apply outline-none;
 
   &.link {
@@ -361,6 +358,7 @@ button {
   &:not([disabled]):focus {
     @apply text-actColor;
     @apply fill-current;
+    @apply outline-none;
     box-shadow: inset 0 0 0 2px var(--fg-color);
   }
 

assets/scss/themes.scss

@@ -1,18 +1,9 @@
 @mixin baseTheme {
-  --font-body: 'Poppins', 'sans-serif';
+  --font-body: "Poppins", "sans-serif";
-  --font-mono: 'Roboto Mono', 'monoscpace';
+  --font-mono: "Roboto Mono", "monoscpace";
-  --font-icon: 'Material Icons';
+  --font-icon: "Material Icons";
 }
 
-/**
-  Main Themes:
-  - dark (default)
-  - light
-  - black
-  - auto
- */
-
-// Dark is the default theme variant.
 @mixin darkTheme {
   // Background color
   --bg-color: rgba(32, 33, 36, 1);
@@ -28,14 +19,10 @@
   --brd-color: rgba(255, 255, 255, 0.05);
   // Error color
   --err-color: rgba(255, 255, 255, 0.05);
-  // Acent color
-  --ac-color: rgba(80, 250, 123, 1);
-  // Active text color
-  --act-color: rgba(32, 33, 36, 1);
-  // Auto-complete color
-  --atc-color: rgba(32, 33, 36, 1);
   // Tooltip color
   --tt-color: rgba(53, 53, 53, 1);
+  // Editor theme
+  --editor-theme: "twilight";
 }
 
 @mixin lightTheme {
@@ -53,14 +40,10 @@
   --brd-color: rgba(0, 0, 0, 0.1);
   // Error color
   --err-color: rgba(0, 0, 0, 0.1);
-  // Acent color
-  --ac-color: rgba(80, 250, 123, 1);
-  // Active text color
-  --act-color: rgba(255, 255, 255, 1);
-  // Auto-complete color
-  --atc-color: rgba(255, 255, 255, 1);
   // Tooltip color
   --tt-color: rgba(220, 220, 220, 1);
+  // Editor theme
+  --editor-theme: "iplastic";
 }
 
 @mixin blackTheme {
@@ -78,37 +61,107 @@
   --brd-color: rgba(255, 255, 255, 0.05);
   // Error color
   --err-color: rgba(255, 255, 255, 0.05);
-  // Acent color
-  --ac-color: rgba(80, 250, 123, 1);
-  // Active text color
-  --act-color: rgba(0, 0, 0, 1);
-  // Auto-complete color
-  --atc-color: rgba(0, 0, 0, 1);
   // Tooltip color
   --tt-color: rgba(18, 18, 18, 1);
+  // Editor theme
+  --editor-theme: "vibrant_ink";
+}
+
+@mixin blueTheme {
+  // Acent color
+  --ac-color: theme("colors.blue.400");
+  // Active text color
+  --act-color: rgba(32, 33, 36, 1);
+}
+
+@mixin greenTheme {
+  // Acent color
+  --ac-color: theme("colors.green.400");
+  // Active text color
+  --act-color: rgba(32, 33, 36, 1);
+}
+
+@mixin tealTheme {
+  // Acent color
+  --ac-color: theme("colors.teal.400");
+  // Active text color
+  --act-color: rgba(32, 33, 36, 1);
+}
+
+@mixin purpleTheme {
+  // Acent color
+  --ac-color: theme("colors.purple.400");
+  // Active text color
+  --act-color: rgba(32, 33, 36, 1);
+}
+
+@mixin orangeTheme {
+  // Acent color
+  --ac-color: theme("colors.orange.400");
+  // Active text color
+  --act-color: rgba(32, 33, 36, 1);
+}
+
+@mixin pinkTheme {
+  // Acent color
+  --ac-color: theme("colors.pink.400");
+  // Active text color
+  --act-color: rgba(32, 33, 36, 1);
+}
+
+@mixin redTheme {
+  // Acent color
+  --ac-color: theme("colors.red.400");
+  // Active text color
+  --act-color: rgba(32, 33, 36, 1);
+}
+
+@mixin yellowTheme {
+  // Acent color
+  --ac-color: theme("colors.yellow.400");
+  // Active text color
+  --act-color: rgba(32, 33, 36, 1);
 }
 
 :root {
   @include baseTheme;
   @include darkTheme;
+  @include greenTheme;
 }
 
 :root.light {
   @include lightTheme;
 }
 
+:root.dark {
+  @include darkTheme;
+}
+
 :root.black {
   @include blackTheme;
 }
 
-@media (prefers-color-scheme: dark) {
+:root[data-accent="blue"] {
-  :root.auto {
+  @include blueTheme;
-    @include darkTheme;
-  }
 }
-
+:root[data-accent="green"] {
-@media (prefers-color-scheme: light) {
+  @include greenTheme;
-  :root.auto {
+}
-    @include lightTheme;
+:root[data-accent="teal"] {
-  }
+  @include tealTheme;
+}
+:root[data-accent="purple"] {
+  @include purpleTheme;
+}
+:root[data-accent="orange"] {
+  @include orangeTheme;
+}
+:root[data-accent="pink"] {
+  @include pinkTheme;
+}
+:root[data-accent="red"] {
+  @include redTheme;
+}
+:root[data-accent="yellow"] {
+  @include yellowTheme;
 }

components/collections/index.vue

@@ -85,7 +85,7 @@ TODO:
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 245px);
+  max-height: calc(100vh - 232px);
 }
 </style>
 

components/environments/index.vue

@@ -44,7 +44,7 @@
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 245px);
+  max-height: calc(100vh - 232px);
 }
 </style>
 

components/firebase/feeds.vue

@@ -31,7 +31,7 @@
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 298px);
+  max-height: calc(100vh - 296px);
 }
 
 .clamb-3 {

components/graphql/queryeditor.vue

@@ -17,8 +17,6 @@
 </style>
 
 <script>
-const DEFAULT_THEME = "twilight"
-
 import ace from "ace-builds"
 import "ace-builds/webpack-resolver"
 import "ace-builds/src-noconflict/ext-language_tools"
@@ -176,9 +174,11 @@ export default {
     defineTheme() {
       if (this.theme) {
         return this.theme
-      } else {
-        return this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
       }
+      const strip = (str) => str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
+      return strip(
+        window.getComputedStyle(document.documentElement).getPropertyValue("--editor-theme")
+      )
     },
 
     setValidationSchema(schema) {

components/layout/contributors.vue

@@ -229,9 +229,7 @@
   @apply items-center;
   @apply flex-no-wrap;
   @apply overflow-auto;
-  @apply py-4;
   @apply my-4;
-  max-width: calc(100vw - 72px);
 }
 </style>
 

components/layout/history.vue

@@ -245,7 +245,7 @@
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 290px);
+  max-height: calc(100vh - 288px);
 
   [readonly] {
     @apply cursor-default;

components/layout/pw-header.vue

@@ -3,8 +3,8 @@
     <div class="row-wrapper">
       <span class="slide-in">
         <nuxt-link :to="localePath('index')">
-          <h1 class="logo hide-on-small-screen">Hoppscotch</h1>
+          <h1 class="text-xl hide-on-small-screen hover:text-acColor">Hoppscotch</h1>
-          <h1 class="logo show-on-small-screen">Hs</h1>
+          <h1 class="text-xl show-on-small-screen hover:text-acColor">Hs</h1>
         </nuxt-link>
       </span>
       <span>
@@ -293,14 +293,6 @@ kbd {
   animation: slideIn 0.2s forwards ease-in-out;
 }
 
-.logo {
-  @apply text-xl;
-
-  &:hover {
-    @apply text-acColor;
-  }
-}
-
 .show-on-small-screen {
   @apply hidden;
 }

components/layout/pw-section.vue

@@ -2,7 +2,7 @@
   <fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': !frameColorsEnabled }">
     <legend @click.prevent="collapse">
       <span>{{ label }}</span>
-      <i class="material-icons">
+      <i class="ml-2 align-middle material-icons">
         {{ isCollapsed(label) ? "expand_more" : "expand_less" }}
       </i>
     </legend>
@@ -30,47 +30,38 @@ fieldset {
     @apply transition;
     @apply ease-in-out;
     @apply duration-200;
-
-    i {
-      @apply ml-2;
-      @apply align-middle;
-    }
   }
 
   &.blue legend {
-    color: #57b5f9;
+    @apply text-blue-400;
-  }
-
-  &.gray legend {
-    color: #bcc2cd;
   }
 
   &.green legend {
-    color: #50fa7b;
+    @apply text-green-400;
   }
 
-  &.cyan legend {
+  &.teal legend {
-    color: #8be9fd;
+    @apply text-teal-400;
   }
 
   &.purple legend {
-    color: #bd93f9;
+    @apply text-purple-400;
   }
 
   &.orange legend {
-    color: #ffb86c;
+    @apply text-orange-400;
   }
 
   &.pink legend {
-    color: #ff79c6;
+    @apply text-pink-400;
   }
 
   &.red legend {
-    color: #ff5555;
+    @apply text-red-400;
   }
 
   &.yellow legend {
-    color: #f1fa8c;
+    @apply text-yellow-400;
   }
 }
 

components/layout/sidenav.vue

@@ -204,6 +204,9 @@ nav.primary-nav {
     @apply text-fgLightColor;
     @apply fill-current;
     @apply outline-none;
+    @apply transition;
+    @apply ease-in-out;
+    @apply duration-200;
 
     &:hover {
       @apply text-fgColor;
@@ -248,6 +251,7 @@ nav.secondary-nav {
     @apply flex-col;
     @apply flex-no-wrap;
     @apply space-y-2;
+    @apply py-1;
 
     li {
       @apply flex;
@@ -259,6 +263,9 @@ nav.secondary-nav {
         @apply text-fgLightColor;
         @apply fill-current;
         @apply outline-none;
+        @apply transition;
+        @apply ease-in-out;
+        @apply duration-200;
 
         &:hover {
           @apply text-fgColor;

components/settings/swatch.vue

@@ -1,67 +0,0 @@
-<template>
-  <div
-    class="color"
-    :data-color="color"
-    :class="{ active: active }"
-    v-tooltip="{ content: name || color }"
-    :style="{ backgroundColor: color }"
-  >
-    <i v-if="active" class="material-icons activeTick">done</i>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.color {
-  @apply inline-flex;
-  @apply items-center;
-  @apply justify-center;
-  @apply relative;
-  @apply m-2;
-  @apply p-4;
-  @apply rounded-full;
-  @apply border-2;
-  @apply border-bgDarkColor;
-  @apply cursor-pointer;
-  @apply transition;
-  @apply ease-in-out;
-  @apply duration-200;
-
-  &.fg {
-    @apply text-actColor;
-  }
-
-  &.active {
-    @apply border-2;
-    @apply border-acColor;
-  }
-
-  &.fg.active {
-    @apply border-2;
-    @apply border-fgColor;
-  }
-
-  .activeTick {
-    @apply absolute;
-    @apply m-auto;
-    @apply inset-0;
-  }
-}
-</style>
-
-<script>
-export default {
-  props: {
-    color: {
-      type: String,
-      required: true,
-    },
-    name: {
-      type: String,
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-  },
-}
-</script>

components/ui/accent-mode-picker.vue

@@ -0,0 +1,39 @@
+<template>
+  <li>
+    <label>{{ $t("color") }}: {{ active.charAt(0).toUpperCase() + active.slice(1) }}</label>
+    <div class="space-x-2">
+      <span
+        v-for="(color, index) of colors"
+        :key="`color-${index}`"
+        v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
+        class="inline-flex items-center justify-center p-3 m-2 transition duration-200 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 hover:shadow-none"
+        :class="[{ 'bg-bgDarkColor': color === active }, `text-${color}-400`]"
+        @click="setActiveColor(color)"
+      >
+        <i class="material-icons">lens</i>
+      </span>
+    </div>
+  </li>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      active: localStorage.getItem("THEME_COLOR") || "green",
+      colors: ["blue", "green", "teal", "purple", "orange", "pink", "red", "yellow"],
+    }
+  },
+  methods: {
+    setActiveColor(color) {
+      document.documentElement.setAttribute("data-accent", color)
+      this.active = color
+    },
+  },
+  watch: {
+    active(color) {
+      localStorage.setItem("THEME_COLOR", color)
+    },
+  },
+}
+</script>

components/ui/ace-editor.vue

@@ -19,8 +19,6 @@
 </style>
 
 <script>
-const DEFAULT_THEME = "twilight"
-
 import ace from "ace-builds"
 import "ace-builds/webpack-resolver"
 import jsonParse from "~/helpers/jsonParse"
@@ -117,7 +115,10 @@ export default {
       if (this.theme) {
         return this.theme
       }
-      return this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
+      const strip = (str) => str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
+      return strip(
+        window.getComputedStyle(document.documentElement).getPropertyValue("--editor-theme")
+      )
     },
 
     provideLinting: debounce(function (code) {

components/ui/autocomplete.vue

@@ -41,7 +41,7 @@
 
   ul.suggestions {
     @apply hidden;
-    @apply bg-atcColor;
+    @apply bg-actColor;
     @apply absolute;
     @apply mx-2;
     @apply left-0;

components/ui/color-mode-picker.vue

@@ -0,0 +1,54 @@
+<template>
+  <li>
+    <label>
+      <ColorScheme placeholder="..." tag="span">
+        {{ $t("background") }}:
+        {{ $colorMode.preference.charAt(0).toUpperCase() + $colorMode.preference.slice(1) }}
+        <span v-if="$colorMode.preference === 'system'">
+          ({{ $colorMode.value }} mode detected)
+        </span>
+      </ColorScheme>
+    </label>
+    <div class="space-x-2">
+      <span
+        v-for="(color, index) of colors"
+        :key="`color-${index}`"
+        v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
+        class="inline-flex items-center justify-center p-3 m-2 transition duration-200 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 text-fgLightColor hover:text-fgColor hover:shadow-none"
+        :class="[
+          { 'bg-bgDarkColor': color === $colorMode.preference },
+          { 'text-acColor hover:text-acColor': color === $colorMode.value },
+        ]"
+        @click="$colorMode.preference = color"
+      >
+        <i class="material-icons">{{ getIcon(color) }}</i>
+      </span>
+    </div>
+  </li>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      colors: ["system", "light", "dark", "black"],
+    }
+  },
+  methods: {
+    getIcon(color) {
+      switch (color) {
+        case "system":
+          return "desktop_windows"
+        case "light":
+          return "wb_sunny"
+        case "dark":
+          return "nights_stay"
+        case "black":
+          return "bedtime"
+        default:
+          return "desktop_windows"
+      }
+    },
+  },
+}
+</script>

components/ui/js-editor.vue

@@ -19,8 +19,6 @@
 </style>
 
 <script>
-const DEFAULT_THEME = "twilight"
-
 import ace from "ace-builds"
 import "ace-builds/webpack-resolver"
 import jsonParse from "~/helpers/jsonParse"
@@ -106,7 +104,10 @@ export default {
       if (this.theme) {
         return this.theme
       }
-      return this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
+      const strip = (str) => str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
+      return strip(
+        window.getComputedStyle(document.documentElement).getPropertyValue("--editor-theme")
+      )
     },
 
     provideLinting: debounce(function (code) {

lang/en-US.json

@@ -165,18 +165,6 @@
   "no_url": "No URL",
   "run_query": "Run Query",
   "copy_query": "Copy Query",
-  "kinda_dark": "Kinda Dark",
-  "clearly_white": "Clearly White",
-  "just_black": "Just Black",
-  "auto_system": "Auto (system)",
-  "green": "Green",
-  "yellow": "Yellow",
-  "pink": "Pink",
-  "red": "Red",
-  "purple": "Purple",
-  "orange": "Orange",
-  "cyan": "Cyan",
-  "blue": "Blue",
   "loading": "Loading...",
   "fetching": "Fetching...",
   "waiting_send_req": "(waiting to send request)",

lang/es-ES.json

@@ -158,18 +158,6 @@
   "no_url": "Sin URL",
   "run_query": "Ejecutar consulta",
   "copy_query": "Copiar consulta",
-  "kinda_dark": "Un poco oscuro",
-  "clearly_white": "Claramente blanco",
-  "just_black": "Solo negro",
-  "auto_system": "Autenticación (sistema)",
-  "green": "Verde",
-  "yellow": "Amarillo",
-  "pink": "Rosado",
-  "red": "Rojo",
-  "purple": "Púrpura",
-  "orange": "Anaranjado",
-  "cyan": "Cian",
-  "blue": "Azul",
   "loading": "Cargando...",
   "fetching": "Recuperando...",
   "waiting_send_req": "(esperando para enviar la petición)",

lang/fr-FR.json

@@ -158,18 +158,6 @@
   "no_url": "Aucune URL",
   "run_query": "Lancer une recherche",
   "copy_query": "Copier la recherche",
-  "kinda_dark": "Plutôt Sombre",
-  "clearly_white": "Clairement Blanc",
-  "just_black": "Seulement Noir",
-  "auto_system": "Auth (système)",
-  "green": "Vert",
-  "yellow": "Jaune",
-  "pink": "Rose",
-  "red": "Rouge",
-  "purple": "Violet",
-  "orange": "Orange",
-  "cyan": "Cyan",
-  "blue": "Bleue",
   "loading": "Chargement...",
   "fetching": "Récupération...",
   "waiting_send_req": "(en attente de l'envoi de la demande)",

lang/ja-JP.json

@@ -158,18 +158,6 @@
   "no_url": "URL無し",
   "run_query": "クエリを実行",
   "copy_query": "クエリをコピー",
-  "kinda_dark": "ちょっと暗い",
-  "clearly_white": "明らかに白",
-  "just_black": "ただの黒",
-  "auto_system": "オート（システム）",
-  "green": "緑",
-  "yellow": "黄",
-  "pink": "ピンク",
-  "red": "赤",
-  "purple": "紫",
-  "orange": "オレンジ",
-  "cyan": "シヤン",
-  "blue": "青",
   "loading": "ロード中...",
   "fetching": "フェッチ中...",
   "waiting_send_req": "（リクエスト送信待ち）",

lang/ko-KR.json

@@ -165,18 +165,6 @@
   "no_url": "URL 없음",
   "run_query": "쿼리 실행",
   "copy_query": "쿼리 복사",
-  "kinda_dark": "연한 검정",
-  "clearly_white": "화이트",
-  "just_black": "검정",
-  "auto_system": "자동 (시스템)",
-  "green": "초록",
-  "yellow": "노랑",
-  "pink": "핑크",
-  "red": "빨강",
-  "purple": "보라",
-  "orange": "오렌지",
-  "cyan": "청록",
-  "blue": "파랑",
   "loading": "로딩중...",
   "fetching": "업데이트중...",
   "waiting_send_req": "(요청 송신 대기중)",
@@ -303,4 +291,4 @@
   "select_post_method": "POST 메소드 선택",
   "select_put_method": "PUT 메소드 선택",
   "select_delete_method": "DELETE 메소드 선택"
-}
+}

lang/pt-PT.json

@@ -167,18 +167,6 @@
   "no_url": "Sem URL",
   "run_query": "Correr Query",
   "copy_query": "Copiar Query",
-  "kinda_dark": "Meio escuro",
-  "clearly_white": "Claramente branco",
-  "just_black": "Só preto",
-  "auto_system": "Automático (sistema)",
-  "green": "Verde",
-  "yellow": "Amarelo",
-  "pink": "Rosa",
-  "red": "Vermelho",
-  "purple": "Roxo",
-  "orange": "Cor de laranja",
-  "cyan": "Ciano",
-  "blue": "Azul",
   "loading": "A carregar...",
   "fetching": "A obter...",
   "waiting_send_req": "(a aguardar o envio do request)",

lang/tr-TR.json

@@ -165,18 +165,6 @@
   "no_url": "URL Yok",
   "run_query": "Sorgu Çalıştı",
   "copy_query": "Sorgu Kopyala",
-  "kinda_dark": "Kinda Dark",
-  "clearly_white": "Açıkça Beyaz",
-  "just_black": "Sadece Siyah",
-  "auto_system": "Otomatik (sistem)",
-  "green": "Yeşil",
-  "yellow": "Sarı",
-  "pink": "Pembe",
-  "red": "Kırmızı",
-  "purple": "Mor",
-  "orange": "Turuncu",
-  "cyan": "Camgöbeği",
-  "blue": "Mavi",
   "loading": "Yükleniyor...",
   "fetching": "Getiriliyor...",
   "waiting_send_req": "(istek göndermeyi bekliyor)",

lang/zh-TW.json

@@ -165,18 +165,6 @@
   "no_url": "No URL",
   "run_query": "Run Query",
   "copy_query": "Copy Query",
-  "kinda_dark": "有點暗",
-  "clearly_white": "清晰白",
-  "just_black": "就是黑",
-  "auto_system": "自動（使用系統預設）",
-  "green": "綠",
-  "yellow": "黃",
-  "pink": "粉紅",
-  "red": "紅",
-  "purple": "紫",
-  "orange": "橘",
-  "cyan": "青",
-  "blue": "藍",
   "loading": "載入中...",
   "fetching": "正在取得...",
   "waiting_send_req": "(正等待傳送請求)",

layouts/default.vue

@@ -16,30 +16,13 @@
 <script>
 export default {
   beforeMount() {
-    // Load theme settings
+    let color = localStorage.getItem("THEME_COLOR") || "green"
-    ;(() => {
+    document.documentElement.setAttribute("data-accent", color)
-      // Apply theme from settings.
-      document.documentElement.className = this.$store.state.postwoman.settings.THEME_CLASS || ""
-      // Load theme color data from settings, or use default color.
-      let color = this.$store.state.postwoman.settings.THEME_COLOR || "#50fa7b"
-      let vibrant = this.$store.state.postwoman.settings.THEME_COLOR_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)"
-      )
-    })()
   },
-
   mounted() {
     if (process.client) {
       document.body.classList.add("afterLoad")
     }
-
-    document
-      .querySelector("meta[name=theme-color]")
-      .setAttribute("content", this.$store.state.postwoman.settings.THEME_TAB_COLOR || "#202124")
-
     console.log(
       "%cWe ❤︎ open source!",
       "background-color:white;padding:8px 16px;border-radius:8px;font-size:32px;color:red;"

nuxt.config.js

@@ -9,9 +9,7 @@ export const options = {
     background: "var(--bg-color)",
   },
   app: {
-    color: "#ffffff",
     background: "#202124",
-    accent: "#50fa7b",
   },
   social: {
     twitter: "@liyasthomas",
@@ -183,7 +181,11 @@ export default {
     Allow: "/",
     Sitemap: `${process.env.BASE_URL}sitemap.xml`,
   },
-  colorMode: { preference: "dark" },
+  colorMode: {
+    classSuffix: "",
+    preference: "dark",
+    fallback: "dark",
+  },
   i18n: {
     locales: [
       {

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

@@ -520,7 +520,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>
+        <color-mode-picker />
-          <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>
       </ul>
       <ul>
-        <li>
+        <accent-mode-picker />
-          <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>
       </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>
 
@@ -264,84 +224,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,
@@ -352,11 +234,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:
@@ -388,31 +265,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])
@@ -458,10 +310,6 @@ export default {
       }
     },
   },
-  beforeMount() {
-    this.settings.THEME_CLASS = document.documentElement.className
-    this.settings.THEME_COLOR = this.getActiveColor()
-  },
   computed: {
     proxySettings() {
       return {

store/postwoman.js

@@ -7,36 +7,6 @@ export const SETTINGS_KEYS = [
    */
   "SCROLL_INTO_ENABLED",
 
-  /**
-   * The CSS class that should be applied to the root element.
-   * Essentially, the name of the background theme.
-   */
-  "THEME_CLASS",
-
-  /**
-   * The hex color code for the currently active theme.
-   */
-  "THEME_COLOR",
-
-  /**
-   * The hex color code for browser tab color.
-   */
-  "THEME_TAB_COLOR",
-
-  /**
-   * Whether or not THEME_COLOR is considered 'vibrant'.
-   *
-   * For readability reasons, if the THEME_COLOR is vibrant,
-   * any text placed on the theme color will have its color
-   * inverted from white to black.
-   */
-  "THEME_COLOR_VIBRANT",
-
-  /**
-   * The Ace editor theme
-   */
-  "THEME_ACE_EDITOR",
-
   /**
    * Normally, section frames are multicolored in the UI
    * to emphasise the different sections.

tailwind.config.js

@@ -7,8 +7,10 @@
 module.exports = {
   future: {
     removeDeprecatedGapUtilities: true,
+    purgeLayersByDefault: true,
   },
   experimental: "all",
+  dark: "class",
   corePlugins: {
     clear: false,
     float: false,
@@ -26,7 +28,6 @@ module.exports = {
         errColor: "var(--err-color)",
         acColor: "var(--ac-color)",
         actColor: "var(--act-color)",
-        atcColor: "var(--atc-color)",
         ttColor: "var(--tt-color)",
       },
       inset: {},