From 526036a2a415e304b48d668735832f2c3804b7fc Mon Sep 17 00:00:00 2001
From: adigitoleo <adigitoleo@dissimulo.com>
Date: Wed, 1 Jun 2022 00:47:08 +1000
Subject: [PATCH 1/2] feat: Add prefers-color-scheme: dark for `qute://` pages

Adds dark theme for `qute://settings` and `qute://history`,
also ensures a legible `qute://version`.
There might be some other internal pages that I missed,
but maybe this will be good enough until the asciidoc to sphinx migration.

Closes #7116
---
 qutebrowser/html/base.html     | 49 ++++++++++++++++++++++++++++++++++
 qutebrowser/html/settings.html | 30 ++++++++++++---------
 qutebrowser/html/styled.html   |  8 +++---
 qutebrowser/html/version.html  |  1 +
 4 files changed, 72 insertions(+), 16 deletions(-)

diff --git a/qutebrowser/html/base.html b/qutebrowser/html/base.html
index 6db182908..48486630b 100644
--- a/qutebrowser/html/base.html
+++ b/qutebrowser/html/base.html
@@ -8,6 +8,55 @@ vim: ft=html fileencoding=utf-8 sts=4 sw=4 et:
         <meta charset="utf-8">
         <title>{{ title }}</title>
         <style type="text/css">
