small contrast of html view in VScode darkmode

[fujiisoup]

If using xarray inside VScode with darkmode, the new html repr has a small contrast of the text color and background.

Maybe the text color comes from the default setting, but the background color is not.
In light mode, it looks nice.

Versions

Output of xr.show_versions()

INSTALLED VERSIONS ------------------ commit: None python: 3.7.5 (default, Oct 25 2019, 15:51:11) [GCC 7.3.0] python-bits: 64 OS: Linux OS-release: 4.15.0-1080-oem machine: x86_64 processor: x86_64 byteorder: little LC_ALL: None LANG: en_US.UTF-8 LOCALE: en_US.UTF-8 libhdf5: 1.10.4 libnetcdf: 4.6.1

xarray: 0.15.1
pandas: 0.25.3
numpy: 1.17.4
scipy: 1.3.2
netCDF4: 1.4.2
pydap: None
h5netcdf: 0.8.0
h5py: 2.9.0
Nio: None
zarr: None
cftime: 1.0.4.2
nc_time_axis: None
PseudoNetCDF: None
rasterio: None
cfgrib: None
iris: None
bottleneck: 1.3.1
dask: 2.9.0
distributed: 2.9.0
matplotlib: 3.1.1
cartopy: None
seaborn: 0.9.0
numbagg: None
setuptools: 42.0.2.post20191203
pip: 19.3.1
conda: None
pytest: 5.3.2
IPython: 7.10.2
sphinx: 2.3.0

[fujiisoup]

It is how it looks like in Light mode

Here is the css definition

xarray/xarray/static/css/style.css

Lines 5 to 14 in 59b470f

	:root {
	--xr-font-color0: var(--jp-content-font-color0, rgba(0, 0, 0, 1));
	--xr-font-color2: var(--jp-content-font-color2, rgba(0, 0, 0, 0.54));
	--xr-font-color3: var(--jp-content-font-color3, rgba(0, 0, 0, 0.38));
	--xr-border-color: var(--jp-border-color2, #e0e0e0);
	--xr-disabled-color: var(--jp-layout-color3, #bdbdbd);
	--xr-background-color: var(--jp-layout-color0, white);
	--xr-background-color-row-even: var(--jp-layout-color1, white);
	--xr-background-color-row-odd: var(--jp-layout-color2, #eeeeee);
	}

It looks like that
--jp-content-font-color0 and --jp-layout-color0 come from the theme but the others come from our default values.
I have no idea yet how we can manage this...

[fujiisoup]

pandas has a good style. We may be able to take it.

[fujiisoup]

It looks that Pandas is taking a very different approach and codebase and I don't think it is easy to adapt their approach...

I am not familiar with the css staff in jupyter but the simplest approach may be just to disable the text- and background-coloring but use the default color only.
Then, our html repr becomes less pretty but maybe more robust.

[shoyer]

It looks like there may be some standard ways to detect dark vs light mode in CSS?
https://medium.com/js-dojo/how-to-enable-dark-mode-on-your-website-with-pure-css-32640335474

I'm not sure if those work in IDEs like VSCode and Google Colab, though.

[DocOtak]

VS Code will tell you if it is in "dark" "light" or "high contrast" modes https://code.visualstudio.com/api/extension-guides/webview#theming-webview-content

Looks like there is an upstream issue which might prevent getting the actual theme colors in some situations: https://github.com/microsoft/vscode-python/issues/9597

For my own stuff in VS Code, I usually disable the HTML repr in those notebooks.

[fujiisoup]

Thanks, @shoyer and @DocOtak for the suggestions.

It looks like there may be some standard ways to detect dark vs light mode in CSS?
https://medium.com/js-dojo/how-to-enable-dark-mode-on-your-website-with-pure-css-32640335474

It looks not working in vscode...

VS Code will tell you if it is in "dark" "light" or "high contrast" modes https://code.visualstudio.com/api/extension-guides/webview#theming-webview-content

In #4036 I used

body.vscode-dark {
}

code block, but maybe more general solution would be better if available...