From 969736a857eb6c1af54e40a923c11181532114a4 Mon Sep 17 00:00:00 2001
From: Youth <qcgm197874@gmail.com>
Date: Tue, 4 Jul 2023 15:06:55 +0800
Subject: [PATCH] =?UTF-8?q?Set=20the=20"filter"=20CSS=20property=20for=20d?=
 =?UTF-8?q?ark-colored=20icons=20under=20a=20dark=20the=E2=80=A6=20(#340)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Set the "filter" CSS property for dark-colored icons under a dark theme to "invert(100%)"

* chore: fix style

* chore: move const into function

---------

Co-authored-by: Sunner Sun <sunner@gmail.com>
---
 src/components/Footer/BotLogo.vue | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/components/Footer/BotLogo.vue b/src/components/Footer/BotLogo.vue
index 4d606a6d8..f343b92d9 100644
--- a/src/components/Footer/BotLogo.vue
+++ b/src/components/Footer/BotLogo.vue
@@ -1,7 +1,7 @@
 <template>
   <v-avatar
     rounded="rounded"
-    :class="{ active: active }"
+    :class="{ active: active, filter: enable_filter(bot) }"
     :image="bot.getLogo()"
     :alt="bot.getFullname()"
     :title="bot.getFullname()"
@@ -9,7 +9,26 @@
 </template>
 
 <script setup>
+import { useStore } from "vuex";
+import { Theme } from "@/theme";
+
+const store = useStore();
+
 defineProps(["bot", "active"]);
+
+function enable_filter(bot) {
+  const dark_icon_classname = [
+    "OpenAIAPI35Bot",
+    "OpenAIAPI3516KBot",
+    "OpenAIAPI4Bot",
+    "SkyWorkBot",
+    "AzureOpenAIAPIBot",
+    "DevBot",
+  ];
+  const is_dark = store.state.theme == Theme.DARK;
+  const is_dark_bot = dark_icon_classname.includes(bot.getClassname());
+  return is_dark && is_dark_bot;
+}
 </script>
 
 <style>
@@ -23,4 +42,8 @@ defineProps(["bot", "active"]);
   opacity: 1;
   filter: grayscale(0%);
 }
+
+.filter{
+  filter: invert(100%);
+}
 </style>