How to customize the styling of the Docusaurus Classic Theme
#
IntroductionHere are some modifications I have made to /src/css/style.css
for the default Docusaurus Classic theme.
#
ColorsI use the blue colors listed here. I also decrease the size of the pre
attributes. The default is commented out.
#
Dark ModeI switched the navigation and background colors on dark mode.
#
Font SizeI 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.
#
Doc WidthI find that the documents are too wide, so I limited them:
#
Announcement BarI made the links in the announcement bar appear the same as normal links, and I made it work with dark mode:
#
Navigation BarIf 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:
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.
#
HeaderTo make the font size of the header menu the same as the font size for normal text and the side menu, I add this:
#
Left ShadowTo remove the shadow on the left of each doc, I added this:
#
Footer LinksI adjusted the styling for the footer links to make them look more like normal links:
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.
#
Custom FontsYou can use custom fonts with CSS. For example, you can add custom fonts (e.g., from Google Fonts) like this:
Then change everything except code blocks to Open Sans like this: