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;
}
Navigation bar
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 find out how I implemented Algolia's self-hosted Docsearch, please click here.
Header
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;
}
Footer links
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.