Changing the color of buttons in searchBuilder

[mshqn]

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:

---
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.

[mwouts]

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?

[mshqn]

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:

[MarsPanther]

@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.

[mwouts]

As I mentioned above (#294 (comment)), 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?

[calvma]

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!

[mwouts]

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:

itables/src/itables/html/init_datatables.html

Lines 1 to 11 in dfe261c

	<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>

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!

[mwouts]

Hi everyone, I have a development version that should be a bit smarter re the dark mode. Would you mind giving it a try and let me know how it works for you? You can install it with:

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

(that requires nodejs, see more at Developing ITables)