fix(systray): use dracula css for systray menus

config/ags/js/bar/systray.js

@@ -27,10 +27,12 @@ export const SysTray = Revealer({
     rev.revealChild = rev.child.children[0].get_children().length > 0;
   }]],
   child: Box({
+    children: [
+      Box({
+        className: 'sys-tray',
         children: [
           Widget({
             type: Gtk.MenuBar,
-        className: 'sys-tray',
             properties: [
               ['items', new Map()],
               ['onAdded', (box, id) => {
@@ -61,6 +63,8 @@ export const SysTray = Revealer({
               [SystemTray, (box, id) => box._onRemoved(box, id), 'removed'],
             ],
           }),
+        ],
+      }),
       Separator(12),
     ],
   }),

config/ags/scss/main.scss

@@ -1,4 +1,9 @@
-* {
+window,
+button,
+eventbox,
+box,
+progressbar,
+trough {
   all: unset;
 }
 

config/ags/scss/widgets/systray.scss

@@ -1,45 +1,25 @@
 .sys-tray {
   padding: 5px;
   background-color: $bg;
-  color: #CBA6F7;
   border-radius: 80px;
   border: 2px solid $bgSecondary;
   transition: background-color 0.5s ease-in-out,
               border 0.5s ease-in-out;
 
   .tray-item {
-    all: unset;
+    image { color: #CBA6F7; }
     padding: 0px 2px 0px 2px;
-    font-size: 25px;
     border-radius: 100%;
-    transition: background-color 0.5s ease-in-out,
-                border 0.5s ease-in-out;
+    transition: all 0.5s ease-in-out;
+
     &:hover {
-      background: rgba(127, 132, 156, 0.4);
       border-radius: 100%;
-      transition: background-color 0.5s ease-in-out,
-                  border 0.5s ease-in-out;
-    }
+      transition: all 0.5s ease-in-out;
     }
 
-  menu {
-    background: $bgfull;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    border: 2px solid #1b1b1b;
+    * {
+      font-size: 25px;
       border-radius: 10px;
-
-    check {
-      color: white;
-      margin-left: 2px;
-      margin-right: 5px;
-      min-height: 20px;
-      min-width: 20px;
-      -gtk-icon-source: -gtk-icontheme('checkbox-symbolic');
-
-      &:checked {
-        -gtk-icon-source: -gtk-icontheme('checkbox-checked-symbolic');
-      }
     }
   }
 

config/ags/style.css

@@ -1,4 +1,9 @@
-* {
+window,
+button,
+eventbox,
+box,
+progressbar,
+trough {
   all: unset; }
 
 .powermenu {
@@ -144,35 +149,21 @@ tooltip {
 .sys-tray {
   padding: 5px;
   background-color: rgba(40, 42, 54, 0.8);
-  color: #CBA6F7;
   border-radius: 80px;
   border: 2px solid rgba(56, 44, 74, 0.8);
   transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; }
   .sys-tray .tray-item {
-    all: unset;
     padding: 0px 2px 0px 2px;
-    font-size: 25px;
     border-radius: 100%;
-    transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; }
+    transition: all 0.5s ease-in-out; }
+    .sys-tray .tray-item image {
+      color: #CBA6F7; }
     .sys-tray .tray-item:hover {
-      background: rgba(127, 132, 156, 0.4);
       border-radius: 100%;
-      transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; }
-  .sys-tray menu {
-    background: #282a36;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    border: 2px solid #1b1b1b;
+      transition: all 0.5s ease-in-out; }
+    .sys-tray .tray-item * {
+      font-size: 25px;
       border-radius: 10px; }
-    .sys-tray menu check {
-      color: white;
-      margin-left: 2px;
-      margin-right: 5px;
-      min-height: 20px;
-      min-width: 20px;
-      -gtk-icon-source: -gtk-icontheme("checkbox-symbolic"); }
-      .sys-tray menu check:checked {
-        -gtk-icon-source: -gtk-icontheme("checkbox-checked-symbolic"); }
   .sys-tray menuitem:not(.tray-item) {
     padding: 5px;
     transition: all 0.2s ease-in-out; }