diff --git a/assets/sass/front-page.scss b/assets/sass/front-page.scss
index 78d3ba3eee..bc4225ca08 100644
--- a/assets/sass/front-page.scss
+++ b/assets/sass/front-page.scss
@@ -53,6 +53,12 @@
         filter: invert(1);
         background-color: #9d9c9a;
       }
+      @media screen and (prefers-color-scheme: dark) {
+        :root:not([data-theme="light"]) & {
+          filter: invert(1);
+          background-color: #9d9c9a;
+        }
+      }
     }
 
     h3 {
@@ -112,6 +118,12 @@
     :root[data-theme="dark"] & {
       outline-color: var(--orange);
     }
+    @media screen and (prefers-color-scheme: dark) {
+      :root:not([data-theme="light"]) & {
+        outline-color: var(--orange);
+      }
+    }
+
     border-radius: 4px;
     position: relative;
 
diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
index c6b8485463..1b1d38e279 100644
--- a/assets/sass/layout.scss
+++ b/assets/sass/layout.scss
@@ -113,6 +113,11 @@ aside {
       :root[data-theme="dark"] & {
         filter: invert(1);
       }
+      @media screen and (prefers-color-scheme: dark) {
+        :root:not([data-theme="light"]) & {
+          filter: invert(1);
+        }
+      }
     }