Repository: mwouts/itables (language: python)

Issue:
Changing the color of buttons in searchBuilder
Hello, currently the color of searchBuilder buttons is dark grey which makes it difficult to read the text inside them. Also adding searchBuilder to the table makes the search box and number of entries per page dark-coloured and the text is completely invisible. I would like to make all buttons and input fields light but I am not sure how to do it. I would be grateful for help.

Here is my example file:

<img width="563" alt="Screenshot 2024-06-21 at 13 10 07" src="https://github.com/mwouts/itables/assets/58361053/03d27cef-0bc4-4bfd-8126-4418ab60c8a2">

~~~
---
title: Test
standalone: true
format:
  html:
    echo: false
    css: styles.css
---

``` {python}
from itables import init_notebook_mode, show
from sklearn.datasets import load_diabetes

init_notebook_mode(all_interactive=True)

diabetes = load_diabetes(as_frame=True)
show(
    diabetes.data,
    layout={"top1": "searchBuilder"},
    searchBuilder={
        "preDefined": {"criteria": [{"data": "age", "condition": ">", "value": [0]}]}
    },
)
```

~~~

I started with adding the following styles.css but it didn't work:

```
html.dark div.dtsb-searchBuilder button.dtsb-button,
html.dark div.dtsb-searchBuilder select.dtsb-dropDown,
html.dark div.dtsb-searchBuilder input.dtsb-input {
    background-color: #F1F1F1 !important;
}
```

I don't have experience with html/css and not sure how to proceed.


Discussion / hints:
Hi @mshqn , this looks like the _dark mode_ of DataTables.

The `init_notebook_mode` cell activates the dark mode using this HTML snippet:
https://github.com/mwouts/itables/blob/main/src/itables/html/init_datatables.html

Is by chance your browser configured to use a dark mode?
Thank you @mwouts! The problem was indeed in dark mode. My solution was to modify the yml:

```
---
title: Test
embed-resources: true
format:
  html:
    echo: false
include-after-body:
  text: |
    <script>
      document.documentElement.classList.remove('dark');
    </script>
---
```

I am not sure if this is the best solution but it worked:

<img width="556" alt="Screenshot 2024-06-24 at 10 47 51" src="https://github.com/mwouts/itables/assets/58361053/05c75347-2182-46af-80d6-c8b7a0157b1e">

@mwouts  is there a permanent solution for this, even the exported website buttons and inputs are not clearly vissble anymore.

A temporary/ permanet fix to  integrate with jupyter lab dark theme will be highly appreciated.

![image](https://github.com/mwouts/itables/assets/18325426/d1f2f463-324d-4fd2-baa7-274388dce036)


As I mentioned above (https://github.com/mwouts/itables/issues/294#issuecomment-2183379643), the dark mode activation of ITables is done by the `init_notebook_mode`.

Can you make sure you do call that function? 

If so, can you look into the HTML file 
https://github.com/mwouts/itables/blob/main/src/itables/html/init_datatables.html and figure out why it's not working for you?
I had to change to light appearance at the OS level in MacOS ito fix this! Perhaps a line that omits checking system theme on macs would be useful!
Yes as I mentioned above, the current light vs dark mode detection needs improving. The current logic is just below - dark mode is activated if either the browser is in dark mode or Jupyter is in dark mode:

https://github.com/mwouts/itables/blob/dfe261c8ed38d8c46b97f8bc28183c976883c0a6/src/itables/html/init_datatables.html#L1-L11

It would make sense to look at the Jupyter mode, and then at the system settings. PRs that would improve the current implementation are welcome!

Fix patch:
diff --git a/docs/_toc.yml b/docs/_toc.yml
index 54f5a1b7..ea4d84bc 100644
--- a/docs/_toc.yml
+++ b/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
diff --git a/docs/changelog.md b/docs/changelog.md
index 43e782d1..d2698d5c 100644
--- a/docs/changelog.md
+++ b/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)
diff --git a/docs/dark_mode.md b/docs/dark_mode.md
new file mode 100644
index 00000000..6c50abde
--- /dev/null
+++ b/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.
diff --git a/src/itables/html/init_datatables.html b/src/itables/html/init_datatables.html
index e8683264..b216bd0c 100644
--- a/src/itables/html/init_datatables.html
+++ b/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 {
diff --git a/src/itables/version.py b/src/itables/version.py
index 2ad9da8a..97f34620 100644
--- a/src/itables/version.py
+++ b/src/itables/version.py
@@ -1,3 +1,3 @@
 """ITables' version number"""
 
-__version__ = "2.1.4"
+__version__ = "2.1.5-dev"


Test patch:
diff --git a/tests/test_connected_notebook_is_small.py b/tests/test_connected_notebook_is_small.py
index eb5b97cb..da5252e3 100644
--- a/tests/test_connected_notebook_is_small.py
+++ b/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):