diff --git a/src/main.rs b/src/main.rs
@@ -52,13 +52,14 @@ async fn main() {
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 @@ async fn main() {
)))),
)
.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
@@ -0,0 +1,3 @@
+$darkModeHighlightColour: #20c20e;
+$darkModeTextColour: #abb2bf;
+$asideColour: #888;
\ No newline at end of file
diff --git a/statics/sass/code.scss b/statics/sass/code.scss
@@ -1,3 +1,5 @@
+@import 'colours';
+
pre {
height: 100%;
width: 100%;
@@ -16,13 +18,17 @@ pre {
code {
counter-increment: line;
+ @media (prefers-color-scheme: dark) {
+ color: #abb2bf;
+ }
+
&::before {
content: counter(line);
display: inline-block;
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
@@ -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: '+ ';
}
@@ -25,6 +35,10 @@
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
@@ -2,6 +2,18 @@
@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 @@ nav {
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 @@ main {
padding: 2rem;
margin: 0;
border-bottom: solid 3px #ccc;
+
+ @media (prefers-color-scheme: dark) {
+ border-bottom-color: $darkModeHighlightColour;
+ }
}
footer {
@@ -39,14 +67,26 @@ footer {
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
@@ -1,4 +1,10 @@
+@import 'colours';
+
table {
+ @media (prefers-color-scheme: dark) {
+ color: darken($darkModeHighlightColour, 20%);
+ }
+
border-collapse: collapse;
th {
@@ -12,8 +18,17 @@ table.repositories {
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 @@ table.repositories {
tr {
&:nth-child(odd) {
background: #f7f7f7;
+
+ @media (prefers-color-scheme: dark) {
+ background: #111;
+ }
}
&.no-background {
@@ -37,7 +56,7 @@ table.repositories {
}
&.separator {
- background: white !important;
+ background: none !important;
height: 1rem;
}
}
@@ -50,6 +69,10 @@ table.repositories {
.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
@@ -4,6 +4,7 @@
{% 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
@@ -2,6 +2,7 @@
{% 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 %}
\ No newline at end of file
diff --git a/templates/repo/diff.html b/templates/repo/diff.html
@@ -2,12 +2,13 @@
{% 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 %}
\ No newline at end of file
diff --git a/templates/repo/file.html b/templates/repo/file.html
@@ -2,6 +2,7 @@
{% 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 %}