diff --git a/docs/colors/global-variables.md b/docs/colors/global-variables.md
index 5b2d817..ceaaece 100644
--- a/docs/colors/global-variables.md
+++ b/docs/colors/global-variables.md
@@ -30,11 +30,12 @@ Background colors.
 
 Border colors.
 
-| Color | Usage |
-|-------|-------|
-| `-color-border-default`| Default color to create bounds around content.                                   |
-| `-color-border-muted`  | For dividers to emphasize the separation between items, columns or sections.     |
-| `-color-border-subtle` | Faint border color.                                                              |
+| Color                   | Usage                                                                        |
+|-------------------------|------------------------------------------------------------------------------|
+| `-color-border-default` | Default color to create bounds around content.                               |
+| `-color-border-muted`   | For dividers to emphasize the separation between items, columns or sections. |
+| `-color-border-subtle`  | Faint border color.                                                          |
+| `-color-shadow-default` | Color for creating shadow effects around controls.                           |
 
 The below colors are all accent colors. Use them according to their role. The variable names are self-explaining.
 
diff --git a/styles/src/components/_menu.scss b/styles/src/components/_menu.scss
index 0240864..32d5e39 100755
--- a/styles/src/components/_menu.scss
+++ b/styles/src/components/_menu.scss
@@ -158,7 +158,7 @@ $separator-padding:       map-get(cfg.$separators, "small") !default;
   -fx-background-insets: 0, 1;
   -fx-padding: cfg.$popup-padding-y cfg.$popup-padding-x cfg.$popup-padding-y cfg.$popup-padding-x;
   -fx-background-radius: cfg.$border-radius;
-  @include effects.shadow($color-menuitem-bg, cfg.$popup-shadow);
+  @include effects.shadow(-color-shadow-default, cfg.$popup-shadow-radius, cfg.$popup-shadow-spread);
 
   // no idea what's that thing and how to trigger its appearance
   >.scroll-arrow {
diff --git a/styles/src/components/_popover.scss b/styles/src/components/_popover.scss
index 7dcec27..277cdb7 100644
--- a/styles/src/components/_popover.scss
+++ b/styles/src/components/_popover.scss
@@ -11,11 +11,11 @@ $padding-y:     10px !default;
 
 .popover {
   -fx-background-color: $color-bg;
+  @include effects.shadow(-color-shadow-default, cfg.$popup-shadow-radius, cfg.$popup-shadow-spread);
 
   >.border {
     -fx-stroke: $color-border;
     -fx-stroke-width: cfg.$border-width;
-    @include effects.shadow($color-bg, cfg.$popup-shadow);
   }
 
   >.content {
diff --git a/styles/src/components/_tab-pane.scss b/styles/src/components/_tab-pane.scss
index 406ae40..cfc8670 100755
--- a/styles/src/components/_tab-pane.scss
+++ b/styles/src/components/_tab-pane.scss
@@ -85,10 +85,6 @@ $tab-float-width:           150px !default;
             -fx-background-color: $color-fg;
             -fx-shape: "M 0,0 H1 L 4,3 7,0 H8 V1 L 5,4 8,7 V8 H7 L 4,5 1,8 H0 V7 L 3,4 0,1 Z";
             -fx-scale-shape: false;
-
-            &:hover {
-              @include effects.highlight($color-fg, 1);
-            }
           }
         }
 
diff --git a/styles/src/components/_titled-pane.scss b/styles/src/components/_titled-pane.scss
index 67cdd72..ed64016 100755
--- a/styles/src/components/_titled-pane.scss
+++ b/styles/src/components/_titled-pane.scss
@@ -11,7 +11,7 @@ $margin-arrow:   10px !default;
 $margin-content: 20px !default;
 
 // for elevation darker than bg color should be used for both light and dark modes
-$elevation-color:       if(cfg.$darkMode, -color-bg-inset, -color-border-default) !default;
+$elevation-color:       -color-shadow-default      !default;
 $elevation-interactive: map-get(cfg.$elevation, 2) !default;
 
 .titled-pane {
@@ -21,7 +21,7 @@ $elevation-interactive: map-get(cfg.$elevation, 2) !default;
 
   @each $level,$radius in cfg.$elevation {
     &.elevated-#{$level} {
-      @include effects.elevate($elevation-color, $radius);
+      @include effects.shadow($elevation-color, $radius);
     }
   }
 
@@ -90,7 +90,7 @@ $elevation-interactive: map-get(cfg.$elevation, 2) !default;
   }
 
   &.interactive:hover {
-    @include effects.elevate($elevation-color, $elevation-interactive);
+    @include effects.shadow($elevation-color, $elevation-interactive);
   }
 
   &:show-mnemonics>.mnemonic-underline {
diff --git a/styles/src/components/_tooltip.scss b/styles/src/components/_tooltip.scss
index 75aeb64..069d3fc 100755
--- a/styles/src/components/_tooltip.scss
+++ b/styles/src/components/_tooltip.scss
@@ -18,5 +18,5 @@ $padding-y: cfg.$padding-y !default;
   -fx-background-radius: cfg.$border-radius;
   -fx-padding: $padding-y $padding-x $padding-y $padding-x;
   -fx-opacity: $opacity;
-  @include effects.shadow($color-bg, cfg.$popup-shadow);
+  @include effects.shadow(-color-shadow-default, cfg.$popup-shadow-radius, cfg.$popup-shadow-spread);
 }
