Skip to main content

How to customize the styling of the Docusaurus Classic Theme

Introduction​

Here are some modifications I have made to /src/css/style.css for the default Docusaurus Classic theme.

General styles​

Colors​

I use the blue colors listed here. I also decrease the size of the pre attributes. The default is commented out.

:root {
  --ifm-color-primary: #3578e5; /*#25c2a0;*/
  --ifm-color-primary-dark: #1d68e1; /*rgb(33, 175, 144);*/
  --ifm-color-primary-darker: #1b62d4; /*rgb(31, 165, 136);*/
  --ifm-color-primary-darkest: #1751af; /*rgb(26, 136, 112);*/
  --ifm-color-primary-light: #4e89e8; /*rgb(70, 203, 174);*/
  --ifm-color-primary-lighter: #5a91ea; /*rgb(102, 212, 189);*/
  --ifm-color-primary-lightest: #80aaef; /*rgb(146, 224, 208);*/
  --ifm-code-font-size: 90%; /*95%;*/
}

Dark mode​

I switched the navigation and background colors on dark mode.

html[data-theme='dark'] {
  --ifm-background-color: #1e2125;
  --ifm-background-surface-color: #121212;
}

Font size​

I increased the base font size because the default is too small for me and then I decreased the article header h1 font size because it's too big.

@media screen and (max-width: 996px) {
  :root {
    --ifm-font-size-base: 18px;
  }
  article header h1 {
    font-size: 1.5rem !important;
  }
  .hero .hero__title {
    font-size: 2.5rem;
  }
}

@media screen and (min-width: 997px) {
  :root {
    --ifm-font-size-base: 17px;
  }
  article header h1 {
    font-size: 2rem !important;
  }
}

Custom fonts​

You can use custom fonts with CSS. For example, you can add custom fonts (e.g., from Google Fonts) like this:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

Then change everything except code blocks to Open Sans like this:

:root {
  --ifm-font-family-base: 'Open Sans';
}

Spacing and display​

Doc width​

I find that the documents are too wide, so I limited them:

article {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

Announcement bar​

I made the links in the announcement bar appear the same as normal links, and I made it work with dark mode:

/* Announcement Bar */
div[class^='announcementBarContent'] {
  background-color: var(--ifm-background-surface-color);
  color: var(--ifm-font-color-base);
}

div[class^='announcementBarContent'] a {
  color: var(--ifm-link-color);
  text-decoration: inherit;
}

div[class^='announcementBarContent'] a:hover {
  color: var(--ifm-link-color);
  text-decoration: underline;
}

If I want to have the full name of my site on one line on mobile when I do not have a search bar, then I use:

.navbar .navbar__items {
  flex: auto;
}

If my Docusaurus site has search, then I remove or comment out this line if the title of my site is short enough (as it is here).

To make the font size of the header menu the same as the font size for normal text and the side menu, I add this:

/* Header Dropdown Menu */
.dropdown__link {
  font-size: inherit;
}

Left shadow​

To remove the shadow on the left of each doc, I added this:

/* Remove shadow on the left */
:root {
  --ifm-global-shadow-md: 0px;
}

I adjusted the styling for the footer links to make them look more like normal links:

/* Adjust footer link colors */
#__docusaurus > footer > div > div.text--center > div > a {
  color: unset;
}

#__docusaurus > footer > div > div.text--center > div > a:hover {
  color: var(--ifm-link-color);
  text-decoration: underline;
}

In-line table of contents​

I like to display the in-line table of contents only when the side table of contents isn't visible. See set up Ubuntu WSL for an example of how this works.

@media screen and (min-width: 997px) {
  /* Show inline table of contents on mobile only */
  div[class^='tableOfContentsInline'] {
    display: none;
  }
}

I also removed the button--outline class in /src/pages/index.js/ to modify the look of the button I have on the first page.