Sidebar Docusaurus CSS V2

Question

I have 2 question.

1. Is it possible to change a sidebar backgorund colour based on it's id? For example, in sidebar.js, I have sidebar1 and sidebar2. I want sidebar 1 to have a different colour than sidebar 2.
2. How do I input the default sidebar on a custom page? I created a new page, however, it only contain the default navbar and footer only, no sidebar.

Thanks for all the help :)

Answer 1

For now you can swizzle the theme sidebar and add a class according to the sidebar name.

If you open an issue, we could automatically add that class on the sidebar

Answer 2

Use CSS:

1. Add customCss to your theme config(docs), e.g.:

   {
     // ...
     presets: [
       [
         'classic',
         /** @type {import('@docusaurus/preset-classic').Options} */
         ({
           // ...
           theme: {
             customCss: require.resolve('./src/css/custom.css'),
           }
         })
       ]
     ]
   }
   

2. Add "className": "category1" to _category_.json
3. Add class of same name to src/css/custom.css:

   .category1 > .menu__link {
     color: red;
   }
   

   • NOTE: the element that receives the class contains an a element of class .menu__link that defines the default color, so override that.