From b4ac527638ae14af7a86e58f6c3857b5592bfb00 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Mon, 22 Mar 2021 16:36:57 +0000
Subject: [PATCH] fix: restore previous theme colors - fixed #1559

---
 README.md                             |  2 +-
 assets/scss/themes.scss               | 16 ++++++++++++++++
 components/smart/AccentModePicker.vue | 18 +++++++++++++++++-
 tailwind.config.js                    | 13 ++++++++++++-
 4 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index c38b2ece6..4caaa9090 100644
--- a/README.md
+++ b/README.md
@@ -116,7 +116,7 @@
 ---
 
 - Choose theme: System, Light, Dark (default) and Black
-- Choose accent color: Blue, Green (default), Teal, Purple, Orange, Pink, Red, and Yellow
+- Choose accent color: Blue, Green (default), Teal, Indigo, Purple, Orange, Pink, Red, and Yellow
 - Toggle auto-scroll to response
 
 <p>
diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss
index e939c27d6..d313827ba 100644
--- a/assets/scss/themes.scss
+++ b/assets/scss/themes.scss
@@ -83,6 +83,11 @@
   --ac-color: theme("colors.green.400");
 }
 
+@mixin tealTheme {
+  // Acent color
+  --ac-color: theme("colors.teal.400");
+}
+
 @mixin indigoTheme {
   // Acent color
   --ac-color: theme("colors.indigo.400");
@@ -93,6 +98,11 @@
   --ac-color: theme("colors.purple.400");
 }
 
+@mixin orangeTheme {
+  // Acent color
+  --ac-color: theme("colors.orange.400");
+}
+
 @mixin pinkTheme {
   // Acent color
   --ac-color: theme("colors.pink.400");
@@ -132,12 +142,18 @@
 :root[data-accent="green"] {
   @include greenTheme;
 }
+:root[data-accent="teal"] {
+  @include tealTheme;
+}
 :root[data-accent="indigo"] {
   @include indigoTheme;
 }
 :root[data-accent="purple"] {
   @include purpleTheme;
 }
+:root[data-accent="orange"] {
+  @include orangeTheme;
+}
 :root[data-accent="pink"] {
   @include pinkTheme;
 }
diff --git a/components/smart/AccentModePicker.vue b/components/smart/AccentModePicker.vue
index d09acd43e..9fb0e8bf3 100644
--- a/components/smart/AccentModePicker.vue
+++ b/components/smart/AccentModePicker.vue
@@ -2,9 +2,15 @@
   <div class="flex flex-col">
     <label>{{ $t("color") }}: {{ active.charAt(0).toUpperCase() + active.slice(1) }}</label>
     <div>
+      <!-- text-blue-400 -->
+      <!-- text-green-400 -->
+      <!-- text-teal-400 -->
       <!-- text-indigo-400 -->
       <!-- text-purple-400 -->
+      <!-- text-orange-400 -->
       <!-- text-pink-400 -->
+      <!-- text-red-400 -->
+      <!-- text-yellow-400 -->
       <span
         v-for="(color, index) of accentColors"
         :key="`color-${index}`"
@@ -24,7 +30,17 @@ export default {
   data() {
     return {
       active: localStorage.getItem("THEME_COLOR") || "green",
-      accentColors: ["blue", "green", "indigo", "purple", "red", "pink", "yellow"],
+      accentColors: [
+        "blue",
+        "green",
+        "teal",
+        "indigo",
+        "purple",
+        "orange",
+        "pink",
+        "red",
+        "yellow",
+      ],
     }
   },
   methods: {
diff --git a/tailwind.config.js b/tailwind.config.js
index 242f70ff4..7a1600624 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,7 +4,9 @@
  ** Docs: https://tailwindcss.com/docs/configuration
  ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
  */
-module.exports = {
+import colors from "tailwindcss/colors"
+
+export default {
   dark: "class",
   corePlugins: {
     float: false,
@@ -28,6 +30,15 @@ module.exports = {
         acColor: "var(--ac-color)",
         actColor: "var(--act-color)",
         ttColor: "var(--tt-color)",
+        blue: colors.blue,
+        green: colors.green,
+        teal: colors.teal,
+        indigo: colors.indigo,
+        purple: colors.purple,
+        orange: colors.orange,
+        pink: colors.pink,
+        red: colors.red,
+        yellow: colors.yellow,
       },
     },
     fontFamily: {