HTML notes: font color incompatible with dark mode

[brevilo]

Operating system

macOS

Joplin version

2.13.9

Desktop version info

macOS 13.6.3

Current behaviour

When using dark mode a HTML note (here: import from Evernote/ENEX) gets rendered with the default font color being black (the note itself doesn't specify any primary font color). This means normal texts get rendered black on dark. The only way to "fix" that is to switch the UI to light mode.

Expected behaviour

The default text color for rendering of HTML notes should be white when using dark mode. Explicit HTML font coloring should be retained, though.

The golden solution would be to go beyond that and let the user set/override the default text and background colors per notebook or even per note. But that would rather warrant a separate issue (as an enhancement request).

Logs

Thanks and keep up the great work!

[personalizedrefrigerator]

For context, this is a screenshot of an HTML note in the note viewer in dark mode (it looks similar in the rich text editor):

[personalizedrefrigerator]

Possibly related:

joplin/packages/renderer/HtmlToHtml.ts

Lines 88 to 91 in 0f81b08

	// Note: the "theme" variable is ignored and instead the light theme is
	// always used for HTML notes.
	// See: https://github.com/laurent22/joplin/issues/3698
	public async render(markup: string, _theme: any, options: RenderOptions): Promise<RenderResult> {

[brevilo]

Well spotted!

However, this means the current implementation lacks the corresponding change of the background to a light/white color IOW, ignore dark mode for the background rendering as well.

That said, I'd argue that the original assessment in #3698 about the default webpage colors being white on black is hardly the norm nowadays. Modern websites come in all sorts of colors. Heck, I even have a browser addon running that renders all websites in my preferred dark theme That clearly shows that, technically, you don't have to (and probably shouldn't) make any assumptions. Keep in mind that HTML is just a markup language, like markdown. It should be content-agnostic.

Thus I propose the following:

• Render HTML pages based on the current theme (light or dark mode), setting the text/foreground color and background color to match the theme
• Honor explicit HTML color attributes/styles (as usual)

[personalizedrefrigerator]

I think the issue is, in part, that clipped websites include CSS in addition to HTML.

Because most browsers set the default text color to black and background color to white. As such, if a website overrides just the background but not the text color, text might be invisible.

It is possible to override the defaults in some browsers, and this produces issues with many websites.

For example, in Firefox

This breaks example.com:

As such, there are a few options:

1. Make HTML notes with an associated webclipper URL not auto-switch themes. This isn't a good solution because users can manually change/remove/add URLs to notes. Additionally, I'm unsure whether HTML email-to-note emails have an associated URL.
2. Auto-switch the theme, but allow users to manually specify a theme for individual notes.
3. Auto-switch the theme. Also loop through all elements in the HTML note and adjust the foreground/background colors to have sufficient contrast.
4. Always default to a black foreground and white background.
   • Clipped websites that include CSS may still switch to a dark theme in dark mode if they use prefers-color-scheme.
   • We could also include a light/dark toggle button in the toolbar to allow users to manually toggle the theme.

[brevilo]

It is possible to override the defaults in some browsers, and this produces issues with many websites.

Just the sake of discussion (and since I referenced it): Dark Reader

Also, keep in mind that not all HTML notes represent webpage clippings. My use case is the Evernote (ENEX) import using HTML. Those notes do not contain any CSS or body-color attributes. Hence my proposal above, which covers notes with explicit CSS/styles/attributes (like web clippings) and those without (ENEX -> HTML imports).

Thus from your options I'd vote for a combination of 2 and 4, which are pretty much in line with what I proposed:

• default to the active theme when no CSS/colors are set
• honor any explicit color setting incl. prefers-color-scheme
• let the user toggle the theme on a per-note basis

[laurent22]

I think the solution is simply to always have a light theme for the note viewer when notes are HTML.

Maybe later we can do something smarter that for example processing all colours, but for now the only logical thing to do is to keep a white theme.