[PATCH] Add support for dark color scheme in default index.html page

Mon Aug 16 01:21:11 UTC 2021

Hello!

On Sun, Aug 15, 2021 at 10:41:05AM -0700, Duncan Lock wrote:

> # HG changeset patch
> # User Duncan Lock <duncan.lock at gmail.com>
> # Date 1629049097 25200
> #      Sun Aug 15 10:38:17 2021 -0700
> # Node ID 945d9836012ed84dea05577027a30a38e38a59f3
> # Parent  dda421871bc213dd2eb3da0015d6228839323583
> Add support for dark color scheme in default index & 50x pages
> 
> Add a meta tag to index.html & 50x.html to support dark color schemes.
> This will display the index page in dark colors if the user has
> requested a dark color scheme in their system UI or browser, and
> display the same as the previous version if not.
> 
> This uses the browsers built-in styles and doesn't hard code any colors
> or styles.
> 
> diff -r dda421871bc2 -r 945d9836012e docs/html/50x.html
> --- a/docs/html/50x.html        Tue Aug 10 23:43:17 2021 +0300
> +++ b/docs/html/50x.html        Sun Aug 15 10:38:17 2021 -0700
> @@ -2,6 +2,7 @@
>  <html>
>  <head>
>  <title>Error</title>
> +<meta name="color-scheme" content="light dark">
>  <style>
>      body {
>          width: 35em;
> diff -r dda421871bc2 -r 945d9836012e docs/html/index.html
> --- a/docs/html/index.html      Tue Aug 10 23:43:17 2021 +0300
> +++ b/docs/html/index.html      Sun Aug 15 10:38:17 2021 -0700
> @@ -2,6 +2,7 @@
>  <html>
>  <head>
>  <title>Welcome to nginx!</title>
> +<meta name="color-scheme" content="light dark">
>  <style>
>      body {
>          width: 35em;

This approach looks much better.  While I don't understand why the 
color-scheme specification does not allow one to say something 
like "this page does not use any custom colors, feel free to use 
any color scheme you want", listing both light and dark is 
probably good enough.

I think we should use CSS variant though, as we already have CSS 
code on the pages in question.  Also added a patch to re-style CSS 
code on these pages, something I wanted to do for a long time.  
Please take a look if it works for you:

# HG changeset patch
# User Maxim Dounin <mdounin at mdounin.ru>
# Date 1629076307 -10800
#      Mon Aug 16 04:11:47 2021 +0300
# Node ID 98d71364e591de91df011ba91028038748baf19e
# Parent  dda421871bc213dd2eb3da0015d6228839323583
Welcome and 50x error pages style.

Indentation of the CSS code removed to match style of the HTML code.

diff --git a/docs/html/50x.html b/docs/html/50x.html
--- a/docs/html/50x.html
+++ b/docs/html/50x.html
@@ -3,11 +3,8 @@
 <head>
 <title>Error</title>
 <style>
-    body {
-        width: 35em;
-        margin: 0 auto;
-        font-family: Tahoma, Verdana, Arial, sans-serif;
-    }
+body { width: 35em; margin: 0 auto;
+font-family: Tahoma, Verdana, Arial, sans-serif; }
 </style>
 </head>
 <body>
diff --git a/docs/html/index.html b/docs/html/index.html
--- a/docs/html/index.html
+++ b/docs/html/index.html
@@ -3,11 +3,8 @@
 <head>
 <title>Welcome to nginx!</title>
 <style>
-    body {
-        width: 35em;
-        margin: 0 auto;
-        font-family: Tahoma, Verdana, Arial, sans-serif;
-    }
+body { width: 35em; margin: 0 auto;
+font-family: Tahoma, Verdana, Arial, sans-serif; }
 </style>
 </head>
 <body>
# HG changeset patch
# User Maxim Dounin <mdounin at mdounin.ru>
# Date 1629076313 -10800
#      Mon Aug 16 04:11:53 2021 +0300
# Node ID 698e3229fb87b0f2d523935988d0de830d906d9c
# Parent  98d71364e591de91df011ba91028038748baf19e
Dark mode support in welcome and 50x error pages.

Prodded by Duncan Lock.

diff --git a/docs/html/50x.html b/docs/html/50x.html
--- a/docs/html/50x.html
+++ b/docs/html/50x.html
@@ -3,6 +3,7 @@
 <head>
 <title>Error</title>
 <style>
+html { color-scheme: light dark; }
 body { width: 35em; margin: 0 auto;
 font-family: Tahoma, Verdana, Arial, sans-serif; }
 </style>
diff --git a/docs/html/index.html b/docs/html/index.html
--- a/docs/html/index.html
+++ b/docs/html/index.html
@@ -3,6 +3,7 @@
 <head>
 <title>Welcome to nginx!</title>
 <style>
+html { color-scheme: light dark; }
 body { width: 35em; margin: 0 auto;
 font-family: Tahoma, Verdana, Arial, sans-serif; }
 </style>


-- 
Maxim Dounin
http://mdounin.ru/
