Skip to main content

Change Colors and Font

Docusaurus starts with a default green color. I changed it a neutral color palette. Just using black/white combinations

Add following to custom.css​

src/css/custom.css
:root {
  --ifm-color-primary: #111827;
  --ifm-color-primary-dark: #0f1623;
  --ifm-color-primary-darker: #0e1421;
  --ifm-color-primary-darkest: #0c111b;
  --ifm-color-primary-light: #131a2b;
  --ifm-color-primary-lighter: #141c2d;
  --ifm-color-primary-lightest: #161f33;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
  --ifm-font-family-base: "Geist", system-ui, -apple-system, Segoe UI, Roboto,
    Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --ifm-heading-font-family: "Geist", system-ui, -apple-system, Segoe UI,
    Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

[data-theme="dark"] {
  --ifm-color-primary: #f9fafb;
  --ifm-color-primary-dark: #dbe1e7;
  --ifm-color-primary-darker: #ccd4dd;
  --ifm-color-primary-darkest: #9fafbf;
  --ifm-color-primary-light: #ffffff;
  --ifm-color-primary-lighter: #ffffff;
  --ifm-color-primary-lightest: #ffffff;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

Install font​

docusaurus.config.ts
const config: Config = {
  stylesheets: [
    "https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Inter:wght@300;400;500;600;700;800;900&family=Lexend:wght@100..900&display=swap",
  ],
};

Flip Hero Section Colors​

src/css/custom.css
.hero--primary {
  --ifm-hero-background-color: var(--ifm-background-color);
  --ifm-hero-text-color: var(--ifm-font-color-base);
}