diff --git a/assets/scss/_footer.scss b/assets/scss/_footer.scss
index cc64c9ddd..d5e6a6d2a 100644
--- a/assets/scss/_footer.scss
+++ b/assets/scss/_footer.scss
@@ -1,8 +1,25 @@
 .footer {
   padding: 40px 20px;
   flex-grow: 0;
+  // Default
   color: $light-color-secondary;
 
+  @media (prefers-color-scheme: dark) {
+    color: $dark-color-secondary;
+  }
+
+  @media (prefers-color-scheme: light) {
+    color: $light-color-secondary;
+  }
+
+  [data-theme=dark] & {
+    color: $dark-color-secondary;
+  }
+
+  [data-theme=light] & {
+    color: $dark-color-secondary;
+  }
+
   &__inner {
     display: flex;
     align-items: center;
@@ -21,7 +38,6 @@
     flex-direction: row;
     align-items: center;
     font-size: 1rem;
-    color: $light-color-secondary;
 
     @media #{$media-size-tablet} {
       flex-direction: column;
diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss
index c2328251b..abf9039fa 100644
--- a/assets/scss/_main.scss
+++ b/assets/scss/_main.scss
@@ -202,11 +202,11 @@ em, i, strong {
   }
 
   [data-theme=dark] & {
-    color: white;
+    color: $dark-color-variant;
   }
 
   [data-theme=light] & {
-    color: black;
+    color: $light-color-variant;
   }
 }