WebView color scheme (black on black) can make text almost impossible to read #172

Activity

1. renkun-ken commented on Jan 8, 2020

   

   renkun-ken

   on Jan 8, 2020

   Last edited by renkun-ken

   Member

   More actions

   The issue is caused by WebView default styling under dark theme in VSCode (https://code.visualstudio.com/api/extension-guides/webview#theming-webview-content).

   I cannot reproduce the dimmed help page. Everything looks normal on my Ubuntu and macOS machines under dark themes. I guess it is related to the VSCode theme you use. Under light theme and official dark themes (Dark (Visual Studio), Dark+ (default)), the display looks normal. Since the WebView triggered by browser command does nothing more than simply show the page, we may need to find a way to override all default styling of WebView from VSCode themes.

   

   I can reproduce your viewer issue, it is also caused by the dark theme. I edit the resulted file by adding color: black; to the CSS styles of body, then the problem is gone.

   As for browseURL issue, you may notice an error message in the developer tools:

   mainThreadExtensionService.ts:65 [[object Object]]Invalid URL: /tmp/Rtmp44U4Sw/file429b436a82d8
   $onExtensionRuntimeError @ mainThreadExtensionService.ts:65
   mainThreadExtensionService.ts:66 TypeError [ERR_INVALID_URL]: Invalid URL: /tmp/Rtmp44U4Sw/file429b436a82d8
   	at onParseError (internal/url.js:243)
   	at new URL (internal/url.js:319)
   	at /home/renkun/.vscode/extensions/ikuyadeu.r-1.2.0/dist/extension.js:1
   	at b (/home/renkun/.vscode/extensions/ikuyadeu.r-1.2.0/dist/extension.js:1)
   

   browseURL does not work with the temp file because it is only supposed to work with a http URL with an HTTP server backend. Viewing a local file in WebView requires altering the resource paths to comply with WebView API and security policy.

   const html = content.toString()
           .replace("<style>body{background-color:white;}</style>",
               "<style>body{background-color:white;color:black;}</style>")
           .replace(/<script src="/g, '<script src="' + panel.webview.asWebviewUri(Uri.file(dir)) + "/")
           .replace(/<link href="/g, '<link href="' + panel.webview.asWebviewUri(Uri.file(dir)) + "/");

   Currently, both viewer and browser function are not supported to be called directly by user. Printing an htmlwidget will create a temp file with relatively fixed format so the above editing is done before showing it in WebView. The viewer would not work with any HTML file if it uses any external resources (images, JS, CSS, etc.) unless the same editing is done.

   I'll take a look and see if we find a way to override WebView default styling specifid by VSCode theme.
2. vnijs commented on Jan 8, 2020

   

   vnijs

   on Jan 8, 2020

   Author

   More actions

   Thanks for looking into this @renkun-ken. FYI I do actually use the default vscode theme (dark +).

   Perhaps this is related to some issues that have been reported for the python interactive window (https://github.com/microsoft/vscode-python/issues/3773)?

   
3. renkun-ken commented on Oct 25, 2021

   

   renkun-ken

   on Oct 25, 2021

   Last edited by renkun-ken

   Member

   More actions

   This is mostly resolved by the native help viewer. Closing.
4. renkun-ken

   closed this as completedon Oct 25, 2021