Fix colors in dark mode in VS Code and rendered HTML notebooks

[maltekuehl]

Small pet peeve of mine, but the table colors are broken (dark on dark and light on light) in dark mode, especially when "ipywidgets" is not installed. Affects both HTML rendering and VS Code (not tested in other editors). This PR applies CSS variables to rows as well (previously used for the header) with fallback options that ensure readability.

Before	After

[flying-sheep]

Thank you, this is wonderful! I’m a big proponent for dark mode, but I only have it active in the evening haha.

I’d go this route:

1. use an inline <style> tag instead of adding attibute soup to each and every <tr> if possible (no idea if any silly “sanitizer” removes it).
2. make the tables adapt to the actual color scheme and not always light.
3. use light-dark as a final fallback.

I think this might be good colors:

--si-table-fg1:
    var(--jp-ui-font-color1,
    var(--vscode-editor-foreground,
    light-dark(rgba(0, 0, 0, 0.87), rgba(255, 255, 255, 0.87))));
--si-table-bg0:
    var(--jp-layout-color0,
    var(--vscode-editor-background,
    light-dark(white, #111)));
--si-table-bg3:
    var(--jp-rendermime-table-row-background,
    var(--vscode-tree-tableOddRowsBackground,
    light-dark(#bdbdbd, #616161)));

[flying-sheep]

OK, on further investigation, there are a lot of issues:

• ipywidgets aren’t theme-aware, so they look bad in dark mode unless something themes them (e.g. jupyterlab’s themes do, I think)
• MyST-nb adds some weird hacky partial styling to tables that mess everything up
• we do our own misguided attempt at papering over things

To fix this, either

1. myst-nb needs to remove its hacky styles: MyST-nb injects CSS for ipywidgets that ignores dark mode executablebooks/MyST-NB#618
2. Furo needs to theme ipywidgets or ipywidgets need to become color-theme aware

or we just add a white background to all output cells containing ipywidgets (like the pydata sphinx theme does)

[maltekuehl]

Hi, yes, there are multiple problems that lead to the current PR:

1. We cannot accurately detect whether something is in dark mode or not. Some websites use a .dark class on the html or body tags, others use prefers-color-mode and some do a mix of differently styled elements and we would never know where the session info would actually be shown. So we cannot assume anything and need to provide something that works everywhere - even if not perfectly matching the colors - but that can be overriden by the user.
2. I also discovered the mystnb styling which only includes a rule for odd rows, leading to the problems seen on the initial HTML screenshot. However, we can also not assume that mystnb would be the only part on the website with styles for tables, so we need styles that have higher priority. This can be done by either having more specific selectors (i.e., give class names to all parts of our table and have a <style>) or by using inline styling, which takes priority. For simplicity here I chose inline styling.
3. As long as we use CSS variable names and do not use !important in any styles, there are still two ways for users to change the colors of the table and adjust them to their theme. In that context, I think it is acceptable that we provide dark on light grey colors everywhere as a default, as this is the only way that allows us to ensure readability out of the box given the above constraints.

In summary, we can likely never provide a perfect solution so I would prioritize readability as long as choices we make can be superseded by user choices, if desired. The current PR should fulfill these criteria.

[flying-sheep]

I generally agree!

However, we can also not assume that mystnb would be the only part on the website with styles for tables, so we need styles that have higher priority.

I think this is the only part where I disagree with you. No extension should just add styles for tables in the cell output. That’s the jobs for themes! MyST-NB needs to get rid of this.

In summary, we can likely never provide a perfect solution so I would prioritize readability as long as choices we make can be superseded by user choices, if desired. The current PR should fulfill these criteria.

You’re right! Where did you test it? Jupyterlab, VS Code, and which Sphinx themes?

[maltekuehl]

Thanks!

[flying-sheep]

Thank you! This was a really annoying situation.