+            /*
+            Colors:
+            - bg = normal background
+            - bg-alt = alternative background, for e.g. table/list rows
+            - feature = feature colors for e.g. selctions, table headers
+            - feature-alt = alternative feature colors for special text e.g. <summary>text</summary>
+            - border = normal border color
+            - border-focused = focused border color
+            - label = color for text on some kind of label/button
+            - fg-alt = alternative foreground color for subtle/parenthetical text
+            - link = links
+            */
+            @media (prefers-color-scheme: dark) {
+                :root {
+                    --color-bg: #070707;
+                    --color-fg: #eeeeee;
+                    --color-bg-alt: #1e282f;
+                    --color-fg-feature: #000444;
+                    --color-bg-feature: #1887c5;
+                    --color-fg-feature-alt: #a6dfff;
+                    --color-border: #01cdd0;
+                    --color-border-focused: #7a589ea6;
+                    --color-bg-label: #333333;
+                    --color-fg-label: #999999;
+                    --color-fg-alt: #a7a1a1cf;
+                    --color-fg-heading: #084c88;
+                    --color-link: #2562dc;
+                }
+            }
+            @media (prefers-color-scheme: light) {
+                :root {
+                    --color-bg: #f8f8f8;
+                    --color-fg: black;
+                    --color-bg-alt: #eaf4fb;
+                    --color-fg-feature: #084c88;
+                    --color-bg-feature: #a6dfff;
+                    --color-fg-feature-alt: #1887c5;
+                    --color-border: #01cdd0;
+                    --color-border-focused: #7a589ea6;
+                    --color-bg-label: #dddddd;
+                    --color-fg-label: #666666;
+                    --color-fg-alt: #635d5dcf;
+                    --color-fg-heading: #000444;
+                    --color-link: #2562dc;
+                }
+            }
+
+            :root { background: var(--color-bg); color: var(--color-fg); }
+
             {% block style %}
             body {
                 margin: 0;
diff --git a/qutebrowser/html/settings.html b/qutebrowser/html/settings.html
index f89aaa610..716c14065 100644
--- a/qutebrowser/html/settings.html
+++ b/qutebrowser/html/settings.html
@@ -18,7 +18,7 @@ table {
 }
 
 tbody tr:nth-child(odd) {
-    background: #eaf4fb;
+    background: var(--color-bg-alt);
 }
 
 pre {
@@ -28,11 +28,11 @@ pre {
 th {
     padding: 10px;
     border-radius: 5px;
-    background: #a6dfff;
+    background: var(--color-bg-feature);
     text-align: left;
     font-weight: normal;
     font-size: 1.5rem;
-    color: #084c88;
+    color: var(--color-fg-feature);
 }
 
 td {
@@ -45,18 +45,24 @@ th pre {
 }
 
 input {
+    /*
+    Leave background transparent,
+    opaque color bleeds over the jump hint marker location.
+    */
     padding: 8px;
     width: 98%;
     box-sizing: border-box;
     border-radius: 4px;
-    border: 1px solid #01cdd0;
+    border: 1px solid var(--color-border);
     font-size: 0.9rem;
     font-family: DejaVu, serif;
+    background-color: #00000000;
+    color: var(--color-fg);
 }
 
 input:focus {
     outline: none;
-    border: 2px solid #7a589ea6;
+    border: 2px solid var(--color-border-focused);
 }
 
 input[type="radio"] {
@@ -73,13 +79,13 @@ label {
     margin-bottom: 2px;
     padding: 5px 10px;
     border-radius: 5px;
-    background-color: #dddddd;
-    color: #666666;
+    background-color: var(--color-bg-label);
+    color: var(--color-fg-label);
 }
 
 input[type="radio"]:checked + label {
-    background-color: #a6dfff;
-    color: #084c88;
+    background-color: var(--color-bg-feature);
+    color: var(--color-fg-feature);
 }
 
 .radio-button {
@@ -111,7 +117,7 @@ input[type="radio"]:checked + label {
 
 .option-description {
     margin: .5ex 0;
-    color: #635d5dcf;
+    color: var(--color-fg-alt);
     font-size: 80%;
     font-style: italic;
 }
@@ -135,14 +141,14 @@ details[open] .details {
 summary {
     margin: .5ex 0;
     width: fit-content;
-    color: #1887c5;
+    color: var(--color-fg-feature-alt);
     outline: none;
     font-size: 105%;
     cursor: pointer;
 }
 
 summary .short-description {
-    color: #635d5dcf;
+    color: var(--color-fg-alt);
 }
 
 summary::selection {
diff --git a/qutebrowser/html/styled.html b/qutebrowser/html/styled.html
index 5d0adeff8..f5cb0aedf 100644
--- a/qutebrowser/html/styled.html
+++ b/qutebrowser/html/styled.html
@@ -1,9 +1,10 @@
 {% extends "base.html" %}
 
 {% block style %}
+
 a {
     text-decoration: none;
-    color: #2562dc
+    color: var(--color-link);
 }
 
 a:hover {
@@ -11,7 +12,6 @@ a:hover {
 }
 
 body {
-    background: #fefefe;
     font-family: sans-serif;
     margin: 0 auto;
     max-width: 1280px;
@@ -20,7 +20,7 @@ body {
 }
 
 h1 {
-    color: #444;
+    color: var(--color-fg-heading);
     font-weight: normal;
 }
 
@@ -34,7 +34,7 @@ table {
 }
 
 tbody tr:nth-child(odd) {
-    background-color: #f8f8f8;
+    background-color: var(--color-bg);
 }
 
 td {
diff --git a/qutebrowser/html/version.html b/qutebrowser/html/version.html
index 27fa4eb4c..6204f1fbe 100644
--- a/qutebrowser/html/version.html
+++ b/qutebrowser/html/version.html
@@ -10,6 +10,7 @@ function paste_version() {
 
 {% block style %}
 html { margin-left: 10px; }
+a { color: var(--color-link); }
 {% endblock %}
 
 {% block content %}

From a735039ebb9bbe4687b5be21711a0dd7da7843aa Mon Sep 17 00:00:00 2001
From: adigitoleo <adigitoleo@dissimulo.com>
Date: Wed, 29 Jun 2022 08:00:13 +1000
Subject: [PATCH 2/2] fix: Fix dark mode contrast according to review

---
 qutebrowser/html/base.html    | 19 +++++++++++--------
 qutebrowser/html/history.html |  4 ++--
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/qutebrowser/html/base.html b/qutebrowser/html/base.html
index 48486630b..ef091f58a 100644
--- a/qutebrowser/html/base.html
+++ b/qutebrowser/html/base.html
@@ -19,22 +19,24 @@ vim: ft=html fileencoding=utf-8 sts=4 sw=4 et:
             - label = color for text on some kind of label/button
             - fg-alt = alternative foreground color for subtle/parenthetical text
             - link = links
+            - timestamp = timestamps and dates (e.g. for qute://history)
             */
             @media (prefers-color-scheme: dark) {
                 :root {
-                    --color-bg: #070707;
-                    --color-fg: #eeeeee;
+                    --color-bg: #1e1c1c;
+                    --color-fg: #dad8d8;
                     --color-bg-alt: #1e282f;
                     --color-fg-feature: #000444;
-                    --color-bg-feature: #1887c5;
+                    --color-bg-feature: #84b4e6;
                     --color-fg-feature-alt: #a6dfff;
                     --color-border: #01cdd0;
                     --color-border-focused: #7a589ea6;
-                    --color-bg-label: #333333;
-                    --color-fg-label: #999999;
-                    --color-fg-alt: #a7a1a1cf;
-                    --color-fg-heading: #084c88;
-                    --color-link: #2562dc;
+                    --color-bg-label: #565656;
+                    --color-fg-label: #dddddd;
+                    --color-fg-alt: #cbc6c6cf;
+                    --color-fg-heading: #a6dfff;
+                    --color-link: #84b4e6;
+                    --color-timestamp: #84b4e6;
                 }
             }
             @media (prefers-color-scheme: light) {
@@ -52,6 +54,7 @@ vim: ft=html fileencoding=utf-8 sts=4 sw=4 et:
                     --color-fg-alt: #635d5dcf;
                     --color-fg-heading: #000444;
                     --color-link: #2562dc;
+                    --color-timestamp: #555;
                 }
             }
 
diff --git a/qutebrowser/html/history.html b/qutebrowser/html/history.html
index 0eedea56d..678b77db8 100644
--- a/qutebrowser/html/history.html
+++ b/qutebrowser/html/history.html
@@ -11,7 +11,7 @@ td.title {
 }
 
 td.time {
-    color: #555;
+    color: var(--color-timestamp);
     text-align: right;
     white-space: nowrap;
 }
@@ -21,7 +21,7 @@ table {
 }
 
 .date {
-    color: #555;
+    color: var(--color-timestamp);
     font-size: 12pt;
     padding-bottom: 15px;
     font-weight: bold;