深色模式
由于许多用户更喜欢操作系统偏好设置中的“暗模式”,因此网站越来越多地提供明暗模式。DataTables 完全支持其默认样式和 Bootstrap 5.3+中的暗模式。
启用暗模式
使用 DataTables 默认样式,若要启用暗模式,请将 class dark
添加到您的 html
标记中,例如
<!doctype html>
<html class="dark">
...
</html>
重要提示 - 请注意,DataTables 默认样式适用于表格和任何与 DataTables 相关的组件。它不会更改您的整个页面。这是完整样式框架(如 Bootstrap 或您页面的自身的 CSS)的职责。
Bootstrap 5.3 使用稍微不同的方法 - 同一个元素上的 data-bs-theme
属性,DataTables 与 Bootstrap 5 集成将识别并操作(即您无需添加上面 dark
class)
<!doctype html>
<html data-bs-theme="dark">
...
</html>
切换
如果您想向最终用户提供在明暗模式之间切换的能力,您可以通过添加和移除上面描述的 class/属性来实现。不需要重新加载页面,并且适用于 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);