title: docusaurus: how to use ifm-color-primary in styles.module.css
body: <p>The scaffolding of Docusaurus creates the following in <code>custom.css</code></p>
  
  <pre><code>: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);
    --ifm-code-font-size: 95%;
  }
  </code></pre>
  
  <p>and the following in <code>styles.module.css</code>:</p>
  
  <pre><code>.features {
    display: flex;
    align-items: center;
    padding: 2rem 0;
    width: 100%;
  }
  </code></pre>
  
  <p>I want to define <code>.featuresAlt</code> as the following: </p>
  
  <pre><code>.featuresAlt {
    background-color: lightest;
  }
  </code></pre>
  
  <p>and then use it in <code>index.js</code>; something like: </p>
  
  <pre><code>{features &amp;&amp; features.length &gt; 0 &amp;&amp; (
    &lt;section className={classnames(styles.features, styles.featuresAlt)}&gt;
      &lt;div className="container"&gt;
        &lt;div className="row"&gt;
          {features.map((props, idx) =&gt; (
            &lt;Feature key={idx} {...props} /&gt;
          ))}
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  )}
  </code></pre>
  
  <p>My questions are: </p>
  
  <ul>
  <li><p>I am trying to separate different sections (e.g., <code>features</code> and <code>products</code>) with different background colors, should I be defining my own style, or there something built-in?</p></li>
  <li><p>The above-defined <code>featuresAlt</code> is incorrect as it will not have the <code>lightest</code> background; how can I fix it?</p></li>
  <li><p>Is it recommended to define colors for styles in <code>styles.module.css</code> or they should be defined in a different place? </p></li>
  </ul>
  
  <p>(I went over <a href="https://v2.docusaurus.io/docs/styling-layout" rel="nofollow noreferrer">styling page of Docusaurus documentation</a>, but could not find the info I need.)</p>