How to customize Docusaurus pages

How to customize Docusaurus pages?

• Modify styles using src > css > custom.css
• Find the styles by using Developer Tool in browser

Most styles can be changed using :root and [data-theme='dark']

Light mode

Use Docusaurus documentation of how to change theme to figure out the variants.

src/css/custom.css

:root {
  --ifm-background-color: #fefbfb;
  --ifm-navbar-background-color: #fefbfb;
  --ifm-color-primary: #d33132;
  --ifm-color-primary-dark: #c1292a;
  --ifm-color-primary-darker: #b62728;
  --ifm-color-primary-darkest: #962021;
  --ifm-color-primary-light: #d84647;
  --ifm-color-primary-lighter: #da5152;
  --ifm-color-primary-lightest: #e17172;
  --ifm-color-secondary: #cae892;
  --ifm-color-secondary-dark: #bbe173;
  --ifm-color-secondary-darker: #b3de63;
  --ifm-color-secondary-darkest: #9cd434;
  --ifm-color-secondary-light: #d9efb1;
  --ifm-color-secondary-lighter: #e1f2c1;
  --ifm-color-secondary-lightest: #f8fcf0;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

Dark mode

src/css/custom.css

[data-theme='dark'] {
  /* --ifm-navbar-background-color: #040101; */
  --ifm-color-primary: #ce2c2c;
  --ifm-color-primary-dark: #b92828;
  --ifm-color-primary-darker: #af2525;
  --ifm-color-primary-darkest: #901f1f;
  --ifm-color-primary-light: #d63d3d;
  --ifm-color-primary-lighter: #d84848;
  --ifm-color-primary-lightest: #de6767;
  --ifm-color-secondary: #4f6d17;
  --ifm-color-secondary-dark: #476215;
  --ifm-color-secondary-darker: #435d14;
  --ifm-color-secondary-darkest: #374c10;
  --ifm-color-secondary-light: #577819;
  --ifm-color-secondary-lighter: #5b7d1a;
  --ifm-color-secondary-lightest: #678e1e;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

Some styles in dark mode need to use html[data-theme='dark']

Change background and surface colors

light mode

src/css/custom.css

:root {
  --ifm-background-color: #fefbfb;
}

dark mode

src/css/custom.css

html[data-theme='dark'] {
  --ifm-background-color: #040101;
  --ifm-background-surface-color: #0f0505;
}

Change footer colors

light mode

src/css/custom.css

.footer--dark{
  --ifm-footer-background-color: #f2eeee;
  --ifm-footer-color: var(--ifm-color-gray-700);
  --ifm-footer-link-color: var(--ifm-color-gray-700);
  --ifm-footer-title-color: var(--ifm-color-emphasis-800);
}

dark mode

src/css/custom.css

html[data-theme='dark'] .footer--dark{
  --ifm-footer-background-color: #110D0D;
}

Change Code Block Color

To find the list of available themes, right-click on prismThemes and select Go To Type Definition, or delete .github, then retype . to see the suggested list.

For list of React Syntax Highlighter, check out this link. Note that the theme names in Docusaurus may differ from those in React Syntax Highlighter.

docusaurus.config.ts

const config: Config = {
    ...
    themeConfig:{
        prism: {
          theme: prismThemes.github,        // light mode theme
          darkTheme: prismThemes.dracula,   // Dark mode theme
        },
    }
}

Other styles

src/css/custom.css

--ifm-color-white: #fff;
--ifm-color-black: #000;
--ifm-color-gray-0: var(--ifm-color-white);
--ifm-color-gray-100: #f5f6f7;
--ifm-color-gray-200: #ebedf0;
--ifm-color-gray-300: #dadde1;
--ifm-color-gray-400: #ccd0d5;
--ifm-color-gray-500: #bec3c9;
--ifm-color-gray-600: #8d949e;
--ifm-color-gray-700: #606770;
--ifm-color-gray-800: #444950;
--ifm-color-gray-900: #1c1e21;
--ifm-color-gray-1000: var(--ifm-color-black);
--ifm-color-emphasis-0: var(--ifm-color-gray-0);
--ifm-color-emphasis-100: var(--ifm-color-gray-100);
--ifm-color-emphasis-200: var(--ifm-color-gray-200);
--ifm-color-emphasis-300: var(--ifm-color-gray-300);
--ifm-color-emphasis-400: var(--ifm-color-gray-400);
--ifm-color-emphasis-500: var(--ifm-color-gray-500);
--ifm-color-emphasis-600: var(--ifm-color-gray-600);
--ifm-color-emphasis-700: var(--ifm-color-gray-700);
--ifm-color-emphasis-800: var(--ifm-color-gray-800);
--ifm-color-emphasis-900: var(--ifm-color-gray-900);
--ifm-color-emphasis-1000: var(--ifm-color-gray-1000);