Angular中如何为NbThemeService添加自定义变量？Nebular主题定制

DevOps 小满

2026-5-8

给NbThemeService添加自定义变量的步骤

我来帮你一步步实现给NbThemeService添加自定义变量，就像ngx-admin里的countryOrders那样～

1. 定义SCSS自定义变量文件

首先在你的项目src/@theme/styles目录下新建一个SCSS文件，比如custom-theme-variables.scss，用来存放你的自定义变量：

// src/@theme/styles/custom-theme-variables.scss
$my-custom-theme-vars: (
  card-radius: 12px,
  sidebar-bg: #f5f5f5,
  button-hover-color: #e0e0e0,
  // 这里可以添加任意你需要的变量
);

2. 将自定义变量合并到主题配置中

找到你正在使用的主题SCSS文件（比如ngx-admin默认的src/@theme/styles/themes/corporate.scss），导入刚才的变量文件，并把自定义变量合并到主题的variables节点下：

// src/@theme/styles/themes/corporate.scss
@import '../custom-theme-variables';

$nb-theme: nb-merge(
  $nb-default-theme,
  (
    variables: (
      // 保留原有主题变量，新增你的自定义节点
      my-custom: $my-custom-theme-vars,
      // 就像示例中的countryOrders一样
    )
  )
);

如果你有多个主题（比如dark、cosmic等），需要在每个主题文件中重复这一步，确保所有主题都包含你的自定义变量。

3. 在组件中获取自定义变量

现在你就可以像示例里那样，通过NbThemeService.getJsTheme()获取到你的自定义变量了：

constructor(private theme: NbThemeService) {
  this.theme.getJsTheme().subscribe(config => {
    // 提取自定义变量
    const myCustomVars = config.variables.my-custom;
    // 使用变量，比如给组件属性赋值
    this.cardRadius = myCustomVars['card-radius'];
    this.sidebarBg = myCustomVars['sidebar-bg'];
  });
}