Dark mode
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+.
Enabling dark mode
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>
Toggling
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.
Auto-detection
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.
If you would like to automatically switch your web-site's theme, you can use the following Javascript snippet on page load, which will work for both DataTables and Bootstrap 5 styling:
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);