Here are some modifications I have made to
/src/css/style.css for the default Docusaurus Classic theme.
I use the blue colors listed here. I also decrease the size of the
pre attributes. The default is commented out.
I switched the navigation and background colors on dark mode.
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.
I find that the documents are too wide, so I limited them:
I made the links in the announcement bar appear the same as normal links, and I made it work with dark mode:
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:
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.
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:
To remove the shadow on the left of each doc, I added this:
I 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.
You 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: