From 29abe550089b8f3b2986120bdc9c1a123187b56d Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Sat, 20 Jul 2024 00:32:54 -0700
Subject: [PATCH] Finish all theming options

---
 modules/menus/dashboard/directories/index.js |  12 +-
 options.ts                                   | 108 +++++----------
 scss/style/menus/dashboard.scss              | 133 ++++++++++---------
 scss/style/menus/media.scss                  |  28 ++--
 scss/style/menus/notifications.scss          |  49 +++++--
 scss/style/notifications/popups.scss         |  22 +--
 scss/variables.scss                          |  68 ++++------
 7 files changed, 194 insertions(+), 226 deletions(-)

diff --git a/modules/menus/dashboard/directories/index.js b/modules/menus/dashboard/directories/index.js
index e3088ef..572fadd 100644
--- a/modules/menus/dashboard/directories/index.js
+++ b/modules/menus/dashboard/directories/index.js
@@ -17,7 +17,7 @@ const Directories = () => {
           Widget.Button({
             hpack: "start",
             expand: true,
-            class_name: "directory-link downloads",
+            class_name: "directory-link left top",
             on_primary_click: () => {
               App.closeWindow("dashboardmenu");
               Utils.execAsync(`dolphin ${homeDir}/Downloads`).catch(
@@ -32,7 +32,7 @@ const Directories = () => {
           Widget.Button({
             expand: true,
             hpack: "start",
-            class_name: "directory-link videos",
+            class_name: "directory-link left middle",
             on_primary_click: () => {
               App.closeWindow("dashboardmenu");
               Utils.execAsync(`dolphin ${homeDir}/Videos`).catch(
@@ -47,7 +47,7 @@ const Directories = () => {
           Widget.Button({
             expand: true,
             hpack: "start",
-            class_name: "directory-link projects",
+            class_name: "directory-link left bottom",
             on_primary_click: () => {
               App.closeWindow("dashboardmenu");
               Utils.execAsync(`dolphin ${homeDir}/Projects`).catch(
@@ -69,7 +69,7 @@ const Directories = () => {
           Widget.Button({
             hpack: "start",
             expand: true,
-            class_name: "directory-link documents",
+            class_name: "directory-link right top",
             on_primary_click: () => {
               App.closeWindow("dashboardmenu");
               Utils.execAsync(`dolphin ${homeDir}/Documents`).catch(
@@ -84,7 +84,7 @@ const Directories = () => {
           Widget.Button({
             expand: true,
             hpack: "start",
-            class_name: "directory-link pictures",
+            class_name: "directory-link right middle",
             on_primary_click: () => {
               App.closeWindow("dashboardmenu");
               Utils.execAsync(`dolphin ${homeDir}/Pictures`).catch(
@@ -99,7 +99,7 @@ const Directories = () => {
           Widget.Button({
             expand: true,
             hpack: "start",
-            class_name: "directory-link home",
+            class_name: "directory-link right bottom",
             on_primary_click: () => {
               App.closeWindow("dashboardmenu");
               Utils.execAsync(`dolphin ${homeDir}/`).catch(
diff --git a/options.ts b/options.ts
index 004a045..063aa8f 100644
--- a/options.ts
+++ b/options.ts
@@ -37,17 +37,21 @@ const options = mkOptions(OPTIONS, {
     autotheme: opt(false),
     theme: {
         notification: {
-            background: opt(colors.base),
+            background: opt(colors.mantle),
             actions: {
                 background: opt(colors.surface0),
                 hover: opt(colors.surface1),
                 text: opt(colors.mantle),
             },
             label: opt(colors.lavender),
-            date: opt(colors.overlay1),
+            border: opt(colors.surface0),
+            time: opt(colors.overlay1),
             text: opt(colors.text),
             labelicon: opt(colors.lavender),
-            close: opt(colors.red)
+            close_button: {
+                background: opt(colors.red),
+                label: opt(colors.crust)
+            }
         },
         bar: {
             transparent: opt(false),
@@ -134,6 +138,7 @@ const options = mkOptions(OPTIONS, {
                 border: opt(colors.surface0),
                 text: opt(colors.text),
                 dimtext: opt(colors.surface2),
+                feinttext: opt(colors.surface0),
                 label: opt(colors.lavender),
                 listitems: {
                     passive: opt(colors.text),
@@ -150,6 +155,8 @@ const options = mkOptions(OPTIONS, {
                 },
                 buttons: {
                     default: opt(colors.lavender),
+                    active: opt(colors.pink),
+                    disabled: opt(colors.surface2),
                     text: opt(colors.crust)
                 },
                 iconbuttons: {
@@ -166,7 +173,10 @@ const options = mkOptions(OPTIONS, {
                     occupied: opt(colors.flamingo),
                     active: opt(colors.pink),
                 },
-                progressbar: opt(colors.lavender),
+                progressbar: {
+                    foreground: opt(colors.lavender),
+                    background: opt(colors.surface1),
+                },
                 slider: {
                     primary: opt(colors.lavender),
                     background: opt(colors.surface2),
@@ -184,39 +194,14 @@ const options = mkOptions(OPTIONS, {
                 },
                 menu: {
                     media: {
-                        song: opt(colors.base2),
-                        artist: opt(colors.base2),
-                        album: opt(colors.base2),
+                        song: opt(colors.lavender),
+                        artist: opt(colors.teal),
+                        album: opt(colors.pink),
                         buttons: {
-                            inactive: {
-                                background: opt(colors.surface2),
-                                text: opt(colors.crust)
-                            },
-                            shuffle: {
-                                background: opt(colors.lavender),
-                                active: opt(colors.pink),
-                                text: opt(colors.crust)
-                            },
-                            previous: {
-                                background: opt(colors.lavender),
-                                text: opt(colors.crust)
-                            },
-                            playpause: {
-                                background: opt(colors.lavender),
-                                text: opt(colors.crust)
-
-                            },
-                            next: {
-                                background: opt(colors.lavender),
-                                text: opt(colors.crust)
-
-                            },
-                            loop: {
-                                background: opt(colors.lavender),
-                                active: opt(colors.pink),
-                                text: opt(colors.crust)
-
-                            }
+                            inactive: opt(colors.surface2),
+                            enabled: opt(colors.teal),
+                            background: opt(colors.lavender),
+                            text: opt(colors.crust),
                         },
                         slider: {
                             primary: opt(colors.pink),
@@ -438,44 +423,13 @@ const options = mkOptions(OPTIONS, {
                                 deny: opt(colors.red),
                             }
                         },
-                        shortcuts_left: {
-                            shortcut1: {
-                                background: opt(colors.lavender),
-                                text: opt(colors.crust),
-                            },
-                            shortcut2: {
-                                background: opt(colors.lavender),
-                                text: opt(colors.crust),
-                            },
-                            shortcut3: {
-                                background: opt(colors.lavender),
-                                text: opt(colors.crust),
-                            },
-                            shortcut4: {
-                                background: opt(colors.lavender),
-                                text: opt(colors.crust),
-                            },
-                        },
-                        shortcuts_right: {
-                            shortcut1: {
-                                background: opt(colors.lavender),
-                                text: opt(colors.crust),
-                            },
-                            shortcut2: {
-                                background: opt(colors.lavender),
-                                text: opt(colors.crust),
-                            },
-                            shortcut3: {
-                                background: opt(colors.lavender),
-                                text: opt(colors.crust),
-                            },
-                            shortcut4: {
-                                background: opt(colors.lavender),
-                                text: opt(colors.crust),
-                            },
+                        shortcuts: {
+                            background: opt(colors.lavender),
+                            text: opt(colors.crust),
+                            recording: opt(colors.green)
                         },
                         controls: {
-                            disabled: (colors.surface2),
+                            disabled: opt(colors.surface2),
                             wifi: {
                                 background: opt(colors.mauve),
                                 text: opt(colors.crust),
@@ -522,6 +476,7 @@ const options = mkOptions(OPTIONS, {
                             }
                         },
                         monitors: {
+                            bar_background: opt(colors.surface1),
                             cpu: {
                                 icon: opt(colors.maroon),
                                 bar: opt(colors.maroon),
@@ -542,22 +497,21 @@ const options = mkOptions(OPTIONS, {
                                 bar: opt(colors.pink),
                                 label: opt(colors.pink),
                             },
-                        }
+                        },
                     },
                     notifications: {
+                        label: opt(colors.lavender),
+                        no_notifications_label: opt(colors.surface0),
                         background: opt(colors.mantle),
                         card: opt(colors.base),
                         border: opt(colors.surface0),
                         switch_divider: opt(colors.surface1),
+                        clear: opt(colors.red),
                         switch: {
                             enabled: opt(colors.lavender),
                             disabled: opt(colors.surface0),
                             puck: opt(colors.overlay0)
                         },
-                        clear: {
-                            background: opt(colors.red),
-                            font: opt(colors.crust)
-                        }
                     },
                 }
             }
diff --git a/scss/style/menus/dashboard.scss b/scss/style/menus/dashboard.scss
index e01702b..c57ebcb 100644
--- a/scss/style/menus/dashboard.scss
+++ b/scss/style/menus/dashboard.scss
@@ -3,8 +3,8 @@
 .dashboard-content-items {
     margin-left: 0.50em;
     min-width: 28.5em;
-    background: $crust;
-    border: 0.13em solid $surface0;
+    background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-dashboard-background);
+    border: 0.13em solid if($bar-menus-monochrome, $bar-menus-border, $bar-menus-menu-dashboard-border-color);
     border-radius: 0.7em;
 
     button {
@@ -12,7 +12,7 @@
     }
 
     .dashboard-card {
-        background: $base;
+        background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-card-color);
         margin: 1.3em;
         border-radius: 0.4em;
         padding: 1.5em;
@@ -26,7 +26,7 @@
         }
         .profile-name {
             font-size: 1.5em;
-            color: $pink;
+            color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-profile-name);
             margin-top: 0.75em;
         }
     }
@@ -49,20 +49,31 @@
             }
 
             &.shutdown {
-                background: $red;
+                background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-shutdown);
             }
             &.restart {
-                background: $peach;
+                background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-restart);
             }
             &.lock {
-                background: $green;
+                background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-logout);
             }
             &.sleep {
-                background: $sky;
+                background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-sleep);
             }
 
             &:hover {
-                background: $mauve;
+                &.shutdown {
+                    background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-shutdown), 0.5);
+                }
+                &.restart {
+                    background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-restart), 0.5);
+                }
+                &.lock {
+                    background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-logout), 0.5);
+                }
+                &.sleep {
+                    background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-sleep), 0.5);
+                }
             }
 
         }
@@ -97,8 +108,8 @@
             }
 
             button {
-                background: $lavender;
-                color: $base;
+                background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-shortcuts-background);
+                color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text);
                 min-height: 3em;
 
                 &.discord {
@@ -112,15 +123,15 @@
                 }
 
                 &.record.active {
-                    background: $green;
+                    background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-shortcuts-recording);
 
                     &:hover {
-                        background: $red;
+                        background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-shortcuts-recording), 0.5);
                     }
                 }
 
                 &:hover {
-                    background: $pink;
+                    background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-shortcuts-background), 0.5);
                 }
             }
         }
@@ -133,12 +144,11 @@
         }
 
         button {
-            background: $red;
             padding: 0em;
             min-height: 3em;
 
             label {
-                color: $base;
+                color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-controls-wifi-text);
                 font-size: 1.6em;
             }
 
@@ -147,54 +157,51 @@
             }
 
             &.wifi {
-                background: $mauve;
+                background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background);
             }
             &.bluetooth {
-                background: $sky;
+                background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background);
             }
             &.notifications {
-                background: $yellow;
+                background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background);
             }
             &.playback {
-                background: $maroon;
+                background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background);
             }
             &.input {
-                background: $pink;
+                background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background);
             }
             &.wifi:hover {
-                background: transparentize($mauve, 0.7);
+                background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background), 0.5);
             }
             &.bluetooth:hover {
-                background: transparentize($sky, 0.7);
+                background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background), 0.5);
             }
             &.notifications:hover {
-                background: transparentize($yellow, 0.7);
+                background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background), 0.5);
             }
             &.playback:hover {
-                background: transparentize($maroon, 0.7);
+                background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background), 0.5);
             }
             &.input:hover {
-                background: transparentize($pink, 0.7);
-            }
-            &:hover {
-                background: $surface1;
+                background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background), 0.5);
             }
             &.disabled {
-                background: $surface2;
+                background: if($bar-menus-monochrome, $bar-menus-buttons-disabled, $bar-menus-menu-dashboard-controls-disabled);
                 &.wifi:hover {
-                    background: transparentize($mauve, 0.7);
+                    background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background), 0.5);
                 }
                 &.bluetooth:hover {
-                    background: transparentize($sky, 0.7);
+                    background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background), 0.5);
                 }
                 &.notifications:hover {
-                    background: transparentize($yellow, 0.7);
+                    background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background), 0.5);
                 }
                 &.playback:hover {
-                    background: transparentize($maroon, 0.7);
+                    background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background), 0.5);
                 }
                 &.input:hover {
-                    background: transparentize($pink, 0.7);
+                    background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background), 0.5);
                 }
             }
         }
