docusaurus/website/docs/styling-layout.md

id	title
styling-layout	Styling and Layout

Styling your site with Infima

The classic template of Docusaurus uses Infima as the underlying styling framework. Infima provides powerful and flexible layout and styling for content-centric websites. For more details of Infima, check out Infima docs.

When you init your Docusaurus 2 project, the website will be generated with basic Infima stylesheets and default styling. You may customize the styling by editing the custom.css file under your site's /css directory:

/**
 * /css/custom.css
 * You can override the default Infima variables here. 
 * this is not a complete list of --ifm- variables
 */
:root {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: rgb(33, 175, 144);
  --ifm-color-primary-darker: rgb(31, 165, 136);
  --ifm-color-primary-darkest: rgb(26, 136, 112);
  --ifm-color-primary-light: rgb(70, 203, 174);
  --ifm-color-primary-lighter: rgb(102, 212, 189);
  --ifm-color-primary-lightest: rgb(146, 224, 208);
}

Styling your components

Your whole Docusaurus 2 site is a React app. Any styling that works with React will work with your site.

Component styling can be particularly useful when you wish to customize or swizzle a component. And there are a few frameworks we recommend that work particularly well with components.

With CSS Modules

To style your components using CSS Modules, name your stylesheets as xxx.module.css. The build step will pick up such files as CSS Module stylesheets. Then, you may get the generated class names from the module:

import styles from './styles.module.css';

export default () => (
  <main className={styles.main}>
    <h1 className={styles.heading}>Hello!</h1>
    <article className={styles.docContent}>My doc</article>
  </main>
);

With CSS-in-JS Frameworks

This section is a work in progress. Welcoming PRs.