Improve dark mode support

docs/_toc.yml

@@ -9,6 +9,7 @@ parts:
     - file: pandas_style
     - file: extensions
     - file: custom_extensions
+    - file: dark_mode
     - file: quarto
     - file: downsampling
     - file: references

docs/changelog.md

@@ -1,12 +1,14 @@
 ITables ChangeLog
 =================
 
-2.1.5-dev (2024-08-??)
+2.1.5-dev (2024-09-??)
 ------------------
 
 **Fixed**
+- We have improved the function that determines whether a dark theme is being used ([#294](https://github.com/mwouts/itables/issues/294))
 - We have adjusted the generation of the Polars sample dataframes to fix the CI ([Polars-18130](https://github.com/pola-rs/polars/issues/18130))
 - The test on the Shiny app fallbacks to `ui.nav_panel` when `ui.nav` is not available
+- The dependencies of the streamlit component have been updated ([#313](https://github.com/mwouts/itables/issues/313), [#315](https://github.com/mwouts/itables/issues/315))
 
 
 2.1.4 (2024-07-03)

docs/dark_mode.md

@@ -0,0 +1,28 @@
+---
+jupytext:
+  formats: md:myst
+  notebook_metadata_filter: -jupytext.text_representation.jupytext_version
+  text_representation:
+    extension: .md
+    format_name: myst
+    format_version: 0.13
+kernelspec:
+  display_name: itables
+  language: python
+  name: itables
+---
+
+# Dark Themes
+
+When a notebook or application is rendered using a dark theme, DataTable requires that a `dark`
+class be added to the HTML document. This can be done with the following Javascript snippet:
+```javascript
+document.documentElement.classList.add('dark');
+```
+
+When ITables is used in a notebook, this is handled by
+`init_notebook_mode` which displays the [`init_datatables.html`](https://github.com/mwouts/itables/blob/main/src/itables/html/init_datatables.html) snippet.
+
+Please open a PR if you see how to further improve the
+support of light vs dark themes, and e.g. set the `dark`
+class dynamically when the theme is changed.

src/itables/html/init_datatables.html

@@ -1,8 +1,22 @@
 <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) {
+    let is_dark_theme = function () {
+        // Jupyter Lab
+        if ('jpThemeLight' in document.body.dataset)
+            return (document.body.dataset.jpThemeLight === "false");
+
+        // VS Code
+        if ('vscodeThemeKind' in document.body.dataset)
+            return document.body.dataset.vscodeThemeKind.includes('dark');
+
+        // Jupyter Book
+        if ('theme' in document.documentElement.dataset)
+            return document.documentElement.dataset.theme.includes('dark');
+
+        // Default
+        return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+
+    if (is_dark_theme()) {
         document.documentElement.classList.add('dark');
     }
     else {

src/itables/version.py

@@ -1,3 +1,3 @@
 """ITables' version number"""
 
-__version__ = "2.1.4"
+__version__ = "2.1.5-dev"

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 < (8500 if display_logo_when_loading else 5000)
+    assert nb_ipynb.stat().st_size < (9000 if display_logo_when_loading else 5000)
 
 
 def test_offline_notebook_is_not_too_large(tmp_path):