@@ -220,23 +227,23 @@
                 font-size: 1.3em;
             }
 
-            &.documents {
-                color: $teal;
+            &.right.top {
+                color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-top-color);
             }
-            &.downloads {
-                color: $pink;
+            &.right.middle {
+                color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-middle-color);
             }
-            &.home {
-                color: $lavender;
+            &.right.bottom {
+                color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-bottom-color);
             }
-            &.pictures {
-                color: $mauve;
+            &.left.top {
+                color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-top-color);
             }
-            &.videos {
-                color: $yellow;
+            &.left.middle {
+                color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-middle-color);
             }
-            &.projects {
-                color: $maroon;
+            &.left.bottom {
+                color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-bottom-color);
             }
 
             &:hover {
@@ -255,16 +262,16 @@
             }
 
             &.cpu label{
-                color: $maroon;
+                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-cpu-icon);
             }
             &.ram label{
-                color: $yellow;
+                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-ram-icon);
             }
             &.gpu label{
-                color: $green;
+                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-gpu-icon);
             }
             &.storage label{
-                color: $pink;
+                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-disk-icon);
             }
 
             .stats-bar {
@@ -280,7 +287,7 @@
                     border-radius: 0.4em;
 
                     &.empty {
-                        background: $surface1;
+                        background: if($bar-menus-monochrome, $bar-menus-progressbar-background, $bar-menus-menu-dashboard-monitors-bar_background);
                     }
 
                     &.filled {
@@ -290,19 +297,19 @@
             }
 
             &.cpu .stats-bar block.filled {
-                background: $maroon;
+                background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-cpu-bar);
             }
 
             &.ram .stats-bar block.filled {
-                background: $yellow;
+                background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-ram-bar);
             }
 
             &.gpu .stats-bar block.filled {
-                background: $green;
+                background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-gpu-bar);
             }
 
             &.storage .stats-bar block.filled {
-                background: $pink;
+                background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-disk-bar);
             }
         }
 
