CODEWITHSUNDEEP
htmlcssdocusaurus
Dr. Strangelove
Dr. Strangelove

Reputation: 3328

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.

Upvotes: 4

Views: 2853

Answers (2)

Josue Alexander Ibarra
Josue Alexander Ibarra

Reputation: 8995

You can set the following so it works both on light and dark modes:

[data-theme='light'] .DocSearch  {
  --docsearch-text-color:#000000;
}

[data-theme='dark'] .DocSearch {
 --docsearch-text-color: #ffffff;
}

The documentation includes many more properties you can override: https://docusaurus.io/docs/search#styling-your-algolia-search

Upvotes: 0

Yangshun Tay
Yangshun Tay

Reputation: 53169

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

Upvotes: 4

Related Questions