深色模式
由於許多使用者偏好在其作業系統設定中使用「深色模式」，網站正越來越多地提供淺色和深色模式。DataTables 在其預設樣式中以及使用 Bootstrap 5.3+ 時，完全支援深色模式。
啟用深色模式
若使用 DataTables 預設樣式，要啟用深色模式，請將類別 dark 新增至您的 html 標籤，例如：
<!doctype html>
<html class="dark">
...
</html>
重要 - 請注意，DataTables 預設樣式僅適用於表格和任何與 DataTables 相關的元件。它不會更改您的整體頁面。這是一個完整樣式框架的責任，例如 Bootstrap 或您頁面自己的 CSS。
Bootstrap 5.3 使用略有不同的方法 - 在同一個元素上使用 data-bs-theme 屬性，DataTables 與 Bootstrap 5 的整合將會識別並運作 (也就是說，您不需要從上方新增 dark 類別)。
<!doctype html>
<html data-bs-theme="dark">
...
</html>
切換
如果您想讓最終使用者能夠在淺色和深色模式之間切換，您可以使用上述的方法，新增和移除類別/屬性即可。不需要重新載入頁面，並且適用於 DataTables 和 Bootstrap 5 樣式。
自動偵測
可以透過 prefers-color-scheme CSS 媒體功能自動偵測最終使用者對色彩配置的偏好。DataTables 預設情況下不會在 CSS 中使用它，因為網站/應用程式可能未針對深色模式最佳化，而 DataTables 的 CSS 切換僅針對表格，可能會導致嚴重的樣式問題。
如果您希望自動切換網站的主題，您可以在頁面載入時使用以下 JavaScript 片段，它將適用於 DataTables 和 Bootstrap 5 樣式
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);