From 298fd518268aad5a76c62cd410ea9dde482d661d Mon Sep 17 00:00:00 2001
From: Gerhard Steenkamp <gerhard.m.steenkamp@gmail.com>
Date: Wed, 22 Nov 2023 17:19:14 +0200
Subject: [PATCH] create localized theme styles for osnap button

---
 .../SettingsTreasuryActivateOsnapButton.vue   | 46 ++++++++++++++++---
 1 file changed, 40 insertions(+), 6 deletions(-)

diff --git a/src/components/SettingsTreasuryActivateOsnapButton.vue b/src/components/SettingsTreasuryActivateOsnapButton.vue
index a7d37a3b..c676e2ac 100644
--- a/src/components/SettingsTreasuryActivateOsnapButton.vue
+++ b/src/components/SettingsTreasuryActivateOsnapButton.vue
@@ -1,24 +1,58 @@
 <script setup lang="ts">
+const { theme } = useSkin();
+
 defineProps<{
   isOsnapEnabled: boolean;
 }>();
+
+// handling some theming here locally so as not to interfere with the global style.scss file
+const activeStyles = computed(() => {
+  return theme.value === 'light'
+    ? {
+        div: 'bg-[hsla(122,100%,45%,0.13)] text-[hsla(122,100%,21%,1)]',
+        span: 'bg-[hsla(122,100%,45%,1)]'
+      }
+    : {
+        div: 'bg-[hsla(122,100%,45%,0.13)] text-[hsla(122,100%,45%,1)]',
+        span: 'bg-[hsla(122,100%,45%,1)]'
+      };
+});
+
+const inactiveStyles = computed(() => {
+  return theme.value === 'light'
+    ? {
+        div: 'bg-[hsla(0,0%,0%,1)] text-skin-bg',
+        span: 'bg-skin-bg opacity-30'
+      }
+    : {
+        div: 'bg-[hsla(0,0%,100%,1)] text-skin-bg',
+        span: 'bg-skin-bg opacity-30'
+      };
+});
 </script>
 
 <template>
   <button
     v-if="isOsnapEnabled"
-    class="flex items-center gap-2 rounded-full bg-[hsla(122,100%,45%,0.13)] px-3 py-2 text-[hsl(122,100%,21%)]"
+    :class="[
+      'flex items-center gap-2 rounded-full px-3 py-2',
+      activeStyles.div
+    ]"
   >
     <span
-      class="block h-[6px] w-[6px] rounded-full bg-[hsl(122,100%,45%)]"
-    ></span
-    >oSnap activated
+      :class="['block h-[6px] w-[6px] rounded-full', activeStyles.span]"
+    />oSnap activated
   </button>
   <button
     v-else
-    class="flex items-center gap-2 rounded-full bg-black px-3 py-2 text-white"
+    :class="[
+      'flex items-center gap-2 rounded-full px-3 py-2',
+      inactiveStyles.div
+    ]"
   >
-    <span class="block h-[6px] w-[6px] rounded-full bg-white/30"></span>
+    <span
+      :class="['block h-[6px] w-[6px] rounded-full', inactiveStyles.span]"
+    />
     Activate oSnap
   </button>
 </template>