[Feature] Dark Mode support for itables

[Anselmoo]

Thx for itables

In the case of using itables with dark themes, like VSCode + Dracula, it is rather difficult to see the buttons.

I am wondering if there is a way to change the buttons and text to white for example?

[mwouts]

Hello @Anselmoo , well thank you also for using it!

I have done a little experiment: I have remove the colors #333 and #666 from my local itables/external/jquery.dataTables.min.css and that seems to help, at least this is what I get (in Jupyter Lab):

But unfortunately the text in both the select button and in the search box remains black.

@AllanJard, may I ask what you would think of removing these #333 and #666 colors in jquery.dataTables.min.css? Also, do you have any idea on how to address the black color of the text in the search box and the select button ?

If you have a minute to have a look at this, I have prepared a colab notebook with a dark theme that shows the black font color for the search box and the select button.

[AllanJard]

It's actually done already in the just released 1.13 (which by the way has full ES module support for the core and all extensions now 🙂).

[Anselmoo]

It's actually done already in the just released 1.13 (which by the way has full ES module support for the core and all extensions now 🙂).

@AllanJard Thank you very much!

Is it already usable via config-file?

[mwouts]

Well done @AllanJard ! Well indeed I saw the new release and I am excited to use it and to provide the buttons (I found the discussion at https://datatables.net/forums/discussion/74578 very helpful), but I still need to figure out how to do the import from the cdn. This is what I tried:

<style></style>
<div class="itables">
<table id="table_id"><thead><tr><th>A</th></tr></thead></table>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
<script type="module">
    // Import jquery and DataTable
    import jquery from 'https://code.jquery.com/jquery-3.6.0.min.js';
    import DataTable from 'https://cdn.datatables.net/1.13.1/js/jquery.dataTables.mjs';
    DataTable.use(jquery);

    // Define the table data
    const data = [];

    // Define the dt_args
    let dt_args = {};
    dt_args["data"] = data;

    // [pre-dt-code]
    new DataTable('#table_id', dt_args);
</script>
</div>

but at the moment I get this error:

Uncaught TypeError: Error resolving module specifier “jquery”. Relative module specifiers must start with “./”, “../” or “/”. [jquery.dataTables.mjs:5:19](https://cdn.datatables.net/1.13.1/js/jquery.dataTables.mjs)

Do you have any idea on how to fix this? Many thanks!

[AllanJard]

Yes, jQuery don't yet provide an ES module. You need to load it through a service such as esm.sh. E.g. https://esm.sh/[email protected]

[AllanJard]

Actually, thinking about it a bit more, you'll might need to use an import map, as discussed here.

[mwouts]

Thank you @AllanJard , indeed the suggestion to use the import maps does work. I will report with more details on the process of upgrading DT in itables at https://github.com/mwouts/itables/issues/121.

[mwouts]

@AllanJard I confirm that the dark mode works much better with datatables-1.13.1.

Below is a screenshot of my colab notebook:

Maybe we should still fix the black color for the number of entries drop down and the text in the search box?

[AllanJard]

I don't think we set the colour for those pieces of text - so it would be the browser's default that is being applied. You can "Inspect" the element to check if that is the case. So in whatever dark mode CSS is being used, you'd need to add colour for the input and select elements.

If you can give me a link to an example showing the issue and I detail things a bit further.

[mwouts]

I don't think we set the colour for those pieces of text - so it would be the browser's default that is being applied. You can "Inspect" the element to check if that is the case. So in whatever dark mode CSS is being used, you'd need to add colour for the input and select elements.

Yes this is how I spotted the 333 and 666 colors

If you can give me a link to an example showing the issue and I detail things a bit further.

Can you access this? https://colab.research.google.com/drive/1JPZIasTiH3rIUysDr3eWDz4jgTTq00aq?usp=sharing#scrollTo=b1SjmPGa8DVw

[AllanJard]

Kind of:

How do I view the output? I can't see an obvious way to do that (I've not actually used colab before).

[Anselmoo]

In this particular case you have to press the magic-button. Then it will show 🆙.

[AllanJard]

Oh! Thanks!

Then I see a table, which appears to be a Google visualisation table. How do I get to the point where I can see the issue with DataTables and the input elements?

[mwouts]

Hey @AllanJard , if the output looks like this: then it might mean that your browser does not support import maps :smile:

The screenshot in the previous comment, in which the table does appear after "df", was taken with Chrome.

Also if you don't see any table at all you can do "Runtime / run all" (sorry that seems to be a document editable by anyone so it might differ from what I intended to show)

[AllanJard]

rotfl. Oh dear... Yes, I was using Firefox without import map support. Doh!

I've fired up Chromium and it actually appears to work okay for me there:

[mwouts]

Well now I do see the white color for the text in the search box... But in the drop down box on the left my text is in black, unlike your:

Anyway I think this is already a great improvement with respect to version 1.12.1, so unless you advice against this I think I might try to ship the CSS for 1.13.1 with the library in version 1.12.1...

[mwouts]

@Anselmoo I have prepared a development version with the new CSS.

Would you like to give it a try? You can install it with

pip install git+https://github.com/mwouts/itables.git@fix_dark_mode

[Anselmoo]

Looks like the dark mode not work for Show and Search; the rest is fine!

But it already helps a lot

But this might be also related to the VSCode builtin Jupyter-Module, which I normally used.

[AllanJard]

You could possibly add something like:

@media (prefers-color-scheme: dark) {
  select, input {
    color: white;
  }
}

which should resolve that issue.

[mwouts]

Thank you Allan. I will give it a try possibly tonight. @Anselmoo if you happen to know some CSS you could also experiment following https://mwouts.github.io/itables/custom_css.html - I already did a preliminary attempt in the colab notebook (link above) but we need to do a bit more research apparently...

[Anselmoo]

@mwouts , I will give it a try tomorrow; however, I am not a mega CSS expert. Let's see how far I get ...

[mwouts]

That sounds great! On my side I have been more busy than expected and I won't have any time this week-end, so we will sync up next week. By the way if you prefer to experiment directly with HTML the following might help:

from itables import to_html_datatable as DT
print(DT(df.head(2), css="@media (prefers-color-scheme: dark) { select, input { color: white; }}"))

It returns something like

<style>@media (prefers-color-scheme: dark) {
  select, input {
    color: white;
  }
}</style>
<div class="itables">
<table id="3475b3f7-7182-4cd9-bf87-96e1520a9aa8" class="display"style="width:auto;"><thead>
    <tr style="text-align: right;">
      
      <th>id</th>
      <th>iso2Code</th>
      <th>name</th>
      <th>region</th>
      <th>adminregion</th>
      <th>incomeLevel</th>
      <th>lendingType</th>
      <th>capitalCity</th>
      <th>longitude</th>
      <th>latitude</th>
    </tr>
  </thead><tbody><tr><td>Loading... (need <a href=https://mwouts.github.io/itables/troubleshooting.html>help</a>?)</td></tr></tbody></table>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
<script type="module">
    // Import jquery and DataTable
    import 'https://code.jquery.com/jquery-3.6.0.min.js';
    import dt from 'https://cdn.datatables.net/1.12.1/js/jquery.dataTables.mjs';
    dt($);

    // Define the table data
    const data = [["ABW", "AW", "Aruba", "Latin America & Caribbean ", "NaN", "High income", "Not classified", "Oranjestad", -70.0167, 12.5167], ["AFE", "ZH", "Africa Eastern and Southern", "Aggregates", "NaN", "Aggregates", "Aggregates", "NaN", NaN, NaN]];

    // Define the dt_args
    let dt_args = {"warn_on_unexpected_types": true, "paging": false, "order": []};
    dt_args["data"] = data;

    $(document).ready(function () {
        
        $('#3475b3f7-7182-4cd9-bf87-96e1520a9aa8').DataTable(dt_args);
    });
</script>
</div>

which you can save in an .html file.

[Anselmoo]

@mwouts sorry for late reply

Concerning your #122, it actually looks very fine now. I have tested it for several dark themes:

• https://github.com/dracula/visual-studio-code
• https://github.com/primer/github-vscode-theme
• https://github.com/material-theme/vsc-material-theme
• https://github.com/ahmadawais/shades-of-purple-vscode

This is actually the game changer as @AllanJard proposed.

@media (prefers-color-scheme: dark) {
  select, input {
    color: white;
  }
}

[mwouts]

Oh that's great! Thank you @Anselmoo . By the way, thank you also for your other PRs, I will try to integrate them tonight or tomorrow evening.

Re the above that's great news. I did not understand if the prefers-color-scheme piece was required, could you please confirm, and if so maybe we should add it to the default extra CSS at https://github.com/mwouts/itables/blob/main/itables/html/itables.css ?

Cheers

[Anselmoo]

Oh that's great! Thank you @Anselmoo . By the way, thank you also for your other PRs, I will try to integrate them tonight or tomorrow evening.

Re the above that's great news. I did not understand if the prefers-color-scheme piece was required, could you please confirm, and if so maybe we should add it to the default extra CSS at https://github.com/mwouts/itables/blob/main/itables/html/itables.css ?

Cheers

• Black

• Red

• White

[mwouts]

Well... that is puzzling. I cannot reproduce that. I have tried, in a single cell:

from itables import show
from itables.sample_dfs import generate_random_df
import itables.options as opt

opt.css = """@media (prefers-color-scheme: dark) {
  select, input {
    color: white;
  }
}"""

show(generate_random_df(100000, 30))

And in each of VS Code, Jupyter Lab, and Colab I still have the black text in the select and search boxes... Do you see any difference with what you are doing above?

[mwouts]

Sorry the issue was closed automatically as I have merged the branch in which we update the datatables CSS to version 1.13.1, but that was a bit early as I would like to reproduce myself the white text in the select and search boxes...

[Norlandz]

As the current workaround, I use following:

itables.options.css = """
...
.itables select, .itables input {
  color: inherit;
  filter: invert(10%);
}

Full code:

init_notebook_mode(all_interactive=True, connected=False)
itables.options.style = "width:auto;float:left;"
# show(df, classes="display nowrap cell-border compact hover stripe order-column")
itables.options.classes = "display nowrap compact"
# @libbug: text-align: right; cause misalign
# .itables table tbody td { padding: 0px; margin: 0px; border: 4px solid black; }
# .itables table thead th { padding: 0px; margin: 0px; border: 4px solid black; }
itables.options.css = """
.itables table          { font-size: 0.9em; }
.itables table tbody tr:nth-child(odd) {
  background: rgba(110, 160, 160, 0.3);
}
.itables table td {
  text-align: left;
  max-width: 200px;
  max-height: 30px;
  overflow: auto;
}
.itables select, .itables input {
  color: inherit;
  filter: invert(10%);
}
"""
itables.options.showIndex = True
itables.options.maxBytes = 1024 * 5
itables.options.lengthMenu = [5, 15, 30, 100, 200] # pyright: ignore[reportGeneralTypeIssues]

[mwouts]

Thanks @Norlandz for your comment above, indeed adding

.itables select, .itables input {
    color: inherit;
}

to itables.css does seem to fix this. Quick question for you @Norlandz, what does filter: invert(10%) do? Thanks!

Also for those who are affected by this, could you please give a try at

pip install git+https://github.com/mwouts/itables.git@fix_dark_mode_in_vscode

and confirm that it does fix the issue? Thanks!

[Norlandz]

@mwouts

what does filter: invert(10%) do? Thanks!

If you have a black background and just inherit the black font color, you cant see the font. (Depends on your light / dark theme.) So you need to invert the black font color to white.

black + invert(100%) = white black + invert(10%) = dark grey

But this wont work much better than just setting the font to color grey... -- Its better to know the color theme (maybe some js code).