List for cgit developers and users
 help / color / mirror / Atom feed
From: "Jason A. Donenfeld" <Jason@zx2c4.com>
To: samuel@kodafritt.se
Cc: cgit@lists.zx2c4.com
Subject: Re: [PATCH RESEND v2] css: Support for dark mode
Date: Thu, 12 Jan 2023 01:33:50 +0100	[thread overview]
Message-ID: <Y79VbkfCTvyvYUGv@zx2c4.com> (raw)
In-Reply-To: <CAHmME9pn7obiCcZEPy1ryu1iz+1bYxEEN7MwcaE9tuzO+cEJ-w@mail.gmail.com>

On Wed, Jan 11, 2023 at 09:56:30PM +0100, Jason A. Donenfeld wrote:
> It looks like the issue is that the string class for the light theme is:
> 
> .highlight .s {
>     color: #dd2200;
>     background-color: #fff0f0;
> }
> 
> But for the dark theme it's:
> 
> @media (prefers-color-scheme: dark)
> .highlight .s {
>     color: #e6db74;
> }
> 
> And so it winds up using the dark color, but with the light
> background, because the dark theme doesn't specify a background.

I fixed this with the below diff. It uses an explicit `@media
(prefers-color-scheme: light) block`, which MDN says, "indicates that
user has notified that they prefer an interface that has a light theme,
or has not expressed an active preference." So this seems correct.

However, I also order the light *after* the dark for non-media-query
understanding browsers. I suspect the same should be done on all the
other files.

The below diff is now on git.zx2c4.com, so you can use that link earlier
to see what it's like. Unfortunately, I think a lot of the rest of the
styling is too dark or otherwise clashing. So you might want to give the
whole thing a second pass.

diff --git a/filters/syntax-highlighting.py b/filters/syntax-highlighting.py
index 672201d..fafa30e 100755
--- a/filters/syntax-highlighting.py
+++ b/filters/syntax-highlighting.py
@@ -53,9 +53,11 @@ except TypeError:
 # highlight! :-)
 # printout pygments' css definitions as well
 sys.stdout.write('<style>')
-sys.stdout.write(formatter.get_style_defs('.highlight'))
 sys.stdout.write('\n@media (prefers-color-scheme: dark) {\n')
 sys.stdout.write(HtmlFormatter(style=dark_style, nobackground=True).get_style_defs('.highlight'))
 sys.stdout.write('\n}\n')
+sys.stdout.write('\n@media (prefers-color-scheme: light) {\n')
+sys.stdout.write(HtmlFormatter(style=dark_style, nobackground=True).get_style_defs('.highlight'))
+sys.stdout.write('\n}\n')
 sys.stdout.write('</style>')
 sys.stdout.write(highlight(data, lexer, formatter, outfile=None))


  parent reply	other threads:[~2023-01-12  0:35 UTC|newest]

Thread overview: 13+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2023-01-01 21:15 [PATCH] css: Optional support " Samuel Lidén Borell
2023-01-02  0:51 ` Jason A. Donenfeld
2023-01-01 21:15   ` [PATCH RESEND v2] css: Support " Samuel Lidén Borell
2023-01-11 20:54     ` Jason A. Donenfeld
2023-01-11 20:56       ` Jason A. Donenfeld
2023-01-12  0:33         ` Samuel Lidén Borell
2023-01-12  0:34           ` Jason A. Donenfeld
2023-01-12  0:33         ` Jason A. Donenfeld [this message]
2023-01-22 11:35           ` [PATCH v3] " Samuel Lidén Borell
2023-01-22 13:04             ` Samuel Lidén Borell
2023-01-27 20:42             ` Jason A. Donenfeld
2023-01-29 17:07               ` Samuel Lidén Borell
2023-01-29 16:55                 ` [PATCH v4] " Samuel Lidén Borell

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=Y79VbkfCTvyvYUGv@zx2c4.com \
    --to=jason@zx2c4.com \
    --cc=cgit@lists.zx2c4.com \
    --cc=samuel@kodafritt.se \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for NNTP newsgroup(s).