From 5c95a3e6af6b906f8bd43699182c7ee5af0bac71 Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Fri, 11 Sep 2020 00:56:24 +0200
Subject: [PATCH 1/3] feat(v2): add style property to theme-classic navbar

---
 .../src/__tests__/validateThemeConfig.test.js  |  1 +
 .../src/theme/Navbar/index.tsx                 | 11 +++++++++--
 .../src/validateThemeConfig.js                 |  1 +
 website/docusaurus.config.js                   |  1 +
 .../version-2.0.0-alpha.63/theme-classic.md    | 18 ++++++++++++++++++
 5 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.js b/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.js
index dd91fcabacfd..843c2d82059d 100644
--- a/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.js
+++ b/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: {
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx
index b44cd349c914..fe606ba63e92 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx
+++ b/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,
diff --git a/packages/docusaurus-theme-classic/src/validateThemeConfig.js b/packages/docusaurus-theme-classic/src/validateThemeConfig.js
index 53d9d4f41274..45b44b580022 100644
--- a/packages/docusaurus-theme-classic/src/validateThemeConfig.js
+++ b/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({
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index ee5891776d65..824e913ec5de 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -240,6 +240,7 @@ module.exports = {
       },
     },
     navbar: {
+      style: 'primary',
       hideOnScroll: true,
       title: 'Docusaurus',
       logo: {
diff --git a/website/versioned_docs/version-2.0.0-alpha.63/theme-classic.md b/website/versioned_docs/version-2.0.0-alpha.63/theme-classic.md
index 769411b915ea..1def7c44f2ac 100644
--- a/website/versioned_docs/version-2.0.0-alpha.63/theme-classic.md
+++ b/website/versioned_docs/version-2.0.0-alpha.63/theme-classic.md
@@ -304,6 +304,24 @@ module.exports = {
 };
 ```
 
+### Navbar force style
+
+This might be useful if you prefer static Navbar design without disabling the theme switching ability. You can force single theme to always apply no matter which theme user have selected.
+
+Currently, two possible style options are `dark` and `primary`.
+
+```js {5} title="docusaurus.config.js"
+module.exports = {
+  // ...
+  themeConfig: {
+    navbar: {
+      style: 'primary',
+    },
+    // ...
+  },
+};
+```
+
 <!--
 
 ## Footer

From 02d4032b4d6e131abca057306cb08ce7d287e92f Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Fri, 11 Sep 2020 01:26:47 +0200
Subject: [PATCH 2/3] revert config test change

---
 website/docusaurus.config.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 824e913ec5de..ee5891776d65 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -240,7 +240,6 @@ module.exports = {
       },
     },
     navbar: {
-      style: 'primary',
       hideOnScroll: true,
       title: 'Docusaurus',
       logo: {

From a7c35d95dd6260a48a460228f98fb4863c70e7e2 Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Fri, 11 Sep 2020 16:45:11 +0200
Subject: [PATCH 3/3] review changes

---
 .../versioned_docs/version-2.0.0-alpha.63/theme-classic.md  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/versioned_docs/version-2.0.0-alpha.63/theme-classic.md b/website/versioned_docs/version-2.0.0-alpha.63/theme-classic.md
index 1def7c44f2ac..2271cb8e2bbc 100644
--- a/website/versioned_docs/version-2.0.0-alpha.63/theme-classic.md
+++ b/website/versioned_docs/version-2.0.0-alpha.63/theme-classic.md
@@ -304,11 +304,11 @@ module.exports = {
 };
 ```
 
-### Navbar force style
+### Navbar style
 
-This might be useful if you prefer static Navbar design without disabling the theme switching ability. You can force single theme to always apply no matter which theme user have selected.
+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, two possible style options are `dark` and `primary`.
+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 = {