如何为gridjs表格自定义深色主题（dark theme）

针对Grid.js官方仅支持浅色主题的问题，你可以通过以下几种方案实现深色主题适配，解决样式冲突问题：

1. 全局CSS优先级覆盖 #

直接通过更高优先级的CSS选择器覆盖Grid.js的默认浅色样式，确保这段样式在官方CSS之后加载：

/* 表格容器基础样式 */
.gridjs-container {
  background-color: #1e1e1e;
  color: #ffffff;
}

/* 表头样式 */
.gridjs-thead .gridjs-tr {
  background-color: #2d2d2d;
  border-bottom: 1px solid #444;
}

/* 表格行样式 */
.gridjs-tbody .gridjs-tr {
  border-bottom: 1px solid #333;
}

/* 行hover状态 */
.gridjs-tbody .gridjs-tr:hover {
  background-color: #3a3a3a;
}

/* 单元格边框 */
.gridjs-td {
  border-color: #444;
}

/* 分页组件样式 */
.gridjs-pagination .gridjs-page-button {
  background-color: #2d2d2d;
  color: #fff;
  border: 1px solid #444;
}

.gridjs-pagination .gridjs-page-button:hover,
.gridjs-pagination .gridjs-page-button.active {
  background-color: #3a3a3a;
  border-color: #555;
}

/* 搜索框样式（若启用搜索功能） */
.gridjs-search-input {
  background-color: #2d2d2d;
  color: #fff;
  border: 1px solid #444;
}

你可以根据自己的深色主题色调调整颜色值，同时通过浏览器开发者工具检查Grid.js生成的DOM元素，补充覆盖排序箭头、加载状态、空提示等边缘元素的样式。

2. 自定义className模块化适配 #

给Grid.js实例指定自定义类名，再针对性编写样式，避免影响其他Grid.js实例：

初始化Grid.js时配置className： #

new gridjs.Grid({
  // 你的表格数据、列配置等
  className: {
    table: 'dark-theme-table',
    container: 'dark-theme-container',
    pagination: 'dark-theme-pagination'
  }
}).render(document.getElementById('your-grid-container'));

对应编写CSS： #

.dark-theme-container {
  background-color: #1e1e1e;
  color: #ffffff;
}

.dark-theme-table .gridjs-thead .gridjs-tr {
  background-color: #2d2d2d;
  border-bottom-color: #444;
}

.dark-theme-table .gridjs-tbody .gridjs-tr {
  border-bottom-color: #333;
}

.dark-theme-table .gridjs-tbody .gridjs-tr:hover {
  background-color: #3a3a3a;
}

.dark-theme-pagination .gridjs-page-button {
  background-color: #2d2d2d;
  color: #fff;
  border-color: #444;
}

.dark-theme-pagination .gridjs-page-button.active,
.dark-theme-pagination .gridjs-page-button:hover {
  background-color: #3a3a3a;
}

3. CSS变量统一管理主题色 #

通过CSS变量定义深色主题的颜色规范，后续修改主题只需调整变量值，维护更高效：

定义全局CSS变量： #

:root {
  --dark-bg-primary: #1e1e1e;
  --dark-bg-secondary: #2d2d2d;
  --dark-bg-hover: #3a3a3a;
  --dark-text-primary: #ffffff;
  --dark-border-color: #444;
}

引用变量编写Grid.js样式： #

.gridjs-container {
  background-color: var(--dark-bg-primary);
  color: var(--dark-text-primary);
}

.gridjs-thead .gridjs-tr {
  background-color: var(--dark-bg-secondary);
  border-bottom: 1px solid var(--dark-border-color);
}

.gridjs-tbody .gridjs-tr {
  border-bottom: 1px solid var(--dark-border-color);
}

.gridjs-tbody .gridjs-tr:hover {
  background-color: var(--dark-bg-hover);
}

/* 其他组件样式同理替换颜色值为变量 */

内容的提问来源于stack exchange，提问作者Milovan Tomašević