From 0419661aa966b05395ffddce6e8975dba5e73e4e Mon Sep 17 00:00:00 2001
From: Jordan Doyle <jordan@doyle.la>
Date: Thu, 21 Jul 2022 21:52:07 +0100
Subject: [PATCH] Add a simple dark mode

---
 src/main.rs                | 14 +++++++++-----
 statics/sass/_colours.scss |  3 +++
 statics/sass/code.scss     |  8 +++++++-
 statics/sass/diff.scss     | 14 ++++++++++++++
 statics/sass/style.scss    | 40 ++++++++++++++++++++++++++++++++++++++++
 statics/sass/tables.scss   | 25 +++++++++++++++++++++++++
 templates/repo/about.html  |  1 +
 templates/repo/commit.html |  3 ++-
 templates/repo/diff.html   |  3 ++-
 templates/repo/file.html   |  1 +
 10 files changed, 102 insertions(+), 10 deletions(-)

diff --git a/src/main.rs b/src/main.rs
index e205371..0d3b9c2 100644
--- a/src/main.rs
+++ a/src/main.rs
@@ -52,13 +52,14 @@
 
     let bat_assets = HighlightingAssets::from_binary();
     let syntax_set = bat_assets.get_syntax_set().unwrap().clone();
+
     let theme = bat_assets.get_theme("GitHub");
-    let css = Box::leak(
-        syntect::html::css_for_theme_with_class_style(theme, ClassStyle::Spaced)
-            .unwrap()
-            .into_boxed_str()
-            .into_boxed_bytes(),
-    );
+    let css = syntect::html::css_for_theme_with_class_style(theme, ClassStyle::Spaced).unwrap();
+    let css = Box::leak(format!(r#"@media (prefers-color-scheme: light){{{}}}"#, css).into_boxed_str().into_boxed_bytes());
+
+    let dark_theme = bat_assets.get_theme("TwoDark");
+    let dark_css = syntect::html::css_for_theme_with_class_style(dark_theme, ClassStyle::Spaced).unwrap();
+    let dark_css = Box::leak(format!(r#"@media (prefers-color-scheme: dark){{{}}}"#, dark_css).into_boxed_str().into_boxed_bytes());
 
     let app = Router::new()
         .route("/", get(methods::index::handle))
@@ -70,6 +71,7 @@
             )))),
         )
         .route("/highlight.css", get(static_css(css)))
+        .route("/highlight-dark.css", get(static_css(dark_css)))
         .fallback(methods::repo::service.into_service())
         .layer(layer_fn(LoggingMiddleware))
         .layer(Extension(Arc::new(Git::new(syntax_set))))
