Page MenuHomePhabricator

Spike: Provide web team with a list of overrides
Closed, ResolvedPublicBUG REPORT

Assigned To
Authored By
Jun 27 2023, 9:55 PM
Referenced Files
F37162375: image.png
Aug 4 2023, 4:55 PM
F37162365: image.png
Aug 4 2023, 4:55 PM
F37162373: image.png
Aug 4 2023, 4:55 PM
F37162353: image.png
Aug 4 2023, 4:55 PM


Request from web team (Jdlrobson) to @Dbrant :
I'd like to have a list of CSS overrides in the apps that workaround problems with templates in dark mode. With this list, I'd like to start moving these rules into the templates themselves so that web can benefit from them when we begin work on dark mode.

Related Objects

Event Timeline

Here is a condensed version of how the PCS page-library handles dark mode (and our other themes - black and sepia):

  • Adds a CSS class to the body element that defines the overall background and text color.
  • Adds CSS classes that override (with !important) the background color of tables and divs.
  • Provides a class called notheme that can be added to an element to exclude it from theming. This is intended to be the mechanism for template authors to specify elements that truly need to be a specific color.

In addition, when our page/mobile-html endpoint generates its content, it walks through the DOM and looks for elements that have explicit background colors (and a few other heuristics); and for those elements it also adds the notheme class, so that they won't be touched by theming. However, I believe this was intended to be a temporary measure, to be in place while usage of notheme gets adopted in actual templates, with the eventual goal of theming all element backgrounds (except those with notheme) using pure CSS.

Discussions about usage of notheme can be found in T236137 and T256277#6297683.

On a slight tangent, I thought I'd mention a quick note about one of the drawbacks of using invert for achieving dark mode.
(n.b. This was tested on my older 92dpi monitor; the issue might not be as relevant for higher-dpi displays.)

Here is how an example title text looks different when using invert versus proper colors:

invert:true white-on-black:
image.png (110×225 px, 5 KB)
image.png (110×225 px, 4 KB)

Note how the title with proper colors looks somewhat "fuller" and brighter than the inverted title. If we zoom in on the pixels, we see the reason for the difference:

invert:true white-on-black:
image.png (345×330 px, 2 KB)
image.png (345×330 px, 2 KB)

When using invert, the browser is no longer able to do subpixel antialiasing of the text, and falls back to standard antialiasing. On a lower-dpi display, this is fairly noticeable, and I'd call this a pretty undesirable UX degradation.

@Dbrant do you have any examples of bugs you ran into due to templates? For example I saw T284327 and that seems to be important to understand the common theme of issues as we enter this work.

@Jdlrobson with Dmitry going on sabbatical I'll do a review later this week of what's included and see if there is anything missing

Thanks! Let me know if I can help with anything!