From dc373718c63624acae3611983a115b723892c0bc Mon Sep 17 00:00:00 2001 From: Ricardo Wurmus Date: Tue, 20 Dec 2022 22:47:54 +0100 Subject: css: Improve dark mode colors. --- assets/mumi.scss | 19 +++++++++++-------- mumi/web/view/html.scm | 2 +- 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"))) -- cgit v1.2.3