diff --git a/statics/sass/_colours.scss b/statics/sass/_colours.scss
new file mode 100644
index 0000000..2a01604 100644
--- /dev/null
+++ a/statics/sass/_colours.scss
@@ -1,0 +1,3 @@
+$darkModeHighlightColour: #20c20e;
+$darkModeTextColour: #abb2bf;
+$asideColour: #888;diff --git a/statics/sass/code.scss b/statics/sass/code.scss
index cc304b5..71dfc87 100644
--- a/statics/sass/code.scss
+++ a/statics/sass/code.scss
@@ -1,3 +1,5 @@
+@import 'colours';
+
 pre {
   height: 100%;
   width: 100%;
@@ -15,6 +17,10 @@
 
   code {
     counter-increment: line;
+
+    @media (prefers-color-scheme: dark) {
+      color: #abb2bf;
+    }
 
     &::before {
       content: counter(line);
@@ -22,7 +28,7 @@
       width: 2em;
       padding: 0 1em 0.3em 0;
       margin-right: .5em;
-      color: #888;
+      color: $asideColour;
       -webkit-user-select: none;
     }
   }
diff --git a/statics/sass/diff.scss b/statics/sass/diff.scss
index f959b52..f804be1 100644
--- a/statics/sass/diff.scss
+++ a/statics/sass/diff.scss
@@ -1,3 +1,9 @@
+pre.diff {
+  @media (prefers-color-scheme: dark) {
+    color: #abb2bf;
+  }
+}
+
 .diff-add-line::before, .diff-remove-line::before, .diff-context::before {
   display: inline-block;
   color: #888;
@@ -16,6 +22,10 @@
   background: #e6ffec;
   display: block;
 
+  @media (prefers-color-scheme: dark) {
+    background: rgba(70, 149, 74, 0.15);
+  }
+
   &::before {
     content: '+ ';
   }
@@ -24,6 +34,10 @@
 .diff-remove-line {
   background: #ffebe9;
   display: block;
+
+  @media (prefers-color-scheme: dark) {
+    background: rgba(229, 83, 75, 0.15);
+  }
 
   &::before {
     content: '- ';
diff --git a/statics/sass/style.scss b/statics/sass/style.scss
index 3b213cb..ac2d1e4 100644
--- a/statics/sass/style.scss
+++ a/statics/sass/style.scss
@@ -1,7 +1,19 @@
 @import 'util';
 @import 'diff';
 @import 'tables';
 @import 'code';
+@import 'colours';
+
+@media (prefers-color-scheme: dark) {
+  html {
+    background: #000;
+    color: $darkModeTextColour;
+  }
+
+  h2, h3 {
+    color: darken($darkModeHighlightColour, 20%);
+  }
+}
 
 body {
   font-family: sans-serif;
@@ -16,14 +28,26 @@
   margin-top: 2rem;
   border-bottom: solid 3px #ccc;
 
+  @media (prefers-color-scheme: dark) {
+    border-bottom-color: $darkModeHighlightColour;
+  }
+
   a {
     padding: 2px 0.75em;
     color: #777;
     font-size: 110%;
+
+    @media (prefers-color-scheme: dark) {
+      color: $darkModeHighlightColour;
+    }
 
     &.active {
       color: #000;
       background-color: #ccc;
+
+      @media (prefers-color-scheme: dark) {
+        background: $darkModeHighlightColour;
+      }
     }
   }
 }
@@ -32,6 +56,10 @@
   padding: 2rem;
   margin: 0;
   border-bottom: solid 3px #ccc;
+
+  @media (prefers-color-scheme: dark) {
+    border-bottom-color: $darkModeHighlightColour;
+  }
 }
 
 footer {
@@ -39,14 +67,26 @@
   text-align: center;
   font-size: 80%;
   color: #ccc;
+
+  @media (prefers-color-scheme: dark) {
+    color: $darkModeTextColour;
+  }
 }
 
 a {
   text-decoration: none;
   color: blue;
+
+  @media (prefers-color-scheme: dark) {
+    color: darken($darkModeHighlightColour, 10%);
+  }
 
   &.no-style {
     color: inherit;
+
+    @media (prefers-color-scheme: dark) {
+      color: darken($darkModeHighlightColour, 10%);
+    }
   }
 
   &:hover {
diff --git a/statics/sass/tables.scss b/statics/sass/tables.scss
index bfc4a1a..62bfa5d 100644
--- a/statics/sass/tables.scss
+++ a/statics/sass/tables.scss
@@ -1,4 +1,10 @@
+@import 'colours';
+
 table {
+  @media (prefers-color-scheme: dark) {
+    color: darken($darkModeHighlightColour, 20%);
+  }
+
   border-collapse: collapse;
 
   th {
@@ -11,9 +17,18 @@
 
   a {
     color: black;
+
+    @media (prefers-color-scheme: dark) {
+      color: darken($darkModeHighlightColour, 15%);
+    }
 
     &:hover {
       color: #00f;
+
+      @media (prefers-color-scheme: dark) {
+        color: darken($darkModeHighlightColour, 15%);
+        text-decoration: underline;
+      }
     }
   }
 
@@ -21,6 +36,10 @@
     tr {
       &:nth-child(odd) {
         background: #f7f7f7;
+
+        @media (prefers-color-scheme: dark) {
+          background: #111;
+        }
       }
 
       &.no-background {
@@ -37,7 +56,7 @@
       }
 
       &.separator {
-        background: white !important;
+        background: none !important;
         height: 1rem;
       }
     }
@@ -50,6 +69,10 @@
   .nested-tree {
     color: blue !important;
     font-weight: bold;
+
+    @media (prefers-color-scheme: dark) {
+      color: $darkModeTextColour !important;
+    }
   }
 }
 
diff --git a/templates/repo/about.html b/templates/repo/about.html
index 9fe7e67..29ae116 100644
--- a/templates/repo/about.html
+++ a/templates/repo/about.html
@@ -1,9 +1,10 @@
 {% extends "repo/base.html" %}
 
 {% block head %}
 {% if let Some(readme) = readme %}
     {% if readme.0 == crate::git::ReadmeFormat::Markdown %}
         <link rel="stylesheet" type="text/css" href="/highlight.css" />
+        <link rel="stylesheet" type="text/css" href="/highlight-dark.css" />
     {% endif %}
 {% endif %}
 {% endblock %}
diff --git a/templates/repo/commit.html b/templates/repo/commit.html
index b19510a..113d8df 100644
--- a/templates/repo/commit.html
+++ a/templates/repo/commit.html
@@ -1,7 +1,8 @@
 {% extends "repo/base.html" %}
 
 {% block head %}
 <link rel="stylesheet" type="text/css" href="/highlight.css" />
+<link rel="stylesheet" type="text/css" href="/highlight-dark.css" />
 {% endblock %}
 
 {% block commit_nav_class %}active{% endblock %}
@@ -40,6 +41,6 @@
 <pre>{{ commit.body() }}</pre>
 
 <h3>Diff</h3>
-<pre>{{ commit.diff_stats|safe }}
+<pre class="diff">{{ commit.diff_stats|safe }}
 {{ commit.diff|safe }}</pre>
 {% endblock %}diff --git a/templates/repo/diff.html b/templates/repo/diff.html
index e09ff1b..958b234 100644
--- a/templates/repo/diff.html
+++ a/templates/repo/diff.html
@@ -1,13 +1,14 @@
 {% extends "repo/base.html" %}
 
 {% block head %}
 <link rel="stylesheet" type="text/css" href="/highlight.css" />
+<link rel="stylesheet" type="text/css" href="/highlight-dark.css" />
 {% endblock %}
 
 {% block diff_nav_class %}active{% endblock %}
 
 {% block content %}
 <h2>Diff</h2>
-<pre>{{ commit.diff_stats|safe }}
+<pre class="diff">{{ commit.diff_stats|safe }}
 {{ commit.diff|safe }}</pre>
 {% endblock %}diff --git a/templates/repo/file.html b/templates/repo/file.html
index b9fc882..9684a69 100644
--- a/templates/repo/file.html
+++ a/templates/repo/file.html
@@ -1,7 +1,8 @@
 {% extends "repo/base.html" %}
 
 {% block head %}
 <link rel="stylesheet" type="text/css" href="/highlight.css" />
+<link rel="stylesheet" type="text/css" href="/highlight-dark.css" />
 {% endblock %}
 
 {% block tree_nav_class %}active{% endblock %}
--
rgit 0.1.3