diff --git a/src/theme/Navbar/index.js b/src/theme/Navbar/index.js
index e6e27193c..916418ec6 100644
--- a/src/theme/Navbar/index.js
+++ b/src/theme/Navbar/index.js
@@ -10,6 +10,9 @@ const navbarLogo = {
   arrow: {
     Svg: require("@site/static/img/Arrow.svg").default,
   },
+  theme: {
+    Svg: require("@site/static/img/theme.svg").default,
+  },
 };
 
 const navbarContent = {
@@ -110,6 +113,7 @@ const mobileViewContent = {
 
 function Navbar() {
   const [isMobile, setIsMobile] = useState(false);
+  const [darkTheme, setDarkTheme] = useState(false);
   useEffect(() => {
     window.addEventListener("resize", () => {
       window.innerWidth > 680 ? setIsMobile(false) : setIsMobile(!isMobile);
@@ -164,6 +168,21 @@ function Navbar() {
                 </a>
               </button>
             </li>
+            <li
+              className={styles.navbar_theme_button}
+              onClick={() => {
+                setDarkTheme(!darkTheme);
+                const el = document.querySelector(
+                  `[data-theme="${darkTheme ? "dark" : "light"}"]`
+                );
+                el.setAttribute(
+                  "data-theme",
+                  `${darkTheme ? "light" : "dark"}`
+                );
+              }}
+            >
+              <navbarLogo.theme.Svg role="img" />
+            </li>
           </ul>
         </nav>
       </section>
diff --git a/src/theme/Navbar/styles.module.css b/src/theme/Navbar/styles.module.css
index c6967acbc..3d76c66bc 100644
--- a/src/theme/Navbar/styles.module.css
+++ b/src/theme/Navbar/styles.module.css
@@ -265,3 +265,10 @@
 .navbar_contri_designs {
   border-top: 1px solid white;
 }
+
+.navbar_theme_button {
+  cursor: pointer;
+  width: 2rem;
+  padding: 1rem 0 1rem 1rem;
+  filter: brightness(0) invert(1);
+}
\ No newline at end of file
diff --git a/static/img/theme.svg b/static/img/theme.svg
new file mode 100644
index 000000000..2a67bb1f7
--- /dev/null
+++ b/static/img/theme.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 64V448C362 448 448 362 448 256C448 149.1 362 64 256 64z"/></svg>
\ No newline at end of file