ngx-admin Angular中切换深色主题时如何修改p-table背景颜色

ngx-admin基于Nebular主题系统实现主题切换，PrimeNG的p-table默认未对接Nebular的主题变量，因此不会随全局主题自动适配样式，按以下步骤改造即可：

步骤1：全局样式绑定Nebular主题变量 #

在项目全局样式文件src/styles.scss中添加以下样式，利用Nebular提供的nb-install-component混合宏绑定主题内置变量，切换主题时会自动更新对应样式值：

@include nb-install-component() {
  /* p-table整体容器样式 */
  .p-datatable {
    background-color: nb-theme(background-basic-color-1);
    color: nb-theme(text-basic-color);

    /* 表头样式 */
    .p-datatable-thead > tr > th {
      background-color: nb-theme(background-basic-color-2);
      color: nb-theme(text-hint-color);
      border-color: nb-theme(separator-color);
    }

    /* 表体行样式 */
    .p-datatable-tbody > tr {
      background-color: nb-theme(background-basic-color-1);
      border-color: nb-theme(separator-color);
      /* 行悬停样式 */
      &:hover {
        background-color: nb-theme(background-basic-color-2);
      }
      > td {
        border-color: nb-theme(separator-color);
      }
    }

    /* 分页器样式 */
    .p-paginator {
      background-color: nb-theme(background-basic-color-1);
      color: nb-theme(text-basic-color);
      border-color: nb-theme(separator-color);
    }
  }
}

如果有其他p-table相关功能（比如排序、筛选、行选中），可以按同样规则对应绑定Nebular的主题变量即可。

步骤2：调整样式引入顺序（可选，样式不生效时处理） #

检查angular.json中styles数组的引入顺序，确保PrimeNG的样式引入早于Nebular样式和自定义全局样式，避免优先级不足导致覆盖失效：

{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/@nebular/theme/styles/prebuilt/default.css",
              "src/styles.scss"
            ]
          }
        }
      }
    }
  }
}

如果不需要PrimeNG自带的预设主题，可以直接移除PrimeNG的主题css文件，完全用Nebular变量自定义样式，风格统一度更高。

内容的提问来源于stack exchange，提问作者hanushi