From 9aa9d939ba953804c41e50caff81df79e73f453f Mon Sep 17 00:00:00 2001
From: hlechner <hlechner@gmail.com>
Date: Wed, 29 Jul 2020 22:50:18 -0300
Subject: [PATCH] add light theme support for desktop button

---
 panel.js       | 37 ++++++++++++++++++++++++++++---------
 stylesheet.css |  8 ++++----
 2 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/panel.js b/panel.js
index c55a148..b089aab 100644
--- a/panel.js
+++ b/panel.js
@@ -326,7 +326,7 @@ var dtpPanel = Utils.defineClass({
             [
                 Utils.getStageTheme(), 
                 'changed', 
-                () => this._resetGeometry()
+                () => (this._resetGeometry(), this._setShowDesktopButtonStyle()),
             ],
             [
                 // sync hover after a popupmenu is closed
@@ -663,8 +663,12 @@ var dtpPanel = Utils.defineClass({
             ],
             [
                 Me.settings,
-                'changed::showdesktop-button-width',
-                () => this._setShowDesktopButtonSize()
+                [
+                    'changed::showdesktop-button-width',
+                    'changed::trans-use-custom-bg',
+                    'changed::trans-bg-color'
+                ],
+                () => this._setShowDesktopButtonStyle()
             ],
             [
                 Me.desktopSettings,
@@ -1253,11 +1257,12 @@ var dtpPanel = Utils.defineClass({
                             y_fill: true,
                             track_hover: true });
 
-            this._setShowDesktopButtonSize();
+            this._setShowDesktopButtonStyle();
 
             this._showDesktopButton.connect('button-press-event', () => this._onShowDesktopButtonPress());
             this._showDesktopButton.connect('enter-event', () => {
-                this._showDesktopButton.add_style_class_name('showdesktop-button-hovered');
+                this._showDesktopButton.add_style_class_name(this._getBackgroundBrightness() ?
+                            'showdesktop-button-light-hovered' : 'showdesktop-button-dark-hovered');
 
                 if (Me.settings.get_boolean('show-showdesktop-hover')) {
                     this._timeoutsHandler.add([T4, Me.settings.get_int('show-showdesktop-delay'), () => {
@@ -1268,7 +1273,8 @@ var dtpPanel = Utils.defineClass({
             });
             
             this._showDesktopButton.connect('leave-event', () => {
-                this._showDesktopButton.remove_style_class_name('showdesktop-button-hovered');
+                this._showDesktopButton.remove_style_class_name(this._getBackgroundBrightness() ?
+                            'showdesktop-button-light-hovered' : 'showdesktop-button-dark-hovered');
 
                 if (Me.settings.get_boolean('show-showdesktop-hover')) {
                     if (this._timeoutsHandler.getId(T4)) {
@@ -1290,17 +1296,30 @@ var dtpPanel = Utils.defineClass({
         }
     },
 
-    _setShowDesktopButtonSize: function() {
+    _setShowDesktopButtonStyle: function() {
+        let rgb = this._getBackgroundBrightness() ? "55, 55, 55" : "200, 200, 200";
+
         if (this._showDesktopButton) {
             let buttonSize = Me.settings.get_int('showdesktop-button-width') + 'px;';
             let isVertical = this.checkIfVertical();
-            let sytle = isVertical ? 'border-top-width:1px;height:' + buttonSize : 'border-left-width:1px;width:' + buttonSize;
-            
+            let sytle = "border: 0 solid rgba(" + rgb + ", .2);"
+            sytle += isVertical ? 'border-top-width:1px;height:' + buttonSize : 'border-left-width:1px;width:' + buttonSize;
+
             this._showDesktopButton.set_style(sytle);
             this._showDesktopButton[(isVertical ? 'x' : 'y') + '_expand'] = true;
         }
     },
 
+    // _getBackgroundBrightness: return true if panel has a bright background color
+    _getBackgroundBrightness: function() {
+        let rgb = this.dynamicTransparency.currentBackgroundColor;
+        rgb = rgb.substring(5, rgb.length-3).split(',');
+
+        let brightness = 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
+
+        return (brightness > 128) ? true : false;
+    },
+
     _toggleWorkspaceWindows: function(hide, workspace) {
         let tweenOpts = {
             opacity: hide ? 0 : 255,
diff --git a/stylesheet.css b/stylesheet.css
index 126789e..84f664a 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -114,12 +114,12 @@
 	spacing: 0px; 
 }
 
-.showdesktop-button {
-	border: 0 solid rgba(200, 200, 200, .2);
+.showdesktop-button-dark-hovered {
+	background-color: rgba(200, 200, 200, .4);
 }
 
-.showdesktop-button-hovered {
-	background-color: rgba(200, 200, 200, .4);
+.showdesktop-button-light-hovered {
+	background-color: rgba(55, 55, 55, .4);
 }
 
 .panel-corner.hidden:active, .panel-corner.hidden:overview, .panel-corner.hidden:focus {