diff --git a/FAQ.yaml b/FAQ.yaml
index f931f42e90..79b36724c2 100644
--- a/FAQ.yaml
+++ b/FAQ.yaml
@@ -3,5 +3,27 @@ header-includes: |
   <link rel="shortcut icon" href="https://raw.githubusercontent.com/M66B/FairEmail/master/app/src/main/ic_launcher-web.png">
   <style>
     body { font-family: Arial, sans-serif; }
+    @media (prefers-color-scheme: light) {
+      body {
+        color: #212121;
+        background: #FFFFFF;
+      }
+      a:link { color: #C68400; }
+      a:visited { color: #ff6f00; }
+      a:hover { color: #039BE5; }
+      a:active { color: #039BE5; }
+      img { filter: invert(0%); }
+    }
+    @media (prefers-color-scheme: dark) {
+      body {
+        color: #FFFFFF;
+        background: #424242;
+      }
+      a:link { color: #FFB300; }
+      a:visited { color: #FF6F00; }
+      a:hover { color: #01579B; }
+      a:active { color: #01579B; }
+      img { filter: invert(75%); }
+    }
   </style>
 ---
diff --git a/index.html b/index.html
index 381ac3be36..a05ccc930f 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,28 @@
   <link rel="shortcut icon" href="https://raw.githubusercontent.com/M66B/FairEmail/master/app/src/main/ic_launcher-web.png">
   <style>
     body { font-family: Arial, sans-serif; }
+    @media (prefers-color-scheme: light) {
+      body {
+        color: #212121;
+        background: #FFFFFF;
+      }
+      a:link { color: #C68400; }
+      a:visited { color: #ff6f00; }
+      a:hover { color: #039BE5; }
+      a:active { color: #039BE5; }
+      img { filter: invert(0%); }
+    }
+    @media (prefers-color-scheme: dark) {
+      body {
+        color: #FFFFFF;
+        background: #424242;
+      }
+      a:link { color: #FFB300; }
+      a:visited { color: #FF6F00; }
+      a:hover { color: #01579B; }
+      a:active { color: #01579B; }
+      img { filter: invert(75%); }
+    }
   </style>
 </head>
 <body>
