diff --git a/assets/sass/_content.scss b/assets/sass/_content.scss
index 05ade0f..ca519a3 100644
--- a/assets/sass/_content.scss
+++ b/assets/sass/_content.scss
@@ -70,8 +70,8 @@ footer {
         .side-nav-content {
             width: 100%;
             padding: 18px 0;
-            border-bottom: 1px solid #eee;
-            box-shadow: 0 10px 20px -10px #eee;
+            border-bottom: 1px solid $shadow-color;
+            box-shadow: 0 10px 20px -10px $shadow-color;
 
             .home-link {
                 display: flex;
@@ -103,8 +103,8 @@ footer {
         .side-nav-content {
             padding-top: 32px;
             padding-right: 32px;
-            border-right: 1px solid #eee;
-            box-shadow: 10px 0 20px -10px #eee;
+            border-right: 1px solid $shadow-color;
+            box-shadow: 10px 0 20px -10px $shadow-color;
 
             .portrait {
                 max-width: 100%;
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index fb75f89..c776294 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -11,6 +11,7 @@ $monofont: "PragmataPro Mono Liga", "Roboto Mono", "Roboto Mono for Powerline",
 @media (prefers-color-scheme: light) {
     $background-color: white;
     $faded-background-color: darken($background-color, 10%);
+    $shadow-color: darken($background-color, 10%);
     $heading-color: darken(royalblue, 10%);
     $text-color: #15202B;
     $small-text-color: #6e707f;
@@ -26,6 +27,7 @@ $monofont: "PragmataPro Mono Liga", "Roboto Mono", "Roboto Mono for Powerline",
 @media (prefers-color-scheme: dark) {
     $background-color: #202030;
     $faded-background-color: lighten($background-color, 10%);
+    $shadow-color: lighten($background-color, 10%);
     $heading-color: lighten(lightskyblue, 20%);
     $text-color: #BCBCBC;
     $small-text-color: darken($text-color, 8%);