feat(v2): allow to specify different logo for dark mode (#2261)

* feat(v2): allow to specify different logo for dark mode * Rename darkSrc with srcDark
facebook · Feb 1, 2020 · 9807552 · 9807552
1 parent e224361
commit 9807552
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
@@ -77,7 +77,8 @@ function Navbar() {
         target: '_blank',
       }
     : null;
-  const logoImageUrl = useBaseUrl(logo.src);
+  const logoSrc = logo.srcDark && isDarkTheme ? logo.srcDark : logo.src;
+  const logoImageUrl = useBaseUrl(logoSrc);
 
   return (
     <nav

diff --git a/website/docs/theme-classic.md b/website/docs/theme-classic.md
@@ -45,7 +45,7 @@ module.exports = {
 
 ### Navbar Title & Logo
 
-You can add a logo and title to the navbar via `themeConfig.navbar`. Logo can be placed in [static folder](static-assets.md). Logo URL is set to base URL of your site by default. Although you can specify your own URL for the logo, if it is an external link, it will open in a new tab.
+You can add a logo and title to the navbar via `themeConfig.navbar`. Logo can be placed in [static folder](static-assets.md). Logo URL is set to base URL of your site by default. Although you can specify your own URL for the logo, if it is an external link, it will open in a new tab. You can also set a different logo for dark mode.
 
 ```js
 // docusaurus.config.js
@@ -57,6 +57,7 @@ module.exports = {
       logo: {
         alt: 'Site Logo',
         src: 'img/logo.svg',
+        srcDark: 'img/logo_dark.svg', // default to logo.src
         href: 'https://v2.docusaurus.io/', // default to siteConfig.baseUrl
       },
     },