Styling Docusaurus

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

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: 150% !important;
}
}
@media screen and (min-width: 997px) {
:root {
--ifm-font-size-base: 17px;
}
article header h1 {
font-size: 250% !important;
}
}

Navigation Bar

If I want to have the full name of my site on one line on mobile when I don't have a search bar, then I will use:

.navbar .navbar__items {
flex: auto;
}

If I have search, then I'll remove or comment out this line if the title of my site is short (as it is here). To find out how I implemented Algolia's self-hosted Docsearch, please click here.


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.

Last updated on