feat(v2): add style property to theme-classic navbar (#3432)

* feat(v2): add style property to theme-classic navbar

* revert config test change

* review changes

packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.js

@@ -33,6 +33,7 @@ describe('themeConfig', () => {
       },
       image: 'img/docusaurus-soc.png',
       navbar: {
+        style: 'primary',
         hideOnScroll: true,
         title: 'Docusaurus',
         logo: {

packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx

@@ -43,7 +43,12 @@ function Navbar(): JSX.Element {
   const {
     siteConfig: {
       themeConfig: {
-        navbar: {title = '', items = [], hideOnScroll = false} = {},
+        navbar: {
+          title = '',
+          items = [],
+          hideOnScroll = false,
+          style = undefined,
+        } = {},
         colorMode: {disableSwitch: disableColorModeSwitch = false} = {},
       },
     },
@@ -83,7 +88,9 @@ function Navbar(): JSX.Element {
   return (
     <nav
       ref={navbarRef}
-      className={clsx('navbar', 'navbar--light', 'navbar--fixed-top', {
+      className={clsx('navbar', 'navbar--fixed-top', {
+        'navbar--dark': style === 'dark',
+        'navbar--primary': style === 'primary',
         'navbar-sidebar--show': sidebarShown,
         [styles.navbarHideable]: hideOnScroll,
         [styles.navbarHidden]: !isNavbarVisible,

packages/docusaurus-theme-classic/src/validateThemeConfig.js

@@ -189,6 +189,7 @@ const ThemeConfigSchema = Joi.object({
     isCloseable: Joi.bool().default(true),
   }).optional(),
   navbar: Joi.object({
+    style: Joi.string().equal('dark', 'primary'),
     hideOnScroll: Joi.bool().default(false),
     // TODO temporary (@alpha-58)
     links: Joi.any().forbidden().messages({

website/versioned_docs/version-2.0.0-alpha.63/theme-classic.md

@@ -304,6 +304,24 @@ module.exports = {
 };
 ```
 
+### Navbar style
+
+You can set the static Navbar style without disabling the theme switching ability. The selected style will always apply no matter which theme user have selected.
+
+Currently, there are two possible style options: `dark` and `primary` (based on the `--ifm-color-primary` color). You can see the styles preview in the [Infima documentation](https://facebookincubator.github.io/infima/docs/components/navbar/).
+
+```js {5} title="docusaurus.config.js"
+module.exports = {
+  // ...
+  themeConfig: {
+    navbar: {
+      style: 'primary',
+    },
+    // ...
+  },
+};
+```
+
 <!--
 
 ## Footer