@@ -310,19 +317,19 @@
             margin-bottom: 0.75em;
             font-size: 0.9em;
             &.cpu {
-                color: $maroon;
+                color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-cpu-label);
             }
 
             &.ram {
-                color: $yellow;
+                color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-ram-label);
             }
 
             &.gpu {
-                color: $green;
+                color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-gpu-label);
             }
 
             &.storage {
-                color: $pink;
+                color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-disk-label);
             }
         }
     }
@@ -330,9 +337,5 @@
 
 .dropdown.recording {
     color: red;
-    background-color: $crust;
-
-    menuitem {
-
-    }
+    background-color: if($bar-menus-monochrome, $bar-menus-dropdownmenu-background, $bar-menus-dropdownmenu-background);
 }
diff --git a/scss/style/menus/media.scss b/scss/style/menus/media.scss
index 2603284..fde10b8 100644
--- a/scss/style/menus/media.scss
+++ b/scss/style/menus/media.scss
@@ -32,17 +32,17 @@
   }
 
   .media-indicator-current-song-name-label {
-    color: $lavender;
+    color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-song);
     font-size: 1.35em;
   }
 
   .media-indicator-current-song-author-label {
-    color: $teal;
+    color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-artist);
     font-size: 1em;
   }
 
   .media-indicator-current-song-album-label {
-    color: $pink;
+    color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-album);
     font-size: 1em;
   }
 
