From 0cd25f7ce4aac3cf1f04936aa428b7b69936dbb2 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Mon, 16 Dec 2024 16:29:16 +0100
Subject: [PATCH] fix(ui):theme color switch for ghost button

---
 front/src/components/ui/Button.vue | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/front/src/components/ui/Button.vue b/front/src/components/ui/Button.vue
index c03fd8e30..64e1be5e4 100644
--- a/front/src/components/ui/Button.vue
+++ b/front/src/components/ui/Button.vue
@@ -141,19 +141,31 @@ onMounted(() => {
       }
     }
 
-    &.ghost {
-      &:not(:active):not(.is-active):not(:hover):not(.is-hovered) {
-        background-color: transparent !important;
-        border-color: transparent !important;
-        color: var(--fw-gray-100);
+    @include dark-theme {
+      &.ghost {
+        &:not(:active):not(.is-active):not(:hover):not(.is-hovered) {
+          background-color: transparent !important;
+          border-color: transparent !important;
+        }
+        &.is-hovered,
+        &:hover,
+        &.is-active,
+        &:active {
+          background-color: var(--fw-gray-800) !important;
+          border-color: var(--fw-gray-800) !important;
+          color: var(--fw-text-color) !important;
+        }
       }
+    }
+
+    @include light-theme {
       &.is-hovered,
       &:hover,
       &.is-active,
       &:active {
         background-color: var(--fw-gray-800) !important;
         border-color: var(--fw-gray-800) !important;
-        color: var(--fw-gray-100) !important;
+        color: var(--fw-bg-color) !important;
       }
     }