Answers

• allan Posts: 63,489Questions: 1Answers: 10,470 Site admin

  November 12

  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 Posts: 3Questions: 1Answers: 0

  November 12

  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 Posts: 63,489Questions: 1Answers: 10,470 Site admin

  November 12 Answer ✓

  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 Posts: 3Questions: 1Answers: 0

  November 13

  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!