Dark mode support for HTML output - #11831
Conversation
| : sets the CSS `font-family` property on `code` and `pre` elements. | ||
|
|
||
| `monobackgroundcolor` | ||
| : sets the CSS `background-color` property on `code` elements | ||
| `monobackgroundcolor`, `monobackgroundcolordark` | ||
| : sets the CSS `background-color` property on `code` and `pre` elements |
There was a problem hiding this comment.
Note: affecting pre also is not a new change, just documenting existing behavior.
jgm
left a comment
jgm
left a comment
There was a problem hiding this comment.
I made some suggestions on simplifying the CSS template. (Not exhaustive but you should get the idea.) As noted, leave the man pages unchanged for now. As for browser support, if the CSS can be simpler I'd accept 98% support for post-2010 browsers, I think.
|
Okay, removed the man page changes and updated the template per your suggestions. In some cases this is definitely clearer, in others it looks a bit messier to me, but it at least matches your suggestions. The only weird case is with the |
| color: light-dark($if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$, $if(fontcolordark)$$fontcolordark$$else$#fdfdfd$endif$); | ||
| background-color: $if(backgroundcolor)$$backgroundcolor$$else$#1a1a1a$endif$; | ||
| background-color: light-dark($if(backgroundcolor)$$backgroundcolor$$else$#1a1a1a$endif$, $if(backgroundcolordark)$$backgroundcolordark$$else$#fdfdfd$endif$); | ||
| color-scheme:$if(fontcolor)$ light$elseif(backgroundcolor)$ light$elseif(fontcolordark)$$elseif(backgroundcolordark)$$else$ light$endif$$if(fontcolordark)$ dark$elseif(backgroundcolordark)$ dark$elseif(fontcolor)$$elseif(backgroundcolor)$$else$ dark$endif$; |
There was a problem hiding this comment.
The way the logic works out, this should always output at least one of the two.
| $if(linkcolor)$ | ||
| color: light-dark($linkcolor$, $if(linkcolordark)$$linkcolordark$$else$inherit$endif$); | ||
| $elseif(linkcolordark)$ | ||
| color: light-dark(inherit, $linkcolordark$); | ||
| $endif$ |
There was a problem hiding this comment.
These avoid outputting a redundant light-dark(inherit, inherit).
2 participants
Originally jgm/djot#409, before I found out this was part of pandoc.
Essentially, the goal here is to add a "just works" dark mode support to pandoc's HTML generation while being minimally intrusive and not breaking custom schemes. It consists of the following changes to the styles.html template:
quotecolorandquotebordercolorare added as these are the only two unique colors in the stylesheet that weren't already configurable. They affect the styling ofblockquotetags.*colorvariables for the HTML generation now has a*colordarkfriend, which controls the color in dark mode.monobackgroundcolorifmonobackgroundcolorormonobackgroundcolordarkis provided, although the provided color will only work in the respective mode. (it usesinheritotherwise)color-schemeis emitted to either allow both dark and light mode by default, or restrict to only light or dark mode depending on what variables the user defines. (see below)Part of being minimally intrusive is only enabling light and dark mode in the following cases:
However, because pandoc's template conditions can only check one variable at a time, only the
fontcolorandbackgroundcolor(and their*darkversions) variables is checked to determine whether the user has overrided the colors, and thus, which schemes they would like to be enabled. This means that, in general, if a user has changedbackgroundcolororfontcoloronly, that means they will default to only light mode, and if a user has changedbackgroundcolordarkorfontcolordarkonly, it will default to only dark mode.There are a few other caveats, but these have been added to
MANUAL.txtand hopefully are clear.Since the
light-darkcoloring is a "new" standard (around 2024, 88% coverage), it includes explicit fallbacks for light mode. However, as part of implementing this change,currentColorwas added to a few color definitions as opposed to repeating the font color, since this has been supported since 2010 at 98% availability.That said, I have no idea what pandoc wishes to support browser-wise, and am only taking a conservative approach out of caution. I don't mind removing the fallbacks if you'd prefer.