Merge a735039ebb into 7e3df43463

qutebrowser/html/base.html

@@ -8,6 +8,58 @@ 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
+            - timestamp = timestamps and dates (e.g. for qute://history)
+            */
+            @media (prefers-color-scheme: dark) {
+                :root {
+                    --color-bg: #1e1c1c;
+                    --color-fg: #dad8d8;
+                    --color-bg-alt: #1e282f;
+                    --color-fg-feature: #000444;
+                    --color-bg-feature: #84b4e6;
+                    --color-fg-feature-alt: #a6dfff;
+                    --color-border: #01cdd0;
+                    --color-border-focused: #7a589ea6;
+                    --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) {
+                :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;
+                    --color-timestamp: #555;
+                }
+            }
+
+            :root { background: var(--color-bg); color: var(--color-fg); }
+
             {% block style %}
             body {
                 margin: 0;

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;

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 {

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 {

qutebrowser/html/version.html

@@ -14,6 +14,7 @@ function paste_version() {
 
 {% block style %}
 html { margin-left: 10px; }
+a { color: var(--color-link); }
 {% endblock %}
 
 {% block content %}