\ No newline at end of file
diff --git a/styles/src/general/_root.scss b/styles/src/general/_root.scss
index b7218f4..0f118e8 100755
--- a/styles/src/general/_root.scss
+++ b/styles/src/general/_root.scss
@@ -81,6 +81,7 @@
   -color-border-default:        vars.$border-default;
   -color-border-muted:          vars.$border-muted;
   -color-border-subtle:         vars.$border-subtle;
+  -color-shadow-default:        vars.$shadow-default;
 
   -color-neutral-emphasis-plus: vars.$neutral-emphasisPlus;
   -color-neutral-emphasis:      vars.$neutral-emphasis;
diff --git a/styles/src/nord-dark.scss b/styles/src/nord-dark.scss
index 431e5b1..d2c01de 100755
--- a/styles/src/nord-dark.scss
+++ b/styles/src/nord-dark.scss
@@ -98,6 +98,7 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1)
   $border-default:       color.change(scale.$base-6, $alpha: 0.65),
   $border-muted:         scale.$base-7,
   $border-subtle:        scale.$base-8,
+  $shadow-default:       scale.$dark,
 
   $neutral-emphasisPlus: scale.$base-7,
   $neutral-emphasis:     scale.$base-7,
diff --git a/styles/src/nord-light.scss b/styles/src/nord-light.scss
index cb60010..e6e944f 100755
--- a/styles/src/nord-light.scss
+++ b/styles/src/nord-light.scss
@@ -101,6 +101,7 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1)
   $border-default:       scale.$base-3,
   $border-muted:         lighten(scale.$base-3, 0.1),
   $border-subtle:        color.change(scale.$dark, $alpha: 0.15),
+  $shadow-default:       scale.$base-3,
 
   $neutral-emphasisPlus: scale.$base-8,
   $neutral-emphasis:     scale.$base-7,
diff --git a/styles/src/primer-dark.scss b/styles/src/primer-dark.scss
index 669d520..bd62bdc 100755
--- a/styles/src/primer-dark.scss
+++ b/styles/src/primer-dark.scss
@@ -73,13 +73,14 @@
   $fg-onEmphasis:        scale.$light,
 
   $canvas-default:       scale.$base-9,
-  $canvas-overlay:       scale.$base-8,
+  $canvas-overlay:       scale.$base-9,
   $canvas-inset:         scale.$dark,
   $canvas-subtle:        scale.$base-8,
 
   $border-default:       scale.$base-6,
   $border-muted:         scale.$base-7,
   $border-subtle:        color.change(scale.$base-0, $alpha: 0.1),
+  $shadow-default:       scale.$dark,
 
   $neutral-emphasisPlus: scale.$base-4,
   $neutral-emphasis:     scale.$base-4,
diff --git a/styles/src/settings/_color-vars.scss b/styles/src/settings/_color-vars.scss
index 9c449d0..a7f2c7b 100644
--- a/styles/src/settings/_color-vars.scss
+++ b/styles/src/settings/_color-vars.scss
@@ -16,6 +16,7 @@ $canvas-subtle:        scale.$base-0 !default;
 $border-default:       scale.$base-2 !default;
 $border-muted:         lighten(scale.$base-2, 0.03) !default;
 $border-subtle:        color.change(scale.$dark, $alpha: 0.15) !default;
+$shadow-default:       scale.$base-2 !default;
 
 $neutral-emphasisPlus: scale.$base-9 !default;
 $neutral-emphasis:     scale.$base-5 !default;
diff --git a/styles/src/settings/_config.scss b/styles/src/settings/_config.scss
index 5c575fe..b993834 100644
--- a/styles/src/settings/_config.scss
+++ b/styles/src/settings/_config.scss
@@ -43,11 +43,12 @@ $checkbox-mark-padding-x: 4px !default;
 $checkbox-label-padding:  2px !default;
 
 // menu
-$popup-padding-x: 2px !default;
-$popup-padding-y: 2px !default;
-$popup-shadow:    2px !default;
-$menu-padding-x:  $padding-x !default;
-$menu-padding-y:  $padding-y !default;
+$popup-padding-x:     2px !default;
+$popup-padding-y:     2px !default;
+$popup-shadow-radius: if($darkMode, 8px, 6px) !default;
+$popup-shadow-spread: if($darkMode, 0.6, 0.3) !default;
+$menu-padding-x:      $padding-x !default;
+$menu-padding-y:      $padding-y !default;
 
 // separators
 $separators: ("small": 0.25em, "medium": 0.75em, "large": 1.5em) !default;
diff --git a/styles/src/settings/_effects.scss b/styles/src/settings/_effects.scss
index 3359a48..75d71b8 100644
--- a/styles/src/settings/_effects.scss
+++ b/styles/src/settings/_effects.scss
@@ -1,16 +1,6 @@
 // SPDX-License-Identifier: MIT
 
 // Adds shadow effect to popup menus.
-@mixin shadow($color, $radius) {
-  -fx-effect: unquote("dropshadow(gaussian, #{$color}, #{$radius}, 0.75, 0, 0)");
+@mixin shadow($color, $radius, $spread: 0.5, $offsetX: 0, $offsetY: 2) {
+  -fx-effect: unquote("dropshadow(three-pass-box, #{$color}, #{$radius}, #{$spread}, #{$offsetX}, #{$offsetY})");
 }
-
-// Adds elevation effect to boxes.
-@mixin elevate($color, $radius) {
-  -fx-effect: unquote("dropshadow(three-pass-box, #{$color}, #{$radius}, 0.5, 2, 2)");
-}
-
-// Adds hover (or active) effect to icons.
-@mixin highlight($color, $radius) {
-  -fx-effect: unquote("dropshadow(two-pass-box, #{$color}, #{$radius}, 0.125em, 0, 0)");
-}
\ No newline at end of file