如何在 compodoc 中为 Angular 禁用暗模式？答案

【问题标题】：How to disable the dark mode in compodoc for angular?如何在 compodoc 中为 Angular 禁用暗模式？
【发布时间】：2021-10-15 14:32:19
【问题描述】：

我对 compodoc 完全陌生，使用较新版本的 dompodoc，开箱即用支持暗模式。在查看他们的文档时，我找不到任何禁用它的选项。

目前正在使用以下命令生成文档

compodoc -p .\projects\deserv-angular-lib\tsconfig.lib.json -s --hideGenerator --disableSourceCode --disableDomTree --disableTemplateTab --disableStyleTab --disablePrivate --theme gitbook

我正在尝试为 Angular 库创建文档。是否有适当的方法来禁用 compodoc 中的暗模式？

【问题讨论】：

标签： angular documentation compodoc

【解决方案1】：

感谢 vincent Ogloblinsky 的帮助，我们将能够通过使用 --extTheme 选项来实现这一点，并且还必须指定我们的自定义主题以及--theme我们必须指定我们之前提供的自定义标志名称。

例子：-

compodoc -p .\tsconfig.doc.json -y compodoc_theme/  -s --hideGenerator --disableSourceCode --disableDomTree --disableTemplateTab --disableStyleTab --disablePrivate --theme compodoc_lightmode

这里是 compodoc_theme 我的目录，其中包含我的自定义。内部发生的情况是，compodoc 会将指定目录中的样式复制到文档/样式中，并从那里使用 --theme 覆盖默认的深色主题。

示例自定义主题文件示例：

  body {
    background: #fafafa;
    color: #212121;
}

code {
    color: #e09393;
}

a,
.menu ul.list li a.active {
    color: #7fc9ff;
}

.menu {
    background: #fafafa;
    border-right: 1px solid #444;
}

.menu ul.list li a {
    color: #212121;
}

.menu ul.list li.divider {
    background: #444;
}

.xs-menu ul.list li:nth-child(2) {
    margin: 0;
    background: none;
}

.menu ul.list li:nth-child(2) {
    margin: 0;
    background: none;
}

#book-search-input {
    background: #fafafa;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
    color: #212121;
}

.table-bordered {
    border: 1px solid #444;
}

.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
    border: 1px solid #444;
}

.coverage a,
.coverage-count {
    color: #212121;
}

.coverage-header {
    color: black;
}

.routes svg text,
.routes svg a {
    fill: white;
}
.routes svg rect {
    fill: #212121 !important;
}

.navbar-default,
.btn-default {
    background: #fafafa;
    border-color: #444;
    color: #212121;
}

.navbar-default .navbar-brand {
    color: #212121;
}

.overview .card,
.modules .card {
    background: #fafafa;
    color: #212121;
    border: 1px solid #444;
}
.overview .card a {
    color: #212121;
}

.modules .card-header {
    background: none;
    border-bottom: 1px solid #444;
}

.module .list-group-item {
    background: none;
    border: 1px solid #444;
}

.container-fluid.module h3 a {
    color: #337ab7;
}

table.params thead {
    background: #fafafa;
    color: #212121;
}

【讨论】：