@@ -56,25 +56,29 @@
   }
 
   .media-indicator-control-button {
-    background: $lavender;
-    color: $crust;
+    background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background);
+    color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-media-buttons-text);
     min-height: 1.8em;
     min-width: 2.5em;
     border-radius: 0.2rem;
 
     &.disabled {
-      background: $surface2;
+      background: if($bar-menus-monochrome, $bar-menus-buttons-disabled, $bar-menus-menu-media-buttons-inactive);
     }
 
     &.enabled {
-      background: $lavender;
+      background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background);
 
       &:hover {
-        background: $pink;
+        background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background), 0.5);
       }
 
       &.active {
-        background: $green;
+        background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-enabled);
+
+        &:hover {
+          background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-enabled), 0.5);
+        }
       }
     }
 
@@ -89,20 +93,20 @@
     margin-bottom: 1em;
 
     trough {
-      background: $surface2;
+      background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-media-slider-background);
       border-radius: 0.2em;
 
       highlight,
       progress {
         border-radius: 0.2em;
         min-height: .85em;
-        background: $pink;
+        background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-media-slider-primary);
       }
     }
 
     &:hover {
       trough {
-        background: $surface1;
+        background: transparentize(if($bar-menus-monochrome, $bar-menus-slider-backgroundhover, $bar-menus-menu-media-slider-backgroundhover), 0.3);
       }
     }
   }
