Desktop: Fixes #9511: HTML notes are not readable in dark mode

packages/renderer/HtmlToHtml.ts

@@ -3,6 +3,8 @@ import linkReplacement from './MdToHtml/linkReplacement';
 import utils, { ItemIdToUrlHandler } from './utils';
 import InMemoryCache from './InMemoryCache';
 import { RenderResult } from './MarkupToHtml';
+import noteStyle, { whiteBackgroundNoteStyle } from './noteStyle';
+import { Options as NoteStyleOptions } from './noteStyle';
 const md5 = require('md5');
 
 // Renderered notes can potentially be quite large (for example
@@ -39,6 +41,7 @@ interface RenderOptions {
 	enableLongPress: boolean;
 	itemIdToUrl?: ItemIdToUrlHandler;
 	allowedFilePrefixes?: string[];
+	whiteBackgroundNoteRendering?: boolean;
 }
 
 // https://github.com/es-shims/String.prototype.trimStart/blob/main/implementation.js
@@ -81,14 +84,22 @@ export default class HtmlToHtml {
 		return this.fsDriver_;
 	}
 
-	public async allAssets(/* theme*/): Promise<any[]> {
-		return []; // TODO
+	public async allAssets(theme: any, noteStyleOptions: NoteStyleOptions = null) {
+		let cssStrings: string[] = [];
+
+		if (noteStyleOptions.whiteBackgroundNoteRendering) {
+			cssStrings = [whiteBackgroundNoteStyle()];
+		} else {
+			cssStrings = [noteStyle(theme, noteStyleOptions).join('\n')];
+		}
+
+		return [await this.fsDriver().cacheCssToFile(cssStrings)];
 	}
 
 	// 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> {
+	public async render(markup: string, theme: any, options: RenderOptions): Promise<RenderResult> {
 		options = {
 			splitted: false,
 			postMessageSyntax: 'postMessage',
@@ -152,9 +163,7 @@ export default class HtmlToHtml {
 			};
 		}
 
-		// const lightTheme = themeStyle(Setting.THEME_LIGHT);
-		// let cssStrings = noteStyle(lightTheme);
-		let cssStrings: string[] = [];
+		let cssStrings = options.whiteBackgroundNoteRendering ? [whiteBackgroundNoteStyle()] : noteStyle(theme);
 
 		if (options.splitted) {
 			const splitted = splitHtml(html);

packages/renderer/noteStyle.ts

@@ -10,8 +10,44 @@ function formatCssSize(v: any): string {
 export interface Options {
 	contentMaxWidth?: number;
 	contentMaxWidthTarget?: string;
+	themeId?: number;
+	whiteBackgroundNoteRendering?: boolean;
 }
 
+// If we are viewing an HTML note, it means it comes from the web clipper or
+// emil-to-note, in which case we don't apply any specific theme. We just need
+// to ensure the background is white so that we don't end up with a dark theme
+// and dark font for example. https://github.com/laurent22/joplin/issues/9511
+export const whiteBackgroundNoteStyle = () => {
+	return `
+		body {
+			background-color: #ffffff;
+		}
+
+		/* TinyMCE adds a dashed border for tables that have no borders
+		to make it easier to view where the cells are and edit them.
+		However HTML notes may contain many nested tables used for
+		layout and we also consider that these notes are more or less
+		read-only. Because of this, we remove the dashed lines in this
+		case as it makes the note more readable. */
+
+		.mce-item-table:not([border]),
+		.mce-item-table:not([border]) caption,
+		.mce-item-table:not([border]) td,
+		.mce-item-table:not([border]) th,
+		.mce-item-table[border="0"],
+		.mce-item-table[border="0"] caption,
+		.mce-item-table[border="0"] td,
+		.mce-item-table[border="0"] th,
+		table[style*="border-width: 0px"],
+		table[style*="border-width: 0px"] caption,
+		table[style*="border-width: 0px"] td,
+		table[style*="border-width: 0px"] th {
+			border: none !important;
+		}
+	`;
+};
+
 export default function(theme: any, options: Options = null) {
 	options = {
 		contentMaxWidth: 0,