With many users preferring "dark mode" in their operating system preferences, web-sites are increasingly offering light and dark modes. DataTables has full support for dark mode in its default styling and with Bootstrap 5.3+.
With DataTables default styling, to enable dark mode, add the class
dark to your
html tag - .e.g:
<!doctype html> <html class="dark"> ... </html>
Important - note that the DataTables default styling is for the table and any DataTables related components. It will not change your overall page. That is the responsibility of a full styling framework, such as Bootstrap or your page's own CSS.
Bootstrap 5.3 uses a slightly different method - a
data-bs-theme attribute on the same element, which DataTables' integration with Bootstrap 5 will recognize and operate with (i.e. you do not need to add the
dark class from above):
<!doctype html> <html data-bs-theme="dark"> ... </html>
If you want to offer the end user the ability to switch between light and dark modes, you can do so by adding and removing the class / attributes described above. A page reload is not required and it works for both DataTables and Bootstrap 5 styling.
It is possible to auto detect an end user's preference for the colour scheme through the
prefers-color-scheme CSS media feature. DataTables doesn't use that in CSS by default due to the potential for conflict between a web-site / app which isn't optimised for dark mode and DataTables' CSS switching just the table, which could cause significant styling problems.
let prefers = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; let html = document.querySelector('html'); html.classList.add(prefers); html.setAttribute('data-bs-theme', prefers);