How to disable the dark mode in compodoc for angular?

Question

Am totally new to compodoc, with the newer version of dompodoc, dark mode is supported out of the box. And while checking the their documentation, I couldn't find any option to disable it.

Am currently generating the documents using the following commands

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

Am trying to create a documentation for a angular library. Is there a proper way to disable the darkmode in compodoc ?

Answer 1

Thanks vincent Ogloblinsky for the help, we will be able to achieve this by using the --extTheme option and have to specify our custom theme as well and for the --theme we have to specify the custom flag name that we provided earlier.

Example:-

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

Here compodoc_theme my directory which contain my custom there. What happened internally is that compodoc will copy the styles inside the specified directory into the documentation/styles and from there using the --theme it will override the default dark theme.

Example for a sample custom theme file:

  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;
}