Improve background contrast with panel

fflewddur · Feb 22, 2025 · 5a205e6 · 5a205e6
1 parent b81fdbc
commit 5a205e6
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/resources/stylesheet.css b/resources/stylesheet.css
@@ -55,17 +55,21 @@
 }
 
 .tophat-meter {
-  background-color: rgba(10, 10, 10, 0.2);
-  height: 1.2em;
+  background-color: rgba(100, 100, 100, 0.2);
+  height: 1.3em;
   margin: 0;
   padding: 0;
   border-radius: 2px;
 }
 
+.transparent-meter {
+  background-color: rgba(10, 10, 10, 0.3);
+}
+
 .meter-bar {
   margin: 0 1px 0 0;
   padding: 0;
-  border-radius: 2px;
+  /* border-radius: 2px; */
 }
 
 .meter-bar:last-child {

diff --git a/src/monitor.ts b/src/monitor.ts
@@ -115,6 +115,7 @@ export const TopHatMonitor = GObject.registerClass(
     protected themeContextChanged;
     protected vitals?: Vitals;
     protected vitalsSignals;
+    private panelStyleChanged;
 
     constructor(
       nameText: string,
@@ -150,6 +151,18 @@ export const TopHatMonitor = GObject.registerClass(
         x_expand: true,
       });
 
+      this.panelStyleChanged = Main.panel.connect('style-changed', (p) => {
+        if (p.has_style_class_name('transparent-top-bar')) {
+          if (this.meter) {
+            this.meter.add_style_class_name('transparent-meter');
+          }
+        } else {
+          if (this.meter) {
+            this.meter.remove_style_class_name('transparent-meter');
+          }
+        }
+      });
+
       this.gsettings.bind(
         'show-icons',
         this.icon,
@@ -317,6 +330,10 @@ export const TopHatMonitor = GObject.registerClass(
         this.vitals?.disconnect(id);
       }
       this.vitalsSignals.length = 0;
+      if (this.panelStyleChanged > 0) {
+        Main.panel.disconnect(this.panelStyleChanged);
+        this.panelStyleChanged = 0;
+      }
       this.meter.destroy();
       this.box.destroy();
       this.themeContext.disconnect(this.themeContextChanged);