Merge pull request #91 from Valik3201/feat/darkMode-updates

Valik3201 · Jan 5, 2024 · 8ae47b9 · 8ae47b9
2 parents a713bf8 + 98b9e7d
commit 8ae47b9
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 18 deletions.
diff --git a/src/partials/authorization/auth.html b/src/partials/authorization/auth.html
@@ -68,7 +68,9 @@
           <button type="submit" id="sign-up" class="sign-button-form">SIGN UP</button>
         </div>
         <div class="modal-buttons">
-          <button type="button" data-switch="sign-up" class="buttons-style">SIGN UP</button>
+          <button type="button" data-switch="sign-up" class="buttons-style button-sign-up">
+            SIGN UP
+          </button>
           <button type="button" data-switch="sign-in" class="buttons-style">SIGN IN</button>
         </div>
       </form>
@@ -108,7 +110,9 @@
           <button type="submit" id="sign-in" class="sign-button-form">SIGN IN</button>
         </div>
         <div class="modal-buttons">
-          <button type="button" data-switch="sign-up" class="buttons-style">SIGN UP</button>
+          <button type="button" data-switch="sign-up" class="buttons-style button-sign-up">
+            SIGN UP
+          </button>
           <button type="button" data-switch="sign-in" class="buttons-style">SIGN IN</button>
         </div>
       </form>

diff --git a/src/partials/home/home-header.html b/src/partials/home/home-header.html
@@ -52,8 +52,8 @@
         <p>Bookshelf</p>
       </a>
       <div class="switch-button-div-mobile">
-        <label class="switch">
-          <input type="checkbox" />
+        <label for="t-switch" class="switch">
+        <input type="checkbox" class="theme-switch" id="t-switch" checked />
           <span class="slider"></span>
         </label>
         <button class="close-button">
@@ -89,8 +89,8 @@
         <p>Bookshelf</p>
       </a>
       <div class="switch-button-div-mobile">
-        <label class="switch">
-          <input type="checkbox" />
+        <label for="t-switch" class="switch">
+        <input type="checkbox" class="theme-switch" id="t-switch" checked />
           <span class="slider"></span>
         </label>
         <button class="close-button">

diff --git a/src/partials/shopping-list/shopping-list-header.html b/src/partials/shopping-list/shopping-list-header.html
@@ -25,8 +25,8 @@
 
     <!--dark mode swicher-->
     <div class="switch-button-div">
-      <label class="switch">
-        <input type="checkbox" />
+      <label for="t-switch" class="switch">
+        <input type="checkbox" class="theme-switch" id="t-switch" checked />
         <span class="slider"></span>
       </label>
 
@@ -49,8 +49,8 @@
         <p>Bookshelf</p>
       </a>
       <div class="switch-button-div-mobile">
-        <label class="switch">
-          <input type="checkbox" />
+        <label for="t-switch" class="switch">
+          <input type="checkbox" class="theme-switch" id="t-switch" checked />
           <span class="slider"></span>
         </label>
         <button class="close-button">

diff --git a/src/style/css/style.css b/src/style/css/style.css
@@ -893,15 +893,55 @@ svg.logo-icon {
 /*DarkMode style*/
 [data-theme='dark'] {
   body {
-    background: #202024;
+    background-color: #202024;
+    transition: background-color 0.3s ease-in;
+  }
+
+  .form-field,
+  .inputs{
+    background-color: #202024;
+    border-color: #F6F6F6;
+    transition: background-color 0.3s ease-in;
+  }
+
+  .input-text{
+    color: #F6F6F6;
+    transition: color 0.3s ease-in;
+  }
+
+  .icon-mobile-position{
+    stroke: #F6F6F6;
+    fill:#202024;
+    transition: stroke 0.3s ease-in;
+  }
+
+  .sign-button-form{
+    background-color: #F6F6F6;
+    color:#202024;
+    transition: background-color 0.3s ease-in;
+  }
+
+  .button-sign-up{
+    color: #4f2ee8 !important;
+    transition: color 0.3s ease-in;
+  }
+
+  .log-out-button{
+    background-color: #202024;
+    color: #f6f6f6;
+    border-color: #F6F6F6;
+    transition: background-color 0.3s ease-in;
   }
 
   div.modal-pop-up {
     background-color: #202024;
+    transition: background-color 0.3s ease-in;
   }
 
-  .close-modal-button__icon {
+  .close-modal-button__icon,
+  .close-button-icon {
     stroke: #ffffff !important;
+    transition: stroke 0.3s ease-in;
   }
 
   .heading {
@@ -928,7 +968,8 @@ svg.logo-icon {
   .shopping-text,
   .book-title,
   .book-plot,
-  .book-message {
+  .book-message,
+  .logo-header {
     color: #ffffff;
     transition: color 0.3s ease-in;
   }
@@ -948,7 +989,8 @@ svg.logo-icon {
     transition: color 0.3s ease-in;
   }
 
-  header {
+  header,
+  .mobile-header-items {
     background: #111111;
     transition: color 0.3s ease-in;
   }
@@ -1029,10 +1071,6 @@ svg.logo-icon {
     color: #ffffff !important;
     transition: color 0.3s ease-in;
   }
-
-  .slider {
-    background: linear-gradient(to bottom, #4f2ee8, #686868);
-  }
 }
 /* DarkMode style end */