From d05c8de6b86c561d28cbb25b7f03239529a4b440 Mon Sep 17 00:00:00 2001
From: Alexander Borsuk <me@alex.bio>
Date: Mon, 24 Jan 2022 17:03:15 +0100
Subject: [PATCH] Dark mode support for FAQ and copyright html

Signed-off-by: Alexander Borsuk <me@alex.bio>
---
 data/copyright.html | 28 +++++++++++++++++++++++++---
 data/faq.html       | 34 +++++++++++++++++++++++++++-------
 2 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/data/copyright.html b/data/copyright.html
index 1ea7d11d12..965373bb2b 100644
--- a/data/copyright.html
+++ b/data/copyright.html
@@ -6,12 +6,34 @@
   <meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0;'>
   <title>Copyright</title>
   <style type="text/css">
+    /* Dark mode support. */
+    :root {
+      color-scheme: light dark;
+      --primary-color: black;
+      --secondary-color: #555555;
+      --link-color: #1e96f0;
+      --internal-link-color: black;
+      --background-color: white;
+      --separator-color: #0e0e0e;
+    }
+    @media screen and (prefers-color-scheme: dark) {
+      :root {
+        --primary-color: #b5b5b5;
+        --secondary-color: #858585;
+        --link-color: #2ea6ff;
+        --internal-link-color: darkgrey;
+        --background-color: black;
+        --separator-color: #0a0a0a;
+      }
+    }
+    html { color: var(--secondary-color); background-color: var(--background-color); }
     body { font-family: sans-serif; }
-    .section { border-bottom: thin solid black; }
+    h2, h3 { color: var(--primary-color); }
+    .section { border-bottom: thin solid var(--separator-color); }
     .android { display: none; }
     .license-list li { margin-bottom: 0.3em; }
-    .license, .license:visited { color: black; }
-    a:visited { color: blue; }
+    .license, .license:visited { color: var(--internal-link-color); }
+    a, a:visited { color: var(--link-color); }
 
     /* Translated elements are invisible by default */
     [lang = "en"], [lang = "ru"], [lang = "vi"], [lang = "tr"], [lang = "th"],
diff --git a/data/faq.html b/data/faq.html
index e2a7bc27e9..19a77b8879 100644
--- a/data/faq.html
+++ b/data/faq.html
@@ -7,15 +7,32 @@
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
     />
     <style>
-      /* All langs are invisible by default */
+      /* All langs are invisible by default. */
       [lang] {
         display: none;
       }
+      /* Dark mode support. */
+      :root {
+        color-scheme: light dark;
+        --primary-color: black;
+        --secondary-color: #555555;
+        --link-color: #1e96f0;
+        --background-color: white;
+        --separator-color: #0e0e0e;
+      }
+      @media screen and (prefers-color-scheme: dark) {
+        :root {
+          --primary-color: #b5b5b5;
+          --secondary-color: #858585;
+          --link-color: #2ea6ff;
+          --background-color: black;
+          --separator-color: #0a0a0a;
+        }
+      }
       h3 {
         font-style: normal;
         font-weight: bold;
         font-size: 18px;
-
         line-height: 1.4;
       }
       dd {
@@ -24,26 +41,29 @@
         margin-left: 0;
         margin-bottom: 16px;
         font-size: 16px;
-        color: #757575;
+        color: var(--secondary-color);
         line-height: 1.4;
         padding-bottom: 24px;
-        border-bottom: 1px solid #e0e0e0;
+        border-bottom: 1px solid var(--separator-color);
       }
 
       .faq {
-        border-bottom: 1px solid #e0e0e0;
+        border-bottom: 1px solid var(--separator-color);
       }
 
       dl {
         margin: 0 0 2em 0;
       }
+      html {
+        color: var(--primary-color);
+        background-color: var(--background-color);
+      }
       body {
         margin-right: 16px;
         margin-left: 16px;
         margin-bottom: 16px;
         font-size: 16px;
         font-family: "Helvetica Neue", "Roboto", "Arial", "sans-serif";
-        color: #000000;
       }
 
       html {
@@ -51,7 +71,7 @@
       }
 
       a {
-        color: #1e96f0;
+        color: var(--link-color);
         text-decoration: none;
       }
     </style>