Merge pull request #148 from Surajit0573/light-dark

Closes Issue #132
swarnade · Feb 1, 2024 · 2845fdf · 2845fdf
2 parents 743645d + 4331782
commit 2845fdf
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 27 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,43 @@
+function getUserPreference() {
+    return localStorage.getItem('theme');
+  }
+  function saveUserPreference(userPreference) {
+    localStorage.setItem('theme', userPreference);
+  }
+
+  function getAppliedMode(userPreference) {
+    if (userPreference === 'light') {
+      return 'light';
+    }
+    if (userPreference === 'dark') {
+      return 'dark';
+    }
+  }
+
+  function setAppliedMode(mode) {
+    document.documentElement.dataset.appliedMode = mode;
+  }
+
+  function rotatePreferences(userPreference) {
+    if (userPreference === 'light') {
+      return 'dark';
+    }
+    if (userPreference === 'dark') {
+      return 'light';
+    }
+  }
+
+  const themeDisplay = document.getElementById('mode');
+  const themeToggler = document.getElementById('color_mode');
+
+  let userPreference = getUserPreference();
+  setAppliedMode(getAppliedMode(userPreference));
+  themeDisplay.innerText = userPreference;
+
+  themeToggler.onclick = () => {
+    const newUserPref = rotatePreferences(userPreference);
+    userPreference = newUserPref;
+    saveUserPreference(newUserPref);
+    themeDisplay.innerText = newUserPref;
+    setAppliedMode(getAppliedMode(newUserPref));
+  }
diff --git a/css/main.css b/css/main.css
@@ -1,11 +1,27 @@
 @import url("https://fonts.googleapis.com/css2?family=Audiowide&family=Mansalva&display=swap");
 
-body {
-  background-color: black;
+:root[data-applied-mode="light"] {
+  color-scheme: light;
+  --border: black;
+  --background: white;
+  --main-bg:rgb(255, 255, 255);
+}
+:root[data-applied-mode="dark"] {
+  color-scheme: dark;
+  --border: white;
+  --background: black;
+  --main-bg:rgb(24, 22, 33);
+}
+
+#button-div{
+  background-color: var(--main-bg);
+}
+.box-main{
+  background-color:rgb(24, 22, 33) ;
 }
 
 .box-main {
-  border: 3px solid white;
+  border: 3px solid var(--border);
   text-align: center;
   height: 200px;
   justify-content: center;
@@ -34,6 +50,15 @@ body {
   background-color: wheat;
   color: black;
 }
+ul{
+justify-content: center;
+align-items: center;
+}
+#toggle{
+margin-top: -20px;
+margin-left: 10px;
+height: 1rem;
+}
 
 .card-title{
   display: none !important;

diff --git a/design_button/AftabShare.css b/design_button/AftabShare.css
@@ -1,19 +1,6 @@
-*,
-      :before,
-      :after {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
 
-      body {
-        height: 100vh;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
 
-      button {
+      .aftab {
         width: 270px;
         height: 60px;
         border: none;
@@ -24,7 +11,7 @@
         position: relative;
       }
 
-      button:before {
+      .aftab:before {
         content: "";
         position: absolute;
         width: 0;
@@ -35,7 +22,7 @@
         transition: width 1s ease-in-out;
       }
 
-      button:after {
+      .aftab:after {
         content: "";
         position: absolute;
         width: 0;
@@ -46,8 +33,8 @@
         transition: width 1s ease-in-out;
       }
 
-      button:hover:before,
-      button:hover:after {
+      .aftab:hover:before,
+      .aftab:hover:after {
         width: 100%;
       }
 
@@ -82,6 +69,6 @@
         transform: rotateY(180deg);
       }
 
-      button:hover .card {
+      .aftab:hover .card {
         transform: rotateY(180deg);
       }
diff --git a/index.html b/index.html
@@ -123,7 +123,7 @@
   </div>
   <nav class="navbar fixed-top navbar-expand-lg" data-bs-theme="dark" data-aos="fade-down">
 
-    <div class="container-fluid">
+    <div class="container-fluid" id="navbar">
       <a class="navbar-brand" href="#">Web Button Designs</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
         aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -143,6 +143,14 @@
           <li class="nav-item">
             <a class="nav-link" href="feedback.html">Feedback</a>
           </li>
+          <li class="nav-item" id="toggle">
+            <span id="mode" style="display: none;">system</span>
+            <label class="switch btn-color-mode-switch">
+              <input type="checkbox" name="color_mode" id="color_mode" value="1">
+              <label for="color_mode" data-on="Dark" data-off="Light" class="btn-color-mode-switch-inner"></label>
+            </label>
+            <i class="fa fa-moon-o" aria-hidden="true"></i>
+          </li>
           <li class="nav-item">
             <div class="search nav-link">
               <div class="input">
@@ -1261,8 +1269,8 @@ <h1 class="card-title">toggle green click</h1>
         <!-- Aftab -->
         <div class="col-12 col-md-3 main-row">
           <div class="box-main">
-            <h1 class="card-title">Social Media Share</h1>
-            <button>
+            <h1 class="card-title">Social Media Share hover</h1>
+            <button class="aftab">
               <div class="letters">
                 <div class="card">
                   <div class="card_face front">S</div>
@@ -1439,6 +1447,8 @@ <h1 class="card-title">Social Media Share</h1>
       </div>
     </div>
   </section>
+  </div>
+
 
   <footer class="footer">
     <div class="waves">
@@ -1474,8 +1484,7 @@ <h1 class="card-title">Social Media Share</h1>
 
   <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
   <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
-
-
+   <script src="./app.js"></script>
   <script>
     function filterCards() {
       var input, filter, cards, card, title, i, txtValue;