diff --git a/scss/style/menus/notifications.scss b/scss/style/menus/notifications.scss
index 3e6cb02..32e513b 100644
--- a/scss/style/menus/notifications.scss
+++ b/scss/style/menus/notifications.scss
@@ -1,11 +1,12 @@
 @import "../colors";
+@import '../../variables';
 
 .notification-card-container.menu {
   margin: 0em;
   min-width: 30.5em;
   min-height: 48em;
   background: $crust;
-  border: 0.13em solid $surface0;
+  border: 0.13em solid $notification-border;
   border-radius: 0.7em;
   margin-right: 0.45em;
 
@@ -20,7 +21,7 @@
   }
 
   .notification-menu-controls {
-    background: $base;
+    background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-notifications-card);
     margin: 1em 1em;
     margin-bottom: 0.5em;
     border-radius: 0.4em;
@@ -28,9 +29,9 @@
   }
 
   .notification-card.menu {
-    background: $base;
+    background: $notification-background;
     min-width: 26.2em;
-    border: 0.15em solid $base;
+    border: 0.15em solid $notification-border;
     border-radius: 0em;
     border-bottom-left-radius: 0.4em;
     border-top-left-radius: 0.4em;
@@ -49,18 +50,38 @@
 
   .menu-label.notifications {
     margin: 0em;
-    color: $lavender;
+    color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-notifications-label);
   }
 
   .menu-separator.notification-controls {
     min-width: 0.1em;
-    background-color: $surface0;
+    background-color: if($bar-menus-monochrome, $bar-menus-dropdownmenu-divider, $bar-menus-menu-notifications-switch_divider);
     margin: 0em 1em;
   }
 
-  .menu-switch.notifications:checked {
+  .menu-switch.notifications {
+    background-color: if($bar-menus-monochrome, $bar-menus-switch-disabled, $bar-menus-menu-notifications-switch-disabled);
+
     &:checked {
-      background: $lavender;
+      background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-notifications-switch-enabled);
+    }
+
+    slider {
+      background-color: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-notifications-switch-puck);
+    }
+
+    &:hover {
+      trough {
+        background: if($bar-menus-monochrome, $bar-menus-switch-disabled, $bar-menus-menu-notifications-switch-disabled);
+      }
+
+      slider {
+        background: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-notifications-switch-puck);
+      }
+    }
+
+    &:active {
+      background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-notifications-switch-enabled);
     }
   }
 
