From 887e9213154fbdfb874b2afa36fdf0827b6a75af Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 15 Jun 2024 22:10:20 +0200
Subject: [PATCH] fix(statusPanel): fix the thumbnail overlay color in the
 light theme

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../panels/Status/PrintstatusThumbnail.vue      | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/panels/Status/PrintstatusThumbnail.vue b/src/components/panels/Status/PrintstatusThumbnail.vue
index 43fdf91e5..59495795e 100644
--- a/src/components/panels/Status/PrintstatusThumbnail.vue
+++ b/src/components/panels/Status/PrintstatusThumbnail.vue
@@ -10,9 +10,7 @@
             :style="thumbnailStyle"
             @focus="focusBigThumbnail"
             @blur="blurBigThumbnail">
-            <v-card-title
-                class="white--text py-2 px-2"
-                style="background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(3px)">
+            <v-card-title class="white--text py-2 px-2" :style="styleThumbnailOverlay">
                 <v-row>
                     <v-col style="width: 100px">
                         <span class="subtitle-2 text-truncate px-0 text--disabled d-block">
@@ -197,6 +195,19 @@ export default class StatusPanelPrintstatusThumbnail extends Mixins(BaseMixin) {
         return {}
     }
 
+    get styleThumbnailOverlay() {
+        const style = {
+            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+            backdropFilter: 'blur(3px)',
+        }
+
+        if (!this.$vuetify.theme.dark) {
+            style.backgroundColor = 'rgba(255, 255, 255, 0.3)'
+        }
+
+        return style
+    }
+
     focusBigThumbnail() {
         if (this.$refs.bigThumbnail) {
             const clientWidth = this.$refs.bigThumbnail.$el.clientWidth