HTML repr tables have really bad text contrast ratios

[drammock]

as seen in the Eyetracking tutorial:

Originally posted by @scott-huberty in #12750 (comment)

[drammock]

This is actually quite a hard problem. Our website theme has good support for tables (and dataframes) already, but we're using a bunch of custom CSS instead so that the results look OK in the vscode integrated terminal (and possibly also in standard Jupyter notebooks too?). Some problems that I noticed:

1. The toggle-to-open carets don't match similar carets in the website theme (e.g. in the left sidebar of the tutorials page) --- they're filled-in triangles, theme's carets are open chevrons.
2. the toggle-to-open carets are hard-coded with white or black fill depending on an @media "prefers-dark", which means currently they're unresponsive to changing the website theme's light/dark mode toggle
3. Even if we solved point 2, The toggle-to-open carets are set as background images which makes it hard (though not impossible?) to target them with CSS
4. the fade-out effect when collapsing feels clunky (at least to me); seems like a height animation would be cleaner (and more consistent with the web theme, which uses a similar animation for site-wide warning banners)

My opinion is that we should remove as much of the CSS in mne/html_templates/static/repr.css as possible, add what we need to optimize it for the online docs, write a test to make sure it stays the same on a sphinx-rendered site, and then start adding additional rules to make it look nice in notebooks / vscode.

[drammock]

one idea that might work is to craft the CSS rules so that there are two co-extensive sets of rules: one set in repr.css and one in the main website style file doc/_static/style.css. If we can engineer it so that the selectors in style.css are always greater specificity than the ones in repr.css, then the style.css rules will always apply on the website, and the repr.css rules will apply in other contexts (notebooks, vscode, etc). We might be able to do that by wrapping all the repr.css rules in an @layer

[larsoner]

It would be great to remove as much custom code as possible so it might be worth starting with that as a first step, then trying the layer / precedence to fix stuff that needs to be overridden.

[hoechenberger]

It's indeed difficult to get this right! I'm happy to help here, but i'll be quite busy for the next 2 weeks or so! But i'm highly interested in getting this right / making this better