Change default text color in Docusaurus v2

Question

In Docusaurus v2 I can override the default text color for each class as:

.features {
  display: flex;
  align-items: center;
  padding: 2rem 0;
  width: 100%;
  color: red;
}

I don't like this approach because it makes it harder to define separate colors for the dark and light theme.

By default the text color is set to black in light theme, and white in dark theme. However, I cannot seem to find where these are defined.

• I am interested in modifying these defaults, where are they defined?
• Is this the recommended way of styling the default text color?

Answer 1

Use the browser to inspect HTML and see which CSS variables affect the text color.

Modify the var(--ifm-font-color-base) color by adding the following CSS to custom.css.

:root {
  --ifm-font-color-base: #000;
}