[PATCH] Add support for dark color scheme in default index.html page
Duncan Lock
duncan.lock at gmail.com
Mon Aug 16 02:47:33 UTC 2021
That works for me!
In this case, because the CSS is inline, there's no difference between
using the meta tag and the CSS color-scheme.
If you want to stop hard-coding things, I would also take out those
hard-coded Windows only fonts - and just let the browsers default
cross-platform styles - and the users preferences, decide the font to
use.
So, I would suggest also changing this:
font-family: Tahoma, Verdana, Arial, sans-serif;
to this:
font-family: sans-serif;
Which is simpler and produces better results cross-platform?
On Sun, 15 Aug 2021 at 18:21, Maxim Dounin <mdounin at mdounin.ru> wrote:
>
> 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/
> _______________________________________________
> nginx-devel mailing list
> nginx-devel at nginx.org
> http://mailman.nginx.org/mailman/listinfo/nginx-devel
More information about the nginx-devel
mailing list