@@ -68,12 +89,12 @@
     margin-right: 0.3em;
 
     &:hover label {
-      color: $maroon;
+      color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear), 0.5);
     }
   }
 
   .clear-notifications-label {
-    color: $red;
+    color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear);
     font-size: 1.5em;
   }
 }
@@ -82,7 +103,7 @@
   margin-bottom: 8em;
 
   label {
-    color: $surface0;
+    color: if($bar-menus-monochrome, $bar-menus-feinttext, $bar-menus-menu-notifications-no_notifications_label);
   }
 
   .bell {
@@ -94,8 +115,8 @@
 }
 
 .close-notification-button.menu {
-  background: $red;
-  color: $crust;
+  background: $notification-close_button-background;
+  color: $notification-close_button-label;
   min-width: 2.1em;
   border-radius: 0rem 0.35em 0.35em 0em;
 
@@ -104,6 +125,6 @@
   }
 
   &:hover {
-    background: $maroon;
+    background: transparentize($notification-close_button-background ,0.5);
   }
 }
diff --git a/scss/style/notifications/popups.scss b/scss/style/notifications/popups.scss
index 21c84e3..5a62da3 100644
--- a/scss/style/notifications/popups.scss
+++ b/scss/style/notifications/popups.scss
@@ -4,10 +4,10 @@
 }
 
 .notification-card {
-  color: $text;
-  background: $mantle;
+  color: $notification-text;
+  background: $notification-background;
   margin-right: 0.45em;
-  border: 0.15em solid transparentize($surface0, 0.5); 
+  border: 0.15em solid transparentize($notification-border, 0.5); 
   min-width: 26em;
   min-height: 6rem;
   border-radius: 0.6em;
@@ -66,8 +66,8 @@
 }
 
 .notification-action-buttons {
-  color: $lavender;
-  background: $surface0;
+  color: $notification-actions-text;
+  background: $notification-actions-background;
   min-width: 4em;
   min-height: 1.65em;
   border-radius: 0.2em;
@@ -77,12 +77,12 @@
   }
 
   &:hover {
-    background: $surface1;
+    background: $notification-actions-hover;
   }
 }
 
 .notification-icon {
-  color: $lavender;
+  color: $notification-labelicon;
   margin-bottom: 0.4em;
   min-width: 1em;
   min-height: 1em;
@@ -91,12 +91,12 @@
 
 .notification-time {
   font-size: 0.85em;
-  color: $overlay1;
+  color: $notification-time;
 }
 
 .close-notification-button {
-  background: $red;
-  color: $crust;
+  background: $notification-close_button-background;
+  color: $notification-close_button-label;
   min-width: 2.1em;
   border-radius: 0rem 0.35em 0.35em 0em;
 
@@ -105,6 +105,6 @@
   }
 
   &:hover {
-    background: $maroon;
+    background: transparentize($notification-close_button-background, 0.5);
   }
 }
diff --git a/scss/variables.scss b/scss/variables.scss
index 19423be..d818205 100644
--- a/scss/variables.scss
+++ b/scss/variables.scss
@@ -1,12 +1,14 @@
-$notification-background: #1e1e2e;
+$notification-background: #181825;
 $notification-actions-background: #313244;
 $notification-actions-hover: #45475a;
 $notification-actions-text: #181825;
 $notification-label: #b4befe;
-$notification-date: #7f849c;
+$notification-border: #313244;
+$notification-time: #7f849c;
 $notification-text: #cdd6f4;
 $notification-labelicon: #b4befe;
-$notification-close: #f38ba8;
+$notification-close_button-background: #f38ba8;
+$notification-close_button-label: #11111b;
 $bar-transparent: false;
 $bar-background: #11111b;
 $bar-buttons-monochrome: false;
@@ -58,12 +60,13 @@ $bar-buttons-clock-icon: #f5c2e7;
 $bar-buttons-notifications-background: #242438;
 $bar-buttons-notifications-hover: #45475a;
 $bar-buttons-notifications-icon: #b4befe;
