itables with Colab dark theme

[ofir-reich]

Thanks so much for the Colab support! Works great.

One issue I have is that in Colab dark theme (Tools -> Settings -> Theme: dark) the itable does not fully adapt. Its background remains gray but the text color inherits the (very similar) gray text color from the Colab theme, so the numbers are hard to see.
Additionally, the page buttons on the bottom only show up for real when you hover over them (they somehow keep the black text color against the dark theme background). I'm guessing for the same reason.
Here's a screenshot:

Is there a way to change the theme of itables to dark? Or maybe manually changing the displayed text color to black, so even if the tables are light theme the data is visible?

Thanks!

[mwouts]

Thank you @ofir-reich for this report.

Well I know very little of HTML/CSS, so if you don't mind I'll give a few pointers and maybe we will see what we can do with them?

• We import the default CSS for datatables.net at this line:
  

  itables/itables/datatables_template.html

  Line 2 in f03c276

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">

• I see that datatables has a theme creator at https://datatables.net/manual/styling/theme-creator
• I also find a dark theme at https://parallelcodes.com/jquery-datatable-dark-theme-css-design/ (not tested)

With all this I think we should be able to design a custom style that would be fit for the dark theme (maybe the same issue occurs in e.g. vscode)

But ideally I guess the theme should be dynamic, don't you think so? In that direction I see this SO question which has a mention of the jQueryUI Theme Roller, but I have no idea if that is something we can use here.

[repied]

maybe the same issue occurs in e.g. vscode

yes indeed

[mwouts]

Is the issue still present with itables==1.0.0 (which uses datatables.net==1.12.1)?

In my example notebook I see this:

[vttrifonov]

In vscode+dark theme switching to itables==1.0.0 made the table be white-letters-on-black-background which makes the table readable. The 'Show', 'Search', and 'Showing' text around the table are still washed out and barely visible. This seems to be an issue also in the colab + dark theme example.

[mwouts]

Thank you @vttrifonov for the feedback. Currently the CSS used is datatables.net's default theme, which already seems to have improved (probably the improvement comes from the switch from version 1.11.5 to 1.12.1).

Do you think you could propose your own datatables theme? If you do so I'd be happy to propose customisable themes in itables.

[mwouts]

I'll close this issue as we are making progress on a similar issue #103 - please follow progresses there.