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

Sun Aug 15 17:41:05 UTC 2021

# 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;

On Sun, 15 Aug 2021 at 00:05, Duncan Lock <duncan.lock at gmail.com> wrote:
>
> That seems like a much better approach - I'll submit a patch using
> this in the morning and see what people think.
>
> On Sat, 14 Aug 2021 at 23:00, Steffen Weber <steffen.weber at gmail.com> wrote:
> >
> > You could add the following line which makes modern browsers use colors from their built-in dark color scheme:
> >
> > <meta name="color-scheme" content="light dark">
> >
> > https://web.dev/color-scheme/
> >
> > Am So., 15. Aug. 2021 um 03:25 Uhr schrieb Maxim Dounin <mdounin at mdounin.ru>:
> >>
> >> Hello!
> >>
> >> On Sat, Aug 14, 2021 at 08:10:07AM -0700, Duncan Lock wrote:
> >>
> >> > # HG changeset patch
> >> > # User Duncan Lock <duncan.lock at gmail.com>
> >> > # Date 1628952253 25200
> >> > #      Sat Aug 14 07:44:13 2021 -0700
> >> > # Node ID 81294b370e774c792210904f710abc0a494c5c05
> >> > # Parent  dda421871bc213dd2eb3da0015d6228839323583
> >> > Add support for dark color scheme in default index.html page
> >> >
> >> > Add a little CSS to index.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.
> >> >
> >> > See: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
> >> >
> >> > diff -r dda421871bc2 -r 81294b370e77 docs/html/index.html
> >> > --- a/docs/html/index.html      Tue Aug 10 23:43:17 2021 +0300
> >> > +++ b/docs/html/index.html      Sat Aug 14 07:44:13 2021 -0700
> >> > @@ -8,6 +8,15 @@
> >> >          margin: 0 auto;
> >> >          font-family: Tahoma, Verdana, Arial, sans-serif;
> >> >      }
> >> > +    @media (prefers-color-scheme: dark) {
> >> > +               body {
> >> > +                       background-color: #363839;
> >> > +                       color: #d1cec9;
> >> > +               }
> >> > +               a {
> >> > +                       color: #c4c4ff;
> >> > +               }
> >> > +    }
> >> >  </style>
> >> >  </head>
> >> >  <body>
> >>
> >> Thank you for the patch.  I don't think this is something we want
> >> to customize in the example pages such as index.html, especially
> >> given that we don't set other colors.
> >>
> >> --
> >> Maxim Dounin
> >> http://mdounin.ru/
> >> _______________________________________________
> >> nginx-devel mailing list
> >> nginx-devel at nginx.org
> >> http://mailman.nginx.org/mailman/listinfo/nginx-devel
> >
> > _______________________________________________
> > nginx-devel mailing list
> > nginx-devel at nginx.org
> > http://mailman.nginx.org/mailman/listinfo/nginx-devel
