From c0a4fa09f0f4d3c13471afff6b3231749854fd22 Mon Sep 17 00:00:00 2001 From: "Matthieu Baerts (NGI0)" Date: Wed, 20 Mar 2024 11:25:11 +0100 Subject: [PATCH] html: support dark scheme While working on an MPTCP version of "flakes", the Dark Reader extension I used with my browser was poorly rendering the page when used from a local server. I realised it was easy to add a dark scheme support by overriding some colours in a '@media (prefers-color-scheme: dark)' section, in the CSS. So it will used the dark scheme if the browser prefers a dark scheme. Note that a text written with the default 'blue' colour is hardly visible when a dark background is used. So I used the recommended '#809fff' colour instead, a bit lighter, still blue. It is used with and without the dark scheme. Signed-off-by: Matthieu Baerts (NGI0) --- checks.html | 13 +++++++++++++ contest/contest.html | 13 +++++++++++++ contest/contest.js | 2 +- contest/flakes.html | 13 +++++++++++++ status.html | 13 +++++++++++++ status.js | 8 ++++---- 6 files changed, 57 insertions(+), 5 deletions(-) diff --git a/checks.html b/checks.html index 603020e..309e757 100644 --- a/checks.html +++ b/checks.html @@ -35,6 +35,19 @@ flex: 50%; padding: 1em; } + + @media (prefers-color-scheme: dark) { + body { + color: #eee; + background: #121212; + } + a { + color: #809fff; + } + tr:nth-child(even) { + background-color: #000000; + } + } diff --git a/contest/contest.html b/contest/contest.html index 7c5a5a5..f050f96 100644 --- a/contest/contest.html +++ b/contest/contest.html @@ -45,6 +45,19 @@ padding: 1em; border-radius: 0.2em; } + + @media (prefers-color-scheme: dark) { + body { + color: #eee; + background: #121212; + } + a { + color: #809fff; + } + tr:nth-child(even) { + background-color: #000000; + } + } diff --git a/contest/contest.js b/contest/contest.js index 5d16b2b..8d03f96 100644 --- a/contest/contest.js +++ b/contest/contest.js @@ -3,7 +3,7 @@ function colorify_str(value) if (value == "pass") { ret = ''; } else if (value == "skip") { - ret = ''; + ret = ''; } else { ret = ''; } diff --git a/contest/flakes.html b/contest/flakes.html index fa2c2f7..2c7c411 100644 --- a/contest/flakes.html +++ b/contest/flakes.html @@ -40,6 +40,19 @@ flex: 50%; padding: 1em; } + + @media (prefers-color-scheme: dark) { + body { + color: #eee; + background: #121212; + } + a { + color: #809fff; + } + tr:nth-child(even) { + background-color: #000000; + } + } diff --git a/status.html b/status.html index c3a8843..3bce3eb 100644 --- a/status.html +++ b/status.html @@ -54,6 +54,19 @@ #flake-link { margin: 1em; } + + @media (prefers-color-scheme: dark) { + body { + color: #eee; + background: #121212; + } + a { + color: #809fff; + } + tr:nth-child(even) { + background-color: #000000; + } + } diff --git a/status.js b/status.js index 33c26bf..edc3fae 100644 --- a/status.js +++ b/status.js @@ -115,7 +115,7 @@ function colorify_basic(value) { return colorify_str_any(value, {"fail": "red", "pass": "green", - "pending": "blue"}); + "pending": "#809fff"}); } function colorify_str(value, good) @@ -393,7 +393,7 @@ function load_result_table_one(data_raw, table, reported, avgs) var str_psf = {"str": "", "overall": ""}; colorify_str_psf(str_psf, "fail", fail, "red"); - colorify_str_psf(str_psf, "skip", skip, "blue"); + colorify_str_psf(str_psf, "skip", skip, "#809fff"); colorify_str_psf(str_psf, "pass", pass, "green"); const span_small = " ("; @@ -449,10 +449,10 @@ function load_result_table_one(data_raw, table, reported, avgs) if (passed > 1000 * 60 * 15 /* 15 min */) color = "red"; else - color = "blue"; + color = "#809fff"; } else if (remain > 0) { pend = "pending (expected in " + (msec_to_str(remain)).toString() + ")"; - color = "blue"; + color = "#809fff"; } else if (remain < -1000 * 60 * 60 * 2) { /* 2 h */ pend = "timeout"; } else {