css: Improve dark mode colors.

2 files changed, 12 insertions, 9 deletions

diff --git a/assets/mumi.scss b/assets/mumi.scss
index 3c2c7f3..5c0c68b 100644
--- a/assets/mumi.scss
+++ b/assets/mumi.scss
@@ -24,6 +24,8 @@ $commit_header: #005cc5;
   --nav-logo-color: #333;
   --tr-hover-color: #{mix($grey-50, $white, 33%)};
   --th-background-color: #{mix($grey-50, $white, 50%)};
+  --snippet-background-color: #{mix($grey-50, $white, 50%)};
+  --status-tag-color: #{$white};
 }
 
 // Dark theme
@@ -33,6 +35,8 @@ $commit_header: #005cc5;
   --nav-logo-color: #{rgba(darken($grey-200, 6%), 0.8)};
   --tr-hover-color: var(--code-background-color);
   --th-background-color: var(--code-background-color);
+  --snippet-background-color: var(--code-background-color);
+  --status-tag-color: #{$black};
 }
 
 @media only screen and (prefers-color-scheme: dark) {
@@ -194,7 +198,7 @@ tr.serious svg {
     vertical-align: text-bottom;
 }
 tr.important svg {
-    fill: #000;
+    fill: var(--primary);
     margin-right: .5em;
     height: 1.2em;
     vertical-align: text-bottom;
@@ -257,7 +261,7 @@ nav span.navbar-text {
 }
 
 body > footer {
-    border-color: #1A1A1A1A;
+    border-color: var(--nav-border-color);
     border-style: dashed none none none;
     border-width: 2px;
     width: 100%;
@@ -265,8 +269,8 @@ body > footer {
     text-align: center;
     margin-top: 3rem;
     padding: 1rem;
-    color: #586069;
-    background: #fafafa;
+    color: var(--nav-logo-color);
+    background: var(--nav-background-color);
 }
 
 table {
@@ -339,7 +343,7 @@ a.message-anchor {
     position: fixed;
     right: 10px;
     top: 100px;
-    background: white;
+    background: var(--nav-background-color);
     border: 1px solid #ddd;
     border-radius: 6px;
     padding: .5em;
@@ -379,7 +383,6 @@ a.message-anchor {
     .conversation .avatar {
         height: 48px;
         width: 48px;
-        border: 1px solid #ddd;
         border-radius: 6px;
         color: #fff;
         display: flex;
@@ -579,7 +582,7 @@ div.line pre {
 }
 
 .message .snippet {
-    background-color: #fbfbfb;
+    background-color: var(--snippet-background-color);
 }
 
 .filter {
@@ -595,7 +598,7 @@ div.line pre {
 
 .status-tag {
     display: inline-block;
-    color: #fff;
+    color: var(--status-tag-color);
     text-align: center;
     padding: 4px;
     border-radius: 3px;
diff --git a/mumi/web/view/html.scm b/mumi/web/view/html.scm
index aa00203..cb80f8f 100644
--- a/mumi/web/view/html.scm
+++ b/mumi/web/view/html.scm
@@ -51,7 +51,7 @@
                  (body '())
                  (title "Guix issue tracker"))
   `((doctype "html")
-    (html (@ (lang "en"))
+    (html (@ (data-theme "light") (lang "en"))
      (head
       (title ,title)
       (meta (@ (http-equiv "Content-Type") (content "text/html; charset=UTF-8")))