-$bar-menus-monochrome: true;
+$bar-menus-monochrome: false;
 $bar-menus-background: #11111b;
 $bar-menus-cards: #1e1e2e;
 $bar-menus-border: #313244;
 $bar-menus-text: #cdd6f4;
 $bar-menus-dimtext: #585b70;
+$bar-menus-feinttext: #313244;
 $bar-menus-label: #b4befe;
 $bar-menus-listitems-passive: #cdd6f4;
 $bar-menus-listitems-active: #b4befe;
@@ -73,6 +76,8 @@ $bar-menus-switch-enabled: #b4befe;
 $bar-menus-switch-disabled: #313244;
 $bar-menus-switch-puck: #6c7086;
 $bar-menus-buttons-default: #b4befe;
+$bar-menus-buttons-active: #f5c2e7;
+$bar-menus-buttons-disabled: #585b70;
 $bar-menus-buttons-text: #11111b;
 $bar-menus-iconbuttons-passive: #cdd6f4;
 $bar-menus-iconbuttons-active: #b4befe;
@@ -82,7 +87,8 @@ $bar-menus-workspaces-background: #242438;
 $bar-menus-workspaces-available: #89dceb;
 $bar-menus-workspaces-occupied: #f2cdcd;
 $bar-menus-workspaces-active: #f5c2e7;
-$bar-menus-progressbar: #b4befe;
+$bar-menus-progressbar-foreground: #b4befe;
+$bar-menus-progressbar-background: #45475a;
 $bar-menus-slider-primary: #b4befe;
 $bar-menus-slider-background: #585b70;
 $bar-menus-slider-backgroundhover: #45475a;
@@ -92,23 +98,13 @@ $bar-menus-dropdownmenu-text: #cdd6f4;
 $bar-menus-dropdownmenu-divider: #1e1e2e;
 $bar-menus-tooltip-background: #11111b;
 $bar-menus-tooltip-text: #cdd6f4;
-$bar-menus-menu-media-song: #242438;
-$bar-menus-menu-media-artist: #242438;
-$bar-menus-menu-media-album: #242438;
-$bar-menus-menu-media-buttons-inactive-background: #585b70;
-$bar-menus-menu-media-buttons-inactive-text: #11111b;
-$bar-menus-menu-media-buttons-shuffle-background: #b4befe;
-$bar-menus-menu-media-buttons-shuffle-active: #f5c2e7;
-$bar-menus-menu-media-buttons-shuffle-text: #11111b;
-$bar-menus-menu-media-buttons-previous-background: #b4befe;
-$bar-menus-menu-media-buttons-previous-text: #11111b;
-$bar-menus-menu-media-buttons-playpause-background: #b4befe;
-$bar-menus-menu-media-buttons-playpause-text: #11111b;
-$bar-menus-menu-media-buttons-next-background: #b4befe;
-$bar-menus-menu-media-buttons-next-text: #11111b;
-$bar-menus-menu-media-buttons-loop-background: #b4befe;
-$bar-menus-menu-media-buttons-loop-active: #f5c2e7;
-$bar-menus-menu-media-buttons-loop-text: #11111b;
+$bar-menus-menu-media-song: #b4befe;
+$bar-menus-menu-media-artist: #94e2d5;
+$bar-menus-menu-media-album: #f5c2e7;
+$bar-menus-menu-media-buttons-inactive: #585b70;
+$bar-menus-menu-media-buttons-enabled: #94e2d5;
+$bar-menus-menu-media-buttons-background: #b4befe;
+$bar-menus-menu-media-buttons-text: #11111b;
 $bar-menus-menu-media-slider-primary: #f5c2e7;
 $bar-menus-menu-media-slider-background: #585b70;
 $bar-menus-menu-media-slider-backgroundhover: #45475a;
@@ -217,22 +213,10 @@ $bar-menus-menu-dashboard-powermenu-confirmation-label: #a6e3a1;
 $bar-menus-menu-dashboard-powermenu-confirmation-body: #cdd6f4;
 $bar-menus-menu-dashboard-powermenu-confirmation-confirm: #a6e3a1;
 $bar-menus-menu-dashboard-powermenu-confirmation-deny: #f38ba8;
