[PATCH RESEND v2] css: Support for dark mode

Jason A. Donenfeld Jason at zx2c4.com
Thu Jan 12 00:33:50 UTC 2023


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 at 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 at 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))



More information about the CGit mailing list