Specify <meta name="color-scheme" content="light dark">

stanio · stanio · commit af59b9992e34 · 2024-09-01T09:13:16.000+03:00
Standard metadata names <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name>: > color-scheme: specifies one or more color schemes with which > the document is compatible. The browser will use this information > in tandem with the user's browser or device settings to determine > what colors to use for everything from background and foregrounds > to form controls and scrollbars. This also adjusts the selection/highlight colors, all CSS system colors: - https://drafts.csswg.org/css-color/#css-system-colors It could prevent "white flashes" in some contexts. The difference with the CSS `color-scheme` property [1] is, for example, with Firefox View > Page Style > No Style it still honors the browser's color theme. [1] https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
diff --git a/src/jsonformatter.ts b/src/jsonformatter.ts
@@ -217,6 +217,7 @@ function toHTML(content: string, title: string) {
   return `<!DOCTYPE html>
 <html><head><title>${htmlEncode(title)}</title>
 <meta charset="utf-8">
+<meta name="color-scheme" content="light dark">
 <link rel="stylesheet" type="text/css" href="${chrome.runtime.getURL("viewer.css")}">
 </head><body>
 ${content}
