summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorRicardo Wurmus <rekado@elephly.net>2022-12-20 22:47:54 +0100
committerRicardo Wurmus <rekado@elephly.net>2022-12-20 22:47:54 +0100
commitdc373718c63624acae3611983a115b723892c0bc (patch)
tree3e0556b4dbafc12c69ec1caa4fff7a7f7bd88363
parente7e90429867d41825bfdfe6668f582393bfaeff6 (diff)
css: Improve dark mode colors.
-rw-r--r--assets/mumi.scss19
-rw-r--r--mumi/web/view/html.scm2
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")))