🏡 index : ~doyle/rgit.git

0419661aa966b05395ffddce6e8975dba5e73e4e [patch]

8da86190880f3c6b95b6cb5864360851feffada8

478bde40d1ca2fda1007d4d80a86e7d058554565

0419661aa966b05395ffddce6e8975dba5e73e4e.tar.gz

Add a simple dark mode

Diff

 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 %}