custom-css-hook

TL;DR

Integrate custom css file into the docusaurus-tde build.

Integration:

1. Add dependency

yarn

yarn add -WD "@docusaurus-tde/custom-css-hook"

npm

npm i "@docusaurus-tde/custom-css-hook"

2. Connect the hook

For the hook to work, you need a css file in which you can override the standard styling settings, for example, create an empty file custom.css next to docusaurus-tde.config.js.

3. Connect the hook

docusaurus-tde.config.js

module.exports = {
    hooks: [
      ['@docusaurus-tde/custom-css-hook', { source: './custom.css' }],
    ]
}

Configuration:

Example of custom css file:

custom.css

:root {
  --ifm-color-primary: #25c2a0;
}

html[data-theme='dark'] {
  --ifm-color-primary: rgb(33, 175, 144);
}

.navbar__logo {
  min-height: 2.5rem;
}