Added dark mode from upstream project

4 files changed, 216 insertions, 55 deletions

diff --git a/static/git-arr.css b/static/git-arr.css
index e9533c7..03e7c06 100644
--- a/static/git-arr.css
+++ b/static/git-arr.css
@@ -1,13 +1,53 @@
 /*
  * git-arr style sheet
  */
+:root {
+    --body-bg: white;
+    --text-fg: black;
+    --h1-bg: #ddd;
+    --hr-bg: #e3e3e3;
+    --text-lowcontrast-fg: grey;
+    --a-fg: #800;
+    --a-explicit-fg: #038;
+    --table-hover-bg: #eee;
+    --head-bg: #88ff88;
+    --tag-bg: #ffff88;
+    --age-fg0: darkgreen;
+    --age-fg1: green;
+    --age-fg2: seagreen;
+    --diff-added-fg: green;
+    --diff-deleted-fg: red;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --body-bg: #121212;
+        --text-fg: #c9d1d9;
+        --h1-bg: #2f2f2f;
+        --hr-bg: #e3e3e3;
+        --text-lowcontrast-fg: grey;
+        --a-fg: #d4b263;
+        --a-explicit-fg: #44b4ec;
+        --table-hover-bg: #313131;
+        --head-bg: #020;
+        --tag-bg: #333000;
+        --age-fg0: #51a552;
+        --age-fg1: #468646;
+        --age-fg2: #2f722f;
+        --diff-added-fg: #00A000;
+        --diff-deleted-fg: #A00000;
+    }
+}
+
 body {
     font-family: sans-serif;
     padding: 0 1em 1em 1em;
+    color: var(--text-fg);
+    background: var(--body-bg);
 }
 
 h1 {
-    background: #ddd;
+    background: var(--h1-bg);
     padding: 0.3em;
 }
 
