htmlcssdocusaurus

Change default text color in Docusaurus v2


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.


Solution

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