Merge pull request #60 from Valik3201/feat/darkMode-update

update darkMode styles
Valik3201 · Jan 2, 2024 · 05de03a · 05de03a
2 parents 4cc47ff + 6c503af
commit 05de03a
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "homepage": "https://github.com/Valik3201/bookshelf",
   "scripts": {
     "dev": "parcel src/*.html",
+    "start": "parcel src/*.html",
     "build": "parcel build src/*.html --public-url /bookshelf/"
   },
   "repository": {

diff --git a/src/favicon/favicon.html b/src/favicon/favicon.html
@@ -4,4 +4,5 @@
 <link rel="manifest" href="/src/favicon/site.webmanifest" />
 <link rel="mask-icon" href="/src/favicon/safari-pinned-tab.svg" color="#4f2ee8" />
 <meta name="msapplication-TileColor" content="#4f2ee8" />
-<meta name="theme-color" content="#4f2ee8" />
+<meta name="theme-color" media="(prefers-color-scheme: light)" content="4f2ee8" />
+<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#111" />
diff --git a/src/partials/shopping-list/shopping-list-header.html b/src/partials/shopping-list/shopping-list-header.html
@@ -13,8 +13,8 @@
         <li><a href="/src/index.html" class="nav-list__link">HOME</a></li>
         <li>
           <div class="nav-list__link--active nav-list__link">
-            <a href="./shopping-list.html" class="shopping-text"
-              >SHOPPING LIST<svg class="shopping-list-icon" width="20px" height="20px">
+            <a href="./shopping-list.html" class="shopping-text--active"
+              >SHOPPING LIST<svg class="shopping-list-icon--active" width="20px" height="20px">
                 <use href="/src/images/icons.svg#icon-shop"></use>
               </svg>
             </a>

diff --git a/src/style/css/style.css b/src/style/css/style.css
@@ -112,6 +112,16 @@
 .hidden {
   display: none;
 }
+.shopping-text--active {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  line-height: 18px;
+  font-size: 14px;
+  color: #000000;
+  transition: color 0.3s ease-in;
+}
 
 @media (min-width: 768px) and (max-width: 1023px) {
   .heading {
@@ -533,43 +543,94 @@ svg.logo-icon {
 /*header style end*/
 
 /*DarkMode style*/
-[data-theme='dark'] {
+[data-theme="dark"] {
   body {
     background: #202024;
   }
+
+  div.modal-pop-up {
+    background-color: #202024;
+  }
+
+  .close-modal-button__icon {
+    stroke: #FFFFFF !important;
+  }
+
+  .heading {
+    color: #FFFFFF !important;
+    transition: color 0.3s ease-in;
+  }
+
+  .book-card {
+    background-color: #111111 !important;
+  }
+
+  a.home-link {
+    color: #000000;
+    transition: color 0.3s ease-in;
+  }
+
+  .nav-list__link--active {
+    color: #000000;
+    fill: #000000;
+    transition: color 0.3s ease-in;
+  }
+
+  .nav-list__link,
+  .shopping-text,
+  .book-title,
+  .book-plot,
+  .book-message {
+    color: #FFFFFF;
+    transition: color 0.3s ease-in;
+  }
+
+  .shopping-list-icon{
+    fill: #FFFFFF;
+    transition: fill 0.3s ease-in;
+  }
+  .shopping-list-icon--active {
+    fill: #000000;
+    transition: fill 0.3s ease-in;
+  }
+
+
   .category-list__item.active,
   .category-list__item:hover {
-    color: #eac645;
+    color: #EAC645;
     transition: color 0.3s ease-in;
   }
+
   header {
     background: #111111;
     transition: color 0.3s ease-in;
   }
+
   .nav-item p {
-    color: #f3f3f3;
+    color: #F3F3F3;
     transition: color 0.3s ease-in;
   }
+
   .heading {
     color: #111;
     transition: color 0.3s ease-in;
   }
+
   .book-card {
     background: #202024;
     transition: color 0.3s ease-in;
   }
+
   .header-items {
     border: 1.5px solid #aaaaaa;
     transition: border 0.3s ease-in;
   }
-  .shopping-list-icon {
-    fill: #ffffff;
-    transition: fill 0.3s ease-in;
-  }
+
   svg.hamburger-icon {
     fill: #ffffff;
     stroke: rgb(255, 255, 255);
   }
+
   body,
   .books__book--title,
   .books__heading,
@@ -580,12 +641,12 @@ svg.logo-icon {
     color: #ffffff;
     transition: color 0.3s ease-in;
   }
+
   .see-more-btn {
     color: #ffffff !important;
     transition: color 0.3s ease-in;
   }
-  .slider {
-  }
+
   body,
   .books__book--title,
   .books__heading,
@@ -596,10 +657,32 @@ svg.logo-icon {
     color: #ffffff;
     transition: color 0.3s ease-in;
   }
+
   .see-more-btn {
     color: #ffffff !important;
     transition: color 0.3s ease-in;
   }
+
+  .slider {
+    background: linear-gradient(to bottom, #4f2ee8, #686868);
+  }
+
+  body,
+  .books__book--title,
+  .books__heading,
+  .shopping-list-link,
+  .category-list__item,
+  h1,
+  .sign-up-button {
+    color: #FFFFFF;
+    transition: color 0.3s ease-in;
+  }
+
+  .see-more-btn {
+    color: #FFFFFF !important;
+    transition: color 0.3s ease-in;
+  }
+
   .slider {
     background: linear-gradient(to bottom, #4f2ee8, #686868);
   }