WIP: add dark theme btn

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>

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);
+}