Documentation does not render correctly in dark mode

[kushalbakshi]

Bug Report

Description

The DataJoint documentation at this link does not render correctly when using dark mode. The output of any DataJoint table results in light-colored font against a light background. This issue only applies to viewing the documentation in dark mode. Please see the attached images for reference.

Reproducibility

Occurs on the DataJoint documentation website when accessed through Firefox browser.

Expected Behavior

When switching to dark mode, the text within the DataJoint tables should not change to light-colored font if the background doesn't change with it.

Screenshots

[CBroz1]

Colors of the tables are dictated by repr_html here

One solve might replace hard-coded values with substituted light-mode and dark-mode options based on a value in dj.config

[kushalbakshi]

Hi @CBroz1, I tried to PR a fix for this today but I'm not able to change the background of the output of the Jupyter cells, no matter what I tried. I changed the hex values within repr_html but I'm not sure where/how to make this change in dj.config in a way that will carry over onto the site. I also looked into doing this through mkdocs. There seems to be a Jupyter wrapper for mkdocs but it's hard to find documentation on how to make changes to the config of this wrapper in extra.css. That said, I'm not very familiar with CSS.

[CBroz1]

Did you try adding the following to extras.css? This worked in my local deployment for a different repo

[data-md-color-scheme="slate"] .Relation td{
    background: #0026ff; /* Example blue to make change obvious */
}

If that works for you, I think it would be a matter of adding similar lines for .Relation th and tr

[kushalbakshi]

Thank you Chris! PR issued. That was very nearly it - this is what worked.

[data-md-color-scheme="slate"] .jupyter-wrapper .Table td {
    background: #0026ff; /* Example blue to make change obvious */
}