Upstream

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"
@@ -35,7 +33,7 @@ export default {
     theme: {
       type: String,
       required: false,
-      default: null
+      default: null,
     },
     lang: {
       type: String,
@@ -118,7 +116,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 debounce from "~/helpers/utils/debounce"
@@ -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) {