How to get dark mode working?

f18m

Link to test case:
I created two testcases, one on JSFiddle: https://jsfiddle.net/8Lbf0hpw/5/
and one on DataTables live: https://live.datatables.net/sagenaqe/1/

Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

I'm clearly doing some dummy/basic mistake here.
I'm trying to enable "automatic" dark mode switch (based on the OS/browser preferences) and I followed docs at https://datatables.net/manual/styling/dark-mode#Auto-detection, without success.
If you look at my (super trivial) testcases, the output is always full white with text being black, which works fine for light mode. I did expect that following docs I would be able to get a rendering with white text suitable for dark modes.

I tried to use:
* regular DataTables CSS + responsive extension: no success: text is always black
* regular DataTables CSS + responsive extension + BootStrap5: no success: text is always black

I do see some rendering glitch though: the combobox "entries per page" and the "search" field they do get a dark background.
Not sure why.

Oh I'm also using jQuery 3.7.1, not sure if that makes any difference.

What am I doing wrong? I'm more a backend guy than a frontend guy and I'm just trying to enhance my open source project...
I do see datatables getting the right (automatic) dark/light theming when I visit datatables.net...

thanks!

allan

Hi,

DataTable's dark mode is not automatic. You need to add the class dark to the html element, per the manual here.

It is automatic on this site due to a little bit of Javascript that detects the user's preferred colour scheme and applies the class if needed (or based on a previous preference).

Why not automatic? Because a lot of sites don't expect to run in dark mode. Some done, but if the user's preferred colour scheme is dark, but the host site only has a light mode, it would be weird if DataTables was the only item that showed in dark mode. Hence it is explicitly opt in.

Allan

f18m

Hi @allan ,
thanks for your answer!
I did read the manual and I tried to apply the "dark" class to the html tag. Well to be honest I just copy-pasted the JS code that is in the manual which is both adding the "dark" and also the "data-bs-theme=dark" attribute.
Nothing works.
I tried several permutations, but nothing.
Would you mind looking at the JSFiddle or DataTables live ?
I know I must be missing something basic because in general the feature works (and this website is the proof)... am I supposed to have some particular CSS?
Thanks a lot!

allan

Oh I see - sorry. The problem is that DataTables' CSS is for the table, not the whole document. DataTables' CSS won't set the body background colour for example.

Adding:

html.dark {
  font: 90%/1.5em system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif !important;
  position: relative;
  background-color: #212529;
  color: #dae0e7;
}

Creates a basic dark mode: https://live.datatables.net/sagenaqe/1/edit .

Bootstrap and other CSS frameworks will do full page dark mode, since they assume that they are controlling the whole page. DataTables default CSS does not.

Allan

f18m

Ohhh ok I see the issue now.
Thanks @allan . DataTables is just inheriting the text color defined in the larger HTML document even when it's in dark mode. Makes sense.
I managed now to get my datatable nicely rendered in dark mode, thanks!