Set a dark class for the dark mode (#261)

docs/changelog.md

@@ -8,6 +8,9 @@ ITables ChangeLog
 - We have added a logo for ITables ([#257](https://github.com/mwouts/itables/issues/257))
 - The _loading_ message gives more information, including the version of ITables and where DataTables is loaded from ([#258](https://github.com/mwouts/itables/issues/258))
 
+**Fixed**
+- We have improve the compatibility with dark themes ([#255](https://github.com/mwouts/itables/issues/255))
+
 
 2.0.0 (2024-03-16)
 ------------------

itables/html/init_datatables.html

@@ -0,0 +1,11 @@
+<script>
+    if (document.body.dataset.jpThemeLight == "false" || // Jupyter Lab
+        document.body.dataset.vscodeThemeKind == "vscode-dark" || // VS Code
+        document.documentElement.dataset.theme == "dark" || // Jupyter Book
+        window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.documentElement.classList.add('dark');
+    }
+    else {
+        document.documentElement.classList.remove('dark');
+    }
+</script>

itables/javascript.py

@@ -131,6 +131,8 @@ def init_notebook_mode(
         if hasattr(pl.Series, "_repr_html_"):
             del pl.Series._repr_html_
 
+    display(HTML(read_package_file("html/init_datatables.html")))
+
     if not connected:
         display(HTML(generate_init_offline_itables_html(dt_bundle)))
 

tests/test_connected_notebook_is_small.py

@@ -27,7 +27,7 @@ def test_connected_notebook_is_small(tmp_path, display_logo_when_loading):
     )
     jupytext([str(nb_py), "--to", "ipynb", "--set-kernel", "itables", "--execute"])
     assert nb_ipynb.exists()
-    assert nb_ipynb.stat().st_size < (8000 if display_logo_when_loading else 5000)
+    assert nb_ipynb.stat().st_size < (8500 if display_logo_when_loading else 5000)
 
 
 def test_offline_notebook_is_not_too_large(tmp_path):