diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
index e1960b74204d3c6000b3c39fbccb5d9075905ebd..539857ff701c28971a95da4a74ff04717fe011fc 100644
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@@ -3,7 +3,7 @@
     <ul class="row menu">
       <li class="col-xs-12 col-md-2">
         <a href="{{ if .Site.LanguagePrefix }}{{ .Site.LanguagePrefix }}{{ else }}/{{ end }}">
-          <img class="img-responsive" src="/img/icon.png" width="128" height="128" alt="Redox Logo"/>
+          <img class="img-responsive header-icon" src="/img/icon.png" width="128" height="128" alt="Redox Logo"/>
         </a>
       </li>
       <li class="col-xs-12 col-md-10 menu">
diff --git a/static/css/style.css b/static/css/style.css
index 1c161618d5553b9a45050e860c30cb8efa56faa8..803367e4ef825d00a72870863cd98a075554e0ec 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,3 +1,16 @@
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #202020;
+        color: #ffffff;
+    }
+    a {
+        color: #5fafff;
+    }
+    .header-icon {
+        filter: invert(1);
+    }
+}
+
 @font-face {
     font-family: 'Fira Sans';
     font-display: swap;