如何为Angular库ngx-extended-pdf-viewer配置主题并修改菜单按钮颜色

不用自定义整个工具栏这么麻烦！ngx-extended-pdf-viewer基于PDF.js的主题系统，提供了更简洁的颜色配置方式，我给你两种实用方案：

方案1：覆盖内置CSS变量 #

这个库暴露了一系列CSS自定义属性（变量），你可以直接在全局样式或者组件样式里覆盖它们，完全不用改动组件模板：

/* 全局styles.css或者组件的style.scss中添加 */
::ng-deep .ngx-extended-pdf-viewer {
  /* 修改头部工具栏背景色 */
  --toolbar-background: darkblue;
  /* 修改工具栏按钮默认颜色 */
  --toolbar-button-color: #ffffff;
  /* 修改按钮hover时的颜色 */
  --toolbar-button-hover-color: #e0e0e0;
  /* 如果需要修改按钮激活状态的颜色 */
  --toolbar-button-active-color: #ffd700;
}

这些变量是库内置的，精准对应工具栏的各个颜色节点，比自定义工具栏省心太多，还不会破坏原有工具栏的所有内置功能。

方案2：自定义主题类（多实例隔离场景） #

如果你需要给多个PDFViewer实例设置不同主题，可以给组件指定theme属性，然后针对这个主题类写专属样式：

组件模板： #

<ngx-extended-pdf-viewer 
  #pdfViewer 
  [theme]="'custom-dark-blue'"
  [src]="'assets/pdfs/dachstein.pdf'" 
  [height]="'50vh'" 
  [useBrowserLocale]="true" 
  [textLayer]="true">
</ngx-extended-pdf-viewer>

样式文件： #

::ng-deep .ngx-extended-pdf-viewer.custom-dark-blue {
  --toolbar-background: darkblue;
  --toolbar-button-color: #fff;
  --toolbar-button-hover-background: rgba(255,255,255,0.1);
  /* 其他需要调整的颜色变量都可以在这里定义 */
}

为什么不推荐自定义工具栏？ #

你之前尝试的自定义工具栏方式虽然可行，但需要重写整个工具栏结构，很容易丢失官方内置的功能（比如缩放、页码跳转、下载导出等）。而用主题配置的方式，既能保留原有工具栏的完整功能，又能轻松修改颜色，是更优的选择。

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