diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
index 333c37808427..13277c2756bd 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
@@ -6,14 +6,13 @@
  */
 
 import React, {useCallback, useState} from 'react';
-import Toggle from 'react-toggle';
-
 import Link from '@docusaurus/Link';
 import Head from '@docusaurus/Head';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import SearchBar from '@theme/SearchBar';
+import Toggle from '@theme/Toggle';
 
 import classnames from 'classnames';
 
@@ -42,9 +41,6 @@ function NavLink({to, href, label, position, ...props}) {
   );
 }
 
-const Moon = () => <span className={classnames(styles.toggle, styles.moon)} />;
-const Sun = () => <span className={classnames(styles.toggle, styles.sun)} />;
-
 function Navbar() {
   const context = useDocusaurusContext();
   const [sidebarShown, setSidebarShown] = useState(false);
@@ -133,10 +129,6 @@ function Navbar() {
                 aria-label="Dark mode toggle"
                 checked={theme === 'dark'}
                 onChange={onToggleChange}
-                icons={{
-                  checked: <Moon />,
-                  unchecked: <Sun />,
-                }}
               />
             )}
             <SearchBar
@@ -165,10 +157,6 @@ function Navbar() {
                 aria-label="Dark mode toggle in sidebar"
                 checked={theme === 'dark'}
                 onChange={onToggleChange}
-                icons={{
-                  checked: <Moon />,
-                  unchecked: <Sun />,
-                }}
               />
             )}
           </div>
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css
index c3e85fe7d811..fb1c5c12b39a 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css
@@ -11,161 +11,8 @@
   }
 }
 
-.toggle {
-  align-items: center;
-  display: flex;
-  height: 10px;
-  justify-content: center;
-  position: relative;
-  width: 10px;
-}
-.toggle::before {
-  position: absolute;
-}
-.moon::before {
-  content: '\1F31C';
-}
-.sun::before {
-  content: '\1F31E';
-}
-
 @media (max-width: 360px) {
   .hideLogoText {
     display: none;
   }
 }
