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) <matttbe@kernel.org>
linux-netdev · Mar 22, 2024 · c0a4fa0 · c0a4fa0
1 parent 932c3b8
commit c0a4fa0
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 5 deletions.
diff --git 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;
+        }
+      }
       </style>
   </head>
   <body>

diff --git 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;
+        }
+      }
       </style>
 </head>
 <body>

diff --git a/contest/contest.js b/contest/contest.js
@@ -3,7 +3,7 @@ function colorify_str(value)
     if (value == "pass") {
 	ret = '<span style="color:green">';
     } else if (value == "skip") {
-	ret = '<span style="color:blue">';
+	ret = '<span style="color:#809fff">';
     } else {
 	ret = '<span style="color:red">';
     }

diff --git 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;
+        }
+      }
       </style>
 </head>
 <body>

diff --git 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;
+        }
+      }
       </style>
 </head>
 <body>

diff --git 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 = " <span style=\"font-size: 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 {