@@ -19,7 +59,7 @@ h2, h3 {
 
 hr {
     border: none;
-    background-color: #e3e3e3;
+    background-color: var(--hr-bg);
     height: 1px;
 }
 
@@ -27,22 +67,21 @@ hr {
 /* By default, use implied links, more discrete for increased readability. */
 a {
     text-decoration: none;
-    color: black;
+    color: var(--text-fg);
 }
 
 a:hover {
-    text-decoration: underline;
-    color: #800;
+    color: var(--a-fg);
 }
 
 
 /* Explicit links */
 a.explicit {
-    color: #038;
+    color: var(--a-explicit-fg);
 }
 
 a.explicit:hover, a.explicit:active {
-    color: #880000;
+    color: var(--a-fg);
 }
 
 
@@ -63,14 +102,14 @@ table.nice td.main {
 }
 
 table.nice tr:hover {
-    background: #eee;
+    background: var(--table-hover-bg);
 }
 
 
 /* Table for commits. */
 table.commits td.date {
     font-style: italic;
-    color: gray;
+    color: var(--text-lowcontrast-fg);
 }
 
 @media (min-width: 600px) {
@@ -80,7 +119,7 @@ table.commits td.date {
 }
 
 table.commits td.author {
-    color: gray;
+    color: var(--text-lowcontrast-fg);
 }
 
 
@@ -94,7 +133,7 @@ table.commit-info td {
 }
 
 table.commit-info span.date, span.email {
-    color: gray;
+    color: var(--text-lowcontrast-fg);
 }
 
 
@@ -102,21 +141,21 @@ table.commit-info span.date, span.email {
 span.refs {
     margin: 0px 0.5em;
     padding: 0px 0.25em;
-    border: solid 1px gray;
+    border: solid 1px var(--text-lowcontrast-fg);
 }
 
 span.head {
-    background-color: #88ff88;
+    background-color: var(--head-bg);
 }
 
 span.tag {
-    background-color: #ffff88;
+    background-color: var(--tag-bg);
 }
 
 
 /* Projects table */
 table.projects td.name a {
-    color: #038;
+    color: var(--a-explicit-fg);
 }
 
 
@@ -124,20 +163,20 @@ table.projects td.name a {
  * Note this is hidden by default as we rely on javascript to show it. */
 span.age {
     display: none;
-    color: gray;
+    color: var(--text-lowcontrast-fg);
     font-size: smaller;
 }
 
 span.age-band0 {
-    color: darkgreen;
+    color: var(--age-fg0);
 }
 
 span.age-band1 {
-    color: green;
+    color: var(--age-fg1);
 }
 
 span.age-band2 {
-    color: seagreen;
+    color: var(--age-fg2);
 }
 
 
@@ -171,11 +210,11 @@ table.changed-files {
 }
 
 table.changed-files span.lines-added {
-    color: green;
+    color: var(--diff-added-fg);
 }
 
 table.changed-files span.lines-deleted {
-    color: red;
+    color: var(--diff-deleted-fg);
 }
 
 
@@ -185,7 +224,7 @@ div.paginate {
 }
 
 div.paginate span.inactive {
-    color: gray;
+    color: var(--text-lowcontrast-fg);
 }
 
 
@@ -202,7 +241,7 @@ table.ls {
 }
 
 table.ls tr.blob td.size {
-    color: gray;
+    color: var(--text-lowcontrast-fg);
 }
 
 
@@ -219,8 +258,8 @@ table.blob-binary pre {
 table.blob-binary .offset {
     text-align: right;
     font-size: x-small;
-    color: darkgray;
-    border-right: 1px solid #eee;
+    color: var(--text-lowcontrast-fg);
+    border-right: 1px solid var(--text-lowcontrast-fg);
 }
 
 table.blob-binary tr.etc {
@@ -229,19 +268,29 @@ table.blob-binary tr.etc {
 
 
 /* Pygments overrides. */
-div.linenodiv {
-    padding-right: 0.5em;
+div.colorized-src {
     font-size: larger;
-    /* must match div.source_code */
 }
 
-div.linenodiv a {
-    color: gray;
+div.colorized-src .source_code {
+    /* Ignore pygments style's background. */
+    background: var(--body-bg);
 }
 
-div.source_code {
-    background: inherit;
-    font-size: larger;
+td.code > div.source_code {
+    /* This is a workaround, in pygments 2.11 there's a bug where the wrapper
+     * div is inside the table, so we need to override the descendant (because
+     * the style sets it on ".source_code" and the most specific value wins).
+     * Once we no longer support 2.11, we can remove this. */
+    background: var(--body-bg);
+}
+
+div.linenodiv {
+    padding-right: 0.5em;
+}
+
+div.linenodiv a {
+    color: var(--text-lowcontrast-fg);
 }
 
 
@@ -262,7 +311,7 @@ table.repo_info td {
 }
 
 span.ctrlchr {
-    color: gray;
+    color: var(--text-lowcontrast-fg);
     padding: 0 0.2ex 0 0.1ex;
     margin: 0 0.2ex 0 0.1ex;
 }
@@ -274,11 +323,11 @@ span.ctrlchr {
 
 /* Colored links (same as explicit links above) */
 div.markdown a {
-    color: #038;
+    color: var(--a-explicit-fg);
 }
 
 div.markdown a:hover, div.markdown a:active {
-    color: #880000;
+    color: var(--a-fg);
 }
 
 
diff --git a/static/syntax.css b/static/syntax.css
index 097e4d2..f8f1919 100644
--- a/static/syntax.css
+++ b/static/syntax.css
@@ -1,30 +1,37 @@
 
 /* CSS for syntax highlighting.
- * Generated by pygments (what we use for syntax highlighting):
+ * Generated by pygments (what we use for syntax highlighting).
  *
- * $ pygmentize -S default -f html -a .source_code
+ * Light mode:  pygmentize -S default -f html -a .source_code
  */
 
+pre { line-height: 125%; }
+td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
 .source_code .hll { background-color: #ffffcc }
-.source_code  { background: #f8f8f8; }
-.source_code .c { color: #408080; font-style: italic } /* Comment */
+.source_code { background: #f8f8f8; }
+.source_code .c { color: #3D7B7B; font-style: italic } /* Comment */
 .source_code .err { border: 1px solid #FF0000 } /* Error */
 .source_code .k { color: #008000; font-weight: bold } /* Keyword */
 .source_code .o { color: #666666 } /* Operator */
-.source_code .cm { color: #408080; font-style: italic } /* Comment.Multiline */
-.source_code .cp { color: #BC7A00 } /* Comment.Preproc */
-.source_code .c1 { color: #408080; font-style: italic } /* Comment.Single */
-.source_code .cs { color: #408080; font-style: italic } /* Comment.Special */
+.source_code .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
+.source_code .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
+.source_code .cp { color: #9C6500 } /* Comment.Preproc */
+.source_code .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
+.source_code .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
+.source_code .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
 .source_code .gd { color: #A00000 } /* Generic.Deleted */
 .source_code .ge { font-style: italic } /* Generic.Emph */
-.source_code .gr { color: #FF0000 } /* Generic.Error */
+.source_code .gr { color: #E40000 } /* Generic.Error */
 .source_code .gh { color: #000080; font-weight: bold } /* Generic.Heading */
-.source_code .gi { color: #00A000 } /* Generic.Inserted */
-.source_code .go { color: #808080 } /* Generic.Output */
+.source_code .gi { color: #008400 } /* Generic.Inserted */
+.source_code .go { color: #717171 } /* Generic.Output */
 .source_code .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
 .source_code .gs { font-weight: bold } /* Generic.Strong */
 .source_code .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
-.source_code .gt { color: #0040D0 } /* Generic.Traceback */
+.source_code .gt { color: #0044DD } /* Generic.Traceback */
 .source_code .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
 .source_code .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
 .source_code .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
@@ -33,38 +40,139 @@
 .source_code .kt { color: #B00040 } /* Keyword.Type */
 .source_code .m { color: #666666 } /* Literal.Number */
 .source_code .s { color: #BA2121 } /* Literal.String */
-.source_code .na { color: #7D9029 } /* Name.Attribute */
+.source_code .na { color: #687822 } /* Name.Attribute */
 .source_code .nb { color: #008000 } /* Name.Builtin */
 .source_code .nc { color: #0000FF; font-weight: bold } /* Name.Class */
 .source_code .no { color: #880000 } /* Name.Constant */
 .source_code .nd { color: #AA22FF } /* Name.Decorator */
-.source_code .ni { color: #999999; font-weight: bold } /* Name.Entity */
-.source_code .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
+.source_code .ni { color: #717171; font-weight: bold } /* Name.Entity */
+.source_code .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
 .source_code .nf { color: #0000FF } /* Name.Function */
-.source_code .nl { color: #A0A000 } /* Name.Label */
+.source_code .nl { color: #767600 } /* Name.Label */
 .source_code .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
 .source_code .nt { color: #008000; font-weight: bold } /* Name.Tag */
 .source_code .nv { color: #19177C } /* Name.Variable */
 .source_code .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
 .source_code .w { color: #bbbbbb } /* Text.Whitespace */
+.source_code .mb { color: #666666 } /* Literal.Number.Bin */
 .source_code .mf { color: #666666 } /* Literal.Number.Float */
 .source_code .mh { color: #666666 } /* Literal.Number.Hex */
 .source_code .mi { color: #666666 } /* Literal.Number.Integer */
 .source_code .mo { color: #666666 } /* Literal.Number.Oct */
+.source_code .sa { color: #BA2121 } /* Literal.String.Affix */
 .source_code .sb { color: #BA2121 } /* Literal.String.Backtick */
 .source_code .sc { color: #BA2121 } /* Literal.String.Char */
+.source_code .dl { color: #BA2121 } /* Literal.String.Delimiter */
 .source_code .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
 .source_code .s2 { color: #BA2121 } /* Literal.String.Double */
-.source_code .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
+.source_code .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
 .source_code .sh { color: #BA2121 } /* Literal.String.Heredoc */
-.source_code .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
+.source_code .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
 .source_code .sx { color: #008000 } /* Literal.String.Other */
-.source_code .sr { color: #BB6688 } /* Literal.String.Regex */
+.source_code .sr { color: #A45A77 } /* Literal.String.Regex */
 .source_code .s1 { color: #BA2121 } /* Literal.String.Single */
 .source_code .ss { color: #19177C } /* Literal.String.Symbol */
 .source_code .bp { color: #008000 } /* Name.Builtin.Pseudo */
+.source_code .fm { color: #0000FF } /* Name.Function.Magic */
 .source_code .vc { color: #19177C } /* Name.Variable.Class */
 .source_code .vg { color: #19177C } /* Name.Variable.Global */
 .source_code .vi { color: #19177C } /* Name.Variable.Instance */
+.source_code .vm { color: #19177C } /* Name.Variable.Magic */
 .source_code .il { color: #666666 } /* Literal.Number.Integer.Long */
 
+/*
+ * Dark mode:  pygmentize -S native -f html -a .source_code
+ */
+
+@media (prefers-color-scheme: dark) {
+
+pre { line-height: 125%; }
+td.linenos .normal { color: #aaaaaa; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+span.linenos { color: #aaaaaa; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+.source_code .hll { background-color: #404040 }
+.source_code { background: #202020; color: #d0d0d0 }
+.source_code .c { color: #ababab; font-style: italic } /* Comment */
+.source_code .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.source_code .esc { color: #d0d0d0 } /* Escape */
+.source_code .g { color: #d0d0d0 } /* Generic */
+.source_code .k { color: #6ebf26; font-weight: bold } /* Keyword */
+.source_code .l { color: #d0d0d0 } /* Literal */
+.source_code .n { color: #d0d0d0 } /* Name */
+.source_code .o { color: #d0d0d0 } /* Operator */
+.source_code .x { color: #d0d0d0 } /* Other */
+.source_code .p { color: #d0d0d0 } /* Punctuation */
+.source_code .ch { color: #ababab; font-style: italic } /* Comment.Hashbang */
+.source_code .cm { color: #ababab; font-style: italic } /* Comment.Multiline */
+.source_code .cp { color: #cd2828; font-weight: bold } /* Comment.Preproc */
+.source_code .cpf { color: #ababab; font-style: italic } /* Comment.PreprocFile */
+.source_code .c1 { color: #ababab; font-style: italic } /* Comment.Single */
+.source_code .cs { color: #e50808; font-weight: bold; background-color: #520000 } /* Comment.Special */
+.source_code .gd { color: #d22323 } /* Generic.Deleted */
+.source_code .ge { color: #d0d0d0; font-style: italic } /* Generic.Emph */
+.source_code .gr { color: #d22323 } /* Generic.Error */
+.source_code .gh { color: #ffffff; font-weight: bold } /* Generic.Heading */
+.source_code .gi { color: #589819 } /* Generic.Inserted */
+.source_code .go { color: #cccccc } /* Generic.Output */
+.source_code .gp { color: #aaaaaa } /* Generic.Prompt */
+.source_code .gs { color: #d0d0d0; font-weight: bold } /* Generic.Strong */
+.source_code .gu { color: #ffffff; text-decoration: underline } /* Generic.Subheading */
+.source_code .gt { color: #d22323 } /* Generic.Traceback */
+.source_code .kc { color: #6ebf26; font-weight: bold } /* Keyword.Constant */
+.source_code .kd { color: #6ebf26; font-weight: bold } /* Keyword.Declaration */
+.source_code .kn { color: #6ebf26; font-weight: bold } /* Keyword.Namespace */
+.source_code .kp { color: #6ebf26 } /* Keyword.Pseudo */
+.source_code .kr { color: #6ebf26; font-weight: bold } /* Keyword.Reserved */
+.source_code .kt { color: #6ebf26; font-weight: bold } /* Keyword.Type */
+.source_code .ld { color: #d0d0d0 } /* Literal.Date */
+.source_code .m { color: #51b2fd } /* Literal.Number */
+.source_code .s { color: #ed9d13 } /* Literal.String */
+.source_code .na { color: #bbbbbb } /* Name.Attribute */
+.source_code .nb { color: #2fbccd } /* Name.Builtin */
+.source_code .nc { color: #71adff; text-decoration: underline } /* Name.Class */
+.source_code .no { color: #40ffff } /* Name.Constant */
+.source_code .nd { color: #ffa500 } /* Name.Decorator */
+.source_code .ni { color: #d0d0d0 } /* Name.Entity */
+.source_code .ne { color: #bbbbbb } /* Name.Exception */
+.source_code .nf { color: #71adff } /* Name.Function */
+.source_code .nl { color: #d0d0d0 } /* Name.Label */
+.source_code .nn { color: #71adff; text-decoration: underline } /* Name.Namespace */
+.source_code .nx { color: #d0d0d0 } /* Name.Other */
+.source_code .py { color: #d0d0d0 } /* Name.Property */
+.source_code .nt { color: #6ebf26; font-weight: bold } /* Name.Tag */
+.source_code .nv { color: #40ffff } /* Name.Variable */
+.source_code .ow { color: #6ebf26; font-weight: bold } /* Operator.Word */
+.source_code .w { color: #666666 } /* Text.Whitespace */
+.source_code .mb { color: #51b2fd } /* Literal.Number.Bin */
+.source_code .mf { color: #51b2fd } /* Literal.Number.Float */
+.source_code .mh { color: #51b2fd } /* Literal.Number.Hex */
+.source_code .mi { color: #51b2fd } /* Literal.Number.Integer */
+.source_code .mo { color: #51b2fd } /* Literal.Number.Oct */
+.source_code .sa { color: #ed9d13 } /* Literal.String.Affix */
+.source_code .sb { color: #ed9d13 } /* Literal.String.Backtick */
+.source_code .sc { color: #ed9d13 } /* Literal.String.Char */
+.source_code .dl { color: #ed9d13 } /* Literal.String.Delimiter */
+.source_code .sd { color: #ed9d13 } /* Literal.String.Doc */
+.source_code .s2 { color: #ed9d13 } /* Literal.String.Double */
+.source_code .se { color: #ed9d13 } /* Literal.String.Escape */
+.source_code .sh { color: #ed9d13 } /* Literal.String.Heredoc */
+.source_code .si { color: #ed9d13 } /* Literal.String.Interpol */
+.source_code .sx { color: #ffa500 } /* Literal.String.Other */
+.source_code .sr { color: #ed9d13 } /* Literal.String.Regex */
+.source_code .s1 { color: #ed9d13 } /* Literal.String.Single */
+.source_code .ss { color: #ed9d13 } /* Literal.String.Symbol */
+.source_code .bp { color: #2fbccd } /* Name.Builtin.Pseudo */
+.source_code .fm { color: #71adff } /* Name.Function.Magic */
+.source_code .vc { color: #40ffff } /* Name.Variable.Class */
+.source_code .vg { color: #40ffff } /* Name.Variable.Global */
+.source_code .vi { color: #40ffff } /* Name.Variable.Instance */
+.source_code .vm { color: #40ffff } /* Name.Variable.Magic */
+.source_code .il { color: #51b2fd } /* Literal.Number.Integer.Long */
+
+/* Dark mode - my overrides, because the defaults are too bright. */
+
+.source_code .gh { color: rgb(189, 193, 198); }
+.source_code .gu { color: rgb(189, 193, 198); }
+}
+
diff --git a/views/blob.html b/views/blob.html
index f1c6ad0..67ac11c 100644
--- a/views/blob.html
+++ b/views/blob.html
@@ -77,7 +77,9 @@
 {{!markdown_blob(blob.utf8_content)}}
 </div>
 % elif can_colorize(blob.utf8_content):
+<div class="colorized-src">
 {{!colorize_blob(fname.raw, blob.utf8_content)}}
+</div>
 % else:
 <pre class="blob-body">
 {{blob.utf8_content}}
diff --git a/views/commit.html b/views/commit.html
index e21ff04..f753377 100644
--- a/views/commit.html
+++ b/views/commit.html
@@ -56,7 +56,9 @@
 <hr/>
 
 % if can_colorize(c.diff.body):
+<div class="colorized-src">
 {{!colorize_diff(c.diff.body)}}
+</div>
 % else:
 <pre class="diff-body">
 {{c.diff.body}}