Jupyter Notebook theming is not responsive to auto setting

[Zeitsperre]

It appears that the CSS does not entirely transfer over to documentation generated from nbsphinx when using the auto setting for the furo theme. This has the result of making some outputs from calculated cells to partially apply CSS settings, for example, for a table generated from xarray:

When manually specifying light or dark, this problem is solved.

It would be great to know if there are any ways of fixing this (either through the conf.py settings, or via CSS overrides).

This discussion is being raised from a comment on a pull request to replace the sphinx-rtd-theme for furo: Ouranosinc/xclim#1731 (comment)

[SarahG-579462]

A patch for this is given in this comment. Copied the text below:

It is not the prettiest solution, since it requires redefining the xarray theme variables in the body tag, since "dark_css_variables" in the config only sets the variables in the body:

body {
  --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);
}

I chose to update the xarray css variables (e.g. --xr-font-color0) thru the externalized --jp variables that xarray seems to offer, using "dark_css_variables" and "light_css_variables". I'm assuming these are jupyter variables. This fix should therefore be compatible with any jupyter output that uses variables set with a scope within body.

Other options would have been:

• Copying the css that furo uses to set variables when swapping to light or dark mode, and adding a selector so that it updates in the root instead of the body.
• Redefining the xarray colours in the body, instead of the offered --jp variables.
  • This might be a better solution, but it does not offer the nicety that is potentially fixing other jupyter notebook output issues.
• wait for an upstream fix in either xarray or furo.
  • The xarray upstream fix could be done in two ways:
    • Add compatibility for the "auto" theme by using a similar css selector to furo, but targeting the :root pseudo-class instead of the body tag (using the :has pseudo-class)
    • Change the xarray default theming to be set in body instead of, or on top of, :root
  • the furo fix would be to:
    • Make the css variables apply to the :root pseudo-class, instead of/on top of the body tag (once again with the :has pseudo-class.

[pradyunsg]

Make the css variables apply to the :root pseudo-class, instead of/on top of the body tag (once again with the :has pseudo-class.

FWIW, this is not feasible because the theme's content is all within body and we store the state of the current theme within that as well.