-$bar-menus-menu-dashboard-shortcuts_left-shortcut1-background: #b4befe;
-$bar-menus-menu-dashboard-shortcuts_left-shortcut1-text: #11111b;
-$bar-menus-menu-dashboard-shortcuts_left-shortcut2-background: #b4befe;
-$bar-menus-menu-dashboard-shortcuts_left-shortcut2-text: #11111b;
-$bar-menus-menu-dashboard-shortcuts_left-shortcut3-background: #b4befe;
-$bar-menus-menu-dashboard-shortcuts_left-shortcut3-text: #11111b;
-$bar-menus-menu-dashboard-shortcuts_left-shortcut4-background: #b4befe;
-$bar-menus-menu-dashboard-shortcuts_left-shortcut4-text: #11111b;
-$bar-menus-menu-dashboard-shortcuts_right-shortcut1-background: #b4befe;
-$bar-menus-menu-dashboard-shortcuts_right-shortcut1-text: #11111b;
-$bar-menus-menu-dashboard-shortcuts_right-shortcut2-background: #b4befe;
-$bar-menus-menu-dashboard-shortcuts_right-shortcut2-text: #11111b;
-$bar-menus-menu-dashboard-shortcuts_right-shortcut3-background: #b4befe;
-$bar-menus-menu-dashboard-shortcuts_right-shortcut3-text: #11111b;
-$bar-menus-menu-dashboard-shortcuts_right-shortcut4-background: #b4befe;
-$bar-menus-menu-dashboard-shortcuts_right-shortcut4-text: #11111b;
+$bar-menus-menu-dashboard-shortcuts-background: #b4befe;
+$bar-menus-menu-dashboard-shortcuts-text: #11111b;
+$bar-menus-menu-dashboard-shortcuts-recording: #a6e3a1;
+$bar-menus-menu-dashboard-controls-disabled: #585b70;
 $bar-menus-menu-dashboard-controls-wifi-background: #cba6f7;
 $bar-menus-menu-dashboard-controls-wifi-text: #11111b;
 $bar-menus-menu-dashboard-controls-bluetooth-background: #89dceb;
@@ -249,6 +233,7 @@ $bar-menus-menu-dashboard-directories-left-bottom-color: #eba0ac;
 $bar-menus-menu-dashboard-directories-right-top-color: #94e2d5;
 $bar-menus-menu-dashboard-directories-right-middle-color: #cba6f7;
 $bar-menus-menu-dashboard-directories-right-bottom-color: #b4befe;
+$bar-menus-menu-dashboard-monitors-bar_background: #45475a;
 $bar-menus-menu-dashboard-monitors-cpu-icon: #eba0ac;
 $bar-menus-menu-dashboard-monitors-cpu-bar: #eba0ac;
 $bar-menus-menu-dashboard-monitors-cpu-label: #eba0ac;
@@ -261,12 +246,13 @@ $bar-menus-menu-dashboard-monitors-gpu-label: #a6e3a1;
 $bar-menus-menu-dashboard-monitors-disk-icon: #f5c2e7;
 $bar-menus-menu-dashboard-monitors-disk-bar: #f5c2e7;
 $bar-menus-menu-dashboard-monitors-disk-label: #f5c2e7;
+$bar-menus-menu-notifications-label: #b4befe;
+$bar-menus-menu-notifications-no_notifications_label: #313244;
 $bar-menus-menu-notifications-background: #181825;
 $bar-menus-menu-notifications-card: #1e1e2e;
 $bar-menus-menu-notifications-border: #313244;
 $bar-menus-menu-notifications-switch_divider: #45475a;
+$bar-menus-menu-notifications-clear: #f38ba8;
 $bar-menus-menu-notifications-switch-enabled: #b4befe;
 $bar-menus-menu-notifications-switch-disabled: #313244;
-$bar-menus-menu-notifications-switch-puck: #6c7086;
-$bar-menus-menu-notifications-clear-background: #f38ba8;
-$bar-menus-menu-notifications-clear-font: #11111b;
\ No newline at end of file
+$bar-menus-menu-notifications-switch-puck: #6c7086;
\ No newline at end of file