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
facebook · Sep 11, 2020 · 086bee2 · 086bee2
1 parent c0ce83f
commit 086bee2
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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/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 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