added theme toggle button

beautifier · Jul 17, 2022 · e5dcd80 · e5dcd80
1 parent 203fc5e
commit e5dcd80
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -81,8 +81,14 @@ <h1 class="logo"><img alt="js-beautify" src="web/banner-light.svg" height="54px"
       </p>
     </div>
   </div>
-
   <div class="options">
+    <div id="theme-toggle-wrapper">
+      <label id="theme-toggle-label" for="theme-toggle-btn">
+        <input type="checkbox" id="theme-toggle-btn" style="display: none" />
+        <div id="theme-toggle-slider"></div>
+      </label>
+      <span>Enable Dark Mode</span>
+    </div>
     <h1>Options</h1>
     <select name="language" id="language">
       <option value="css">Beautify CSS</option>

diff --git a/web/common-function.js b/web/common-function.js
@@ -367,10 +367,26 @@ function changeToFileContent(input) {
 }
 
 function setPreferredColorScheme() {
+  var themeToggleBtn = document.querySelector('#theme-toggle-btn');
+  themeToggleBtn.addEventListener('change', switchTheme, false);
   var isPreferredColorSchemeDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
   if (isPreferredColorSchemeDark) {
+    themeToggleBtn.checked = true;
     $('.CodeMirror').addClass('cm-s-darcula');
     $('body').addClass('dark-mode');
     $('.logo').children('img').attr("src", "web/banner-dark.svg");
   }
 }
+
+function switchTheme(themeToggleEvent) {
+  if (themeToggleEvent.target.checked) {
+    $('.CodeMirror').addClass('cm-s-darcula');
+    $('body').addClass('dark-mode');
+    $('.logo').children('img').attr("src", "web/banner-dark.svg");
+  }
+  else {
+    $('.CodeMirror').removeClass('cm-s-darcula');
+    $('body').removeClass('dark-mode');
+    $('.logo').children('img').attr("src", "web/banner-light.svg");
+  }
+}
diff --git a/web/common-style.css b/web/common-style.css
@@ -188,4 +188,59 @@ select {
   background-color: #2e3037;
   color: #e8eaed;
   border: 1px solid #333333;
+}
+
+#theme-toggle-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin: 5px;
+}
+
+#theme-toggle-wrapper span {
+  margin-left: 10px;
+  font-size: 1rem;
+}
+
+#theme-toggle-label {
+  display: inline-block;
+  height: 20px;
+  position: relative;
+  width: 40px;
+}
+
+#theme-toggle-slider {
+  background-color: #ccc;
+  bottom: 0;
+  cursor: pointer;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: .4s;
+}
+
+#theme-toggle-slider:before {
+  background-color: #fff;
+  content: "";
+  height: 20px;
+  position: absolute;
+  transition: .4s;
+  width: 20px;
+}
+
+input:checked + #theme-toggle-slider {
+  background-color: #66bb6a;
+}
+
+input:checked + #theme-toggle-slider:before {
+  transform: translateX(20px);
+}
+
+#theme-toggle-slider {
+  border-radius: 20px;
+}
+
+#theme-toggle-slider:before {
+  border-radius: 50%;
 }