-
-/**
- * styles for React Toggle
- * copied over because we want to allow user to swizzle it and modify the css
- * https://github.com/aaronshaf/react-toggle/blob/master/style.css
- */
-:global(.react-toggle) {
-  touch-action: pan-x;
-
-  display: inline-block;
-  position: relative;
-  cursor: pointer;
-  background-color: transparent;
-  border: 0;
-  padding: 0;
-
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  -webkit-tap-highlight-color: transparent;
-}
-
-:global(.react-toggle-screenreader-only) {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-:global(.react-toggle--disabled) {
-  cursor: not-allowed;
-  opacity: 0.5;
-  -webkit-transition: opacity 0.25s;
-  transition: opacity 0.25s;
-}
-
-:global(.react-toggle-track) {
-  width: 50px;
-  height: 24px;
-  padding: 0;
-  border-radius: 30px;
-  background-color: #4d4d4d;
-  -webkit-transition: all 0.2s ease;
-  -moz-transition: all 0.2s ease;
-  transition: all 0.2s ease;
-}
-
-:global(.react-toggle-track-check) {
-  position: absolute;
-  width: 14px;
-  height: 10px;
-  top: 0px;
-  bottom: 0px;
-  margin-top: auto;
-  margin-bottom: auto;
-  line-height: 0;
-  left: 8px;
-  opacity: 0;
-  -webkit-transition: opacity 0.25s ease;
-  -moz-transition: opacity 0.25s ease;
-  transition: opacity 0.25s ease;
-}
-
-:global(.react-toggle--checked .react-toggle-track-check) {
-  opacity: 1;
-  -webkit-transition: opacity 0.25s ease;
-  -moz-transition: opacity 0.25s ease;
-  transition: opacity 0.25s ease;
-}
-
-:global(.react-toggle-track-x) {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  top: 0px;
-  bottom: 0px;
-  margin-top: auto;
-  margin-bottom: auto;
-  line-height: 0;
-  right: 10px;
-  opacity: 1;
-  -webkit-transition: opacity 0.25s ease;
-  -moz-transition: opacity 0.25s ease;
-  transition: opacity 0.25s ease;
-}
-
-:global(.react-toggle--checked .react-toggle-track-x) {
-  opacity: 0;
-}
-
-:global(.react-toggle-thumb) {
-  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  width: 22px;
-  height: 22px;
-  border: 1px solid #4d4d4d;
-  border-radius: 50%;
-  background-color: #fafafa;
-
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-
-  -webkit-transition: all 0.25s ease;
-  -moz-transition: all 0.25s ease;
-  transition: all 0.25s ease;
-}
-
-:global(.react-toggle--checked .react-toggle-thumb) {
-  left: 27px;
-  border-color: #19ab27;
-}
-
-:global(.react-toggle--focus .react-toggle-thumb) {
-  -webkit-box-shadow: 0px 0px 3px 2px #0099e0;
-  -moz-box-shadow: 0px 0px 3px 2px #0099e0;
-  box-shadow: 0px 0px 2px 3px #0099e0;
-}
-
-:global(.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb) {
-  -webkit-box-shadow: 0px 0px 5px 5px #0099e0;
-  -moz-box-shadow: 0px 0px 5px 5px #0099e0;
-  box-shadow: 0px 0px 5px 5px #0099e0;
-}
diff --git a/packages/docusaurus-theme-classic/src/theme/Toggle/index.js b/packages/docusaurus-theme-classic/src/theme/Toggle/index.js
new file mode 100644
index 000000000000..c49ff8ed1dde
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/Toggle/index.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import Toggle from 'react-toggle';
+
+import classnames from 'classnames';
+import styles from './styles.module.css';
+
+const Moon = () => <span className={classnames(styles.toggle, styles.moon)} />;
+const Sun = () => <span className={classnames(styles.toggle, styles.sun)} />;
+
+export default function(props) {
+  return (
+    <Toggle
+      icons={{
+        checked: <Moon />,
+        unchecked: <Sun />,
+      }}
+      {...props}
+    />
+  );
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css
new file mode 100644
index 000000000000..dd8302fdfaef
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css
@@ -0,0 +1,159 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.toggle {
+  align-items: center;
+  display: flex;
+  height: 10px;
+  justify-content: center;
+  position: relative;
+  width: 10px;
+}
+.toggle::before {
+  position: absolute;
+}
+.moon::before {
+  content: '\1F31C';
+}
+.sun::before {
+  content: '\1F31E';
+}
+
+/**
+ * styles for React Toggle
+ * copied over because we want to allow user to swizzle it and modify the css
+ * https://github.com/aaronshaf/react-toggle/blob/master/style.css
+ */
+:global(.react-toggle) {
+  touch-action: pan-x;
+
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+}
+
+:global(.react-toggle-screenreader-only) {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+:global(.react-toggle--disabled) {
+  cursor: not-allowed;
+  opacity: 0.5;
+  -webkit-transition: opacity 0.25s;
+  transition: opacity 0.25s;
+}
+
+:global(.react-toggle-track) {
+  width: 50px;
+  height: 24px;
+  padding: 0;
+  border-radius: 30px;
+  background-color: #4d4d4d;
+  -webkit-transition: all 0.2s ease;
+  -moz-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+:global(.react-toggle-track-check) {
+  position: absolute;
+  width: 14px;
+  height: 10px;
+  top: 0px;
+  bottom: 0px;
+  margin-top: auto;
+  margin-bottom: auto;
+  line-height: 0;
+  left: 8px;
+  opacity: 0;
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+}
+
+:global(.react-toggle--checked .react-toggle-track-check) {
+  opacity: 1;
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+}
+
+:global(.react-toggle-track-x) {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  top: 0px;
+  bottom: 0px;
+  margin-top: auto;
+  margin-bottom: auto;
+  line-height: 0;
+  right: 10px;
+  opacity: 1;
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+}
+
+:global(.react-toggle--checked .react-toggle-track-x) {
+  opacity: 0;
+}
+
+:global(.react-toggle-thumb) {
+  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 22px;
+  height: 22px;
+  border: 1px solid #4d4d4d;
+  border-radius: 50%;
+  background-color: #fafafa;
+
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  -webkit-transition: all 0.25s ease;
+  -moz-transition: all 0.25s ease;
+  transition: all 0.25s ease;
+}
+
+:global(.react-toggle--checked .react-toggle-thumb) {
+  left: 27px;
+  border-color: #19ab27;
+}
+
+:global(.react-toggle--focus .react-toggle-thumb) {
+  -webkit-box-shadow: 0px 0px 3px 2px #0099e0;
+  -moz-box-shadow: 0px 0px 3px 2px #0099e0;
+  box-shadow: 0px 0px 2px 3px #0099e0;
+}
+
+:global(.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb) {
+  -webkit-box-shadow: 0px 0px 5px 5px #0099e0;
+  -moz-box-shadow: 0px 0px 5px 5px #0099e0;
+  box-shadow: 0px 0px 5px 5px #0099e0;
+}