From fd23a7d0be24aa595fec6d544f1a248f55f9b76b Mon Sep 17 00:00:00 2001 From: Martin Thomson Date: Thu, 8 Jun 2023 13:23:23 +1000 Subject: [PATCH] Dark mode dashboard This isn't so trivial, but likely only because I don't know how to drive bootstrap. This just overrides the rules for stuff we use. Feedback on color choice welcome; I just picked something that looked OK on my screen. Closes #814. --- index.html | 43 +++++++++++++++++++++++++++++++++++++------ 1 file changed, 37 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 20cccf6d..b57907fc 100644 --- a/index.html +++ b/index.html @@ -30,9 +30,8 @@ padding-bottom: 5px; } - table.dataTable > tbody > tr:target, - table.dataTable > tbody > tr.shown:target + tr { - background: #fd0; + table.dataTable > tbody > tr:is(:target, .shown:target + tr) { + background: #fdeb8b; } tr:not(:hover):not(:focus-within) > .link-control > a { @@ -44,12 +43,44 @@ height: 1em; background: currentColor; } - .clipicon-MDN { -webkit-mask: url(asset/MDN.svg) center no-repeat; mask: url(asset/MDN.svg) center no-repeat; width: 1.20833em; } + + @media (prefers-color-scheme: dark) { + :root { + color-scheme: dark; + } + :root, body { + background-color: #111; + color: white; + } + .jumbotron { + background-color: #333; + color: white; + } + a { + color: #6db5f2; + } + .dataTables_wrapper :is(.dataTables_length, .dataTables_filter, + .dataTables_info, .dataTables_processing, .dataTables_paginate) { + color: #ccc; + } + table.dataTable > tbody > tr:is(:target, .shown:target + tr) { + background: #443103; + } + .table > :is(thead, tbody, tfoot) > tr > :is(td, th) { + border-top-color: #333; + } + table.dataTable tbody tr { + background-color: #111; + } + table.dataTable.no-footer { + border-bottom-color: #ccc; + } + } @@ -108,7 +139,7 @@

legend

Mozilla is not convinced of the merits of this work, but does not see any significant negative potential.
Mozilla believes that pursuing this work in its current form would not be good for the web.
Mozilla takes no position on this work.
-
Mozilla has not taken a position on this work and is gathering more information.
+
Mozilla has not taken a position on this work and is gathering more information.
@@ -126,7 +157,7 @@

legend

"neutral": "default", "negative": "danger", "defer": "warning", - "under consideration": "dark", + "under consideration": "info", } var REPO_OWNER = "mozilla";