Set the "filter" CSS property for dark-colored icons under a dark the… (

#340) * 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 <[email protected]>
ai-shifu · Jul 4, 2023 · 969736a · 969736a · vercel · Jul 4, 2023
1 parent db56d12
commit 969736a
Showing 1 changed file with 24 additions and 1 deletion.
diff --git a/src/components/Footer/BotLogo.vue b/src/components/Footer/BotLogo.vue
@@ -1,15 +1,34 @@
 <template>
   <v-avatar
     rounded="rounded"
-    :class="{ active: active }"
+    :class="{ active: active, filter: enable_filter(bot) }"
     :image="bot.getLogo()"
     :alt="bot.getFullname()"
     :title="bot.getFullname()"
   ></v-avatar>
 </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>