Improved dark theme switcher & Navbar improvments

justchillinfren · justchillinfren · commit 6b1d1be31fcf · 2023-06-05T15:04:30.000Z
diff --git a/images/sun-regular.svg b/images/sun-regular.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M375.7 19.7c-1.5-8-6.9-14.7-14.4-17.8s-16.1-2.2-22.8 2.4L256 61.1 173.5 4.2c-6.7-4.6-15.3-5.5-22.8-2.4s-12.9 9.8-14.4 17.8l-18.1 98.5L19.7 136.3c-8 1.5-14.7 6.9-17.8 14.4s-2.2 16.1 2.4 22.8L61.1 256 4.2 338.5c-4.6 6.7-5.5 15.3-2.4 22.8s9.8 13 17.8 14.4l98.5 18.1 18.1 98.5c1.5 8 6.9 14.7 14.4 17.8s16.1 2.2 22.8-2.4L256 450.9l82.5 56.9c6.7 4.6 15.3 5.5 22.8 2.4s12.9-9.8 14.4-17.8l18.1-98.5 98.5-18.1c8-1.5 14.7-6.9 17.8-14.4s2.2-16.1-2.4-22.8L450.9 256l56.9-82.5c4.6-6.7 5.5-15.3 2.4-22.8s-9.8-12.9-17.8-14.4l-98.5-18.1L375.7 19.7zM269.6 110l65.6-45.2 14.4 78.3c1.8 9.8 9.5 17.5 19.3 19.3l78.3 14.4L402 242.4c-5.7 8.2-5.7 19 0 27.2l45.2 65.6-78.3 14.4c-9.8 1.8-17.5 9.5-19.3 19.3l-14.4 78.3L269.6 402c-8.2-5.7-19-5.7-27.2 0l-65.6 45.2-14.4-78.3c-1.8-9.8-9.5-17.5-19.3-19.3L64.8 335.2 110 269.6c5.7-8.2 5.7-19 0-27.2L64.8 176.8l78.3-14.4c9.8-1.8 17.5-9.5 19.3-19.3l14.4-78.3L242.4 110c8.2 5.7 19 5.7 27.2 0zM256 368a112 112 0 1 0 0-224 112 112 0 1 0 0 224zM192 256a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"/></svg>
diff --git a/index.html b/index.html
@@ -13,11 +13,13 @@
 </head>
 
 <div class="navbar">
-  <img src="images/icon.png" alt="Logo">
-  <a href="https://modrinth.com/mod/axolotlclient">Modrinth</a>
-  <a href="https://github.com/AxolotlClient/">GitHub</a>
-  <a href="https://discord.gg/9Q3brQVQZN">Discord</a>
-  <img src="images/moon-regular.svg" alt="" id="switcher">
+  <div class="navbar-left">
+    <img src="images/icon.png" alt="Logo">
+    <a href="https://modrinth.com/mod/axolotlclient">Modrinth</a>
+    <a href="https://github.com/AxolotlClient/">GitHub</a>
+    <a href="https://discord.gg/9Q3brQVQZN">Discord</a>
+  </div>
+  <div class="navbar-right"><img src="images/moon-regular.svg" alt="" id="switcher"></div>
 </div>
 
 <body>
diff --git a/script.js b/script.js
@@ -16,18 +16,24 @@ const rootElem = document.documentElement;
 
 const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)");
 if (darkThemeMq.matches) {
-    rootElem.setAttribute("data-theme", 'dark');
+  rootElem.setAttribute("data-theme", "dark");
+  document.getElementById("switcher").src = "images/sun-regular.svg";
 } else {
-    rootElem.setAttribute("data-theme", 'light');
+  rootElem.setAttribute("data-theme", "light");
+  document.getElementById("switcher").src = "images/moon-regular.svg";
 }
 
 const switchTheme = () => {
   let dataTheme = rootElem.getAttribute("data-theme"),
     newtheme;
-
-  newTheme = (dataTheme === "dark") ? "light" : "dark";
-
+  newTheme = dataTheme === "dark" ? "light" : "dark";
+  switchIcon = document.getElementById("switcher");
   rootElem.setAttribute("data-theme", newTheme);
+  if (dataTheme === "dark") {
+    switcher.src = "images/moon-regular.svg";
+  } else {
+    switcher.src = "images/sun-regular.svg";
+  }
 };
 
 document.querySelector("#switcher").addEventListener("click", switchTheme);
diff --git a/style.css b/style.css
@@ -31,6 +31,8 @@
   --scrollbar-thumb: #b0b0b0;
   --about-text: #2a2a2a;
   --about-muted: #808080;
+  --switcher-color: invert(6%) sepia(1%) saturate(751%) hue-rotate(314deg)
+    brightness(101%) contrast(71%);
 }
 
 :root {
@@ -202,8 +204,20 @@ body {
   margin-bottom: 10px;
 }
 
+.navbar-left,
+.navbar-right {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .navbar {
   transition: var(--default-transition);
+  justify-content: space-between;
+  display: flex;
+  align-items: center;
+  display: flex;
+  align-items: center;
   backdrop-filter: blur(5px);
   z-index: 1;
   overflow: hidden;
@@ -225,7 +239,7 @@ body {
 
 .navbar img {
   padding: 10px;
-  float: left;
+  height: 40px;
   width: 40px;
 }
 
@@ -235,10 +249,11 @@ body {
 }
 
 #switcher {
-  transition: .3s 5ms;
+  transition: 0.3s 5ms;
   filter: var(--switcher-color);
   float: right;
   width: 25px;
+  margin: 2px;
   cursor: pointer;
 }
 
