Update to dark mode

src/css/darkModeToggle.css

@@ -5,24 +5,42 @@
   width: 50px !important;
   height: 50px !important;
   padding: 8px !important;
-  border: 1px solid #bbbbbb !important;
+  border: 2px solid #bbbbbb !important; /* Slightly thicker border for better visibility */
   border-radius: 50% !important;
-  background: #55868c !important;
-  color: #ffffff !important;
+  background: #58a054 !important; /* Default green background */
+  color: #ffffff !important; /* White text/icon */
   cursor: pointer !important;
   position: fixed !important;
   bottom: 20px !important;
   left: 20px !important;
   z-index: 9999 !important;
+  transition: background-color 0.3s ease, border-color 0.3s ease,
+    transform 0.2s ease !important; /* Added transform for interaction */
+}
+
+.dark-mode-toggle:hover {
+  background: #488544 !important; /* Darker green on hover */
+  border-color: #ffffff !important; /* White border on hover */
+  transform: scale(1.1) !important; /* Slightly enlarge on hover */
+}
+
+.dark-mode-toggle:active {
+  background: #38703c !important; /* Even darker green on active click */
+  border-color: #ffffff !important; /* Keep border white on click */
+  transform: scale(0.95) !important; /* Slightly shrink on click */
 }
 
 .dark-mode .dark-mode-toggle {
   border-color: var(--dark-mode-border) !important;
+  background: var(
+    --dark-mode-hover
+  ) !important; /* Match dark mode hover background */
   color: var(--dark-mode-text) !important;
 }
 
 .dark-mode-toggle svg {
   width: 24px !important;
   height: 24px !important;
   margin: 0 !important;
+  fill: currentColor !important; /* Ensures the icon matches the text color */
 }

src/css/flaggerToggle.css

@@ -6,7 +6,6 @@
   padding: 11px 8px !important;
   border: 1px solid #bbbbbb !important;
   border-radius: 40px !important;
-  background: transparent !important;
   color: #707070 !important;
   white-space: nowrap !important;
 }
@@ -19,7 +18,6 @@
   padding: 11px 8px !important;
   border: 1px solid #bbbbbb !important;
   border-radius: 5px !important;
-  background: transparent !important;
   color: #707070 !important;
   white-space: nowrap !important;
 }

src/css/style.css

@@ -12,210 +12,90 @@
   --dark-mode-button-text: #d0d0d0 !important;
 }
 
-body {
-  transition: background-color 0.3s ease, color 0.3s ease !important;
-}
-
-body.dark-mode,
-.dark-mode body {
-  background-color: var(--color-background-base) !important;
-  color: var(--color-text-primary) !important;
-}
-
-html.dark-mode,
-.dark-mode html {
-  background-color: var(--color-background-base) !important;
+body.dark-mode {
+  background-color: var(--dark-mode-bg) !important;
+  color: var(--dark-mode-text) !important;
 }
 
-.dark-mode * {
-  background-color: transparent !important;
+html.dark-mode {
+  background-color: var(--dark-mode-bg) !important;
 }
 
 .dark-mode {
-  --color-text-primary: #ffffff !important;
-  --color-text-secondary: #cccccc !important;
-  --color-text-muted: #999999 !important;
-
   --color-background-base: #121212 !important;
   --color-background-secondary: #1a1a1a !important;
   --color-background-highlight: #252525 !important;
-}
-
-.dark-mode body,
-.dark-mode * {
-  color: var(--color-text-primary) !important;
-}
-
-.dark-mode p,
-.dark-mode li,
-.dark-mode span,
-.dark-mode a {
-  color: var(--color-text-secondary) !important;
-}
-
-.dark-mode a {
-  text-decoration: none;
-  color: var(--color-link) !important;
-}
-
-.dark-mode a:hover {
-  color: var(--color-link-hover) !important;
-}
-
-.dark-mode .muted-text,
-.dark-mode .low-contrast-text {
-  color: var(--color-text-muted) !important;
-}
-
-.dark-mode button {
-  color: var(--color-button-text) !important;
-}
-
-.dark-mode h1,
-.dark-mode h2,
-.dark-mode h3,
-.dark-mode h4,
-.dark-mode h5,
-.dark-mode h6 {
-  color: var(--color-text-primary) !important;
-  font-weight: bold;
-}
-
-.dark-mode {
-  --color-background-base: #121212 !important;
-  --color-background-secondary: #1e1e1e !important;
-  --color-background-highlight: #252525 !important;
-  --color-background-base-0: #121212 !important;
-  --color-background-neutral-0: #181818 !important;
-  --color-background-neutral-1: #1f1f1f !important;
-  --color-background-neutral-2: #252525 !important;
-  --color-background-neutral-3: #2c2c2c !important;
-  --color-background-neutral-4: #333333 !important;
-  --color-background-neutral-5: #3b3b3b !important;
-  --color-background-neutral-6: #444444 !important;
-  --color-background-neutral-7: #4d4d4d !important;
-  --color-background-neutral-8: #555555 !important;
-  --color-background-neutral-9: #666666 !important;
-  --color-background-neutral-10: #777777 !important;
-  --color-text-neutral-0: #e0e0e0 !important;
-  --color-text-neutral-1: #d4d4d4 !important;
-  --color-text-neutral-2: #c8c8c8 !important;
-  --color-text-neutral-3: #bcbcbc !important;
-  --color-text-neutral-4: #b0b0b0 !important;
-  --color-text-neutral-5: #a4a4a4 !important;
-  --color-text-neutral-6: #989898 !important;
-  --color-text-neutral-7: #8c8c8c !important;
-  --color-text-neutral-8: #808080 !important;
-  --color-text-neutral-9: #747474 !important;
-  --color-text-neutral-10: #686868 !important;
-  --color-border-neutral-1: #2c2c2c !important;
-  --color-border-neutral-2: #3c3c3c !important;
-  --color-border-neutral-3: #4c4c4c !important;
-  --color-border-neutral-4: #5c5c5c !important;
-  --color-border-neutral-5: #6c6c6c !important;
-  --color-border-neutral-6: #7c7c7c !important;
-  --color-border-neutral-7: #8c8c8c !important;
-
   --color-text-primary: #ffffff !important;
-  --color-text-secondary: #e2e2e2 !important;
-  --color-text-highlight: #ffcc00 !important;
-
-  --color-border-primary: #3a3a3a !important;
-  --color-border-highlight: #ffcc00 !important;
-
-  --color-link: #dddddd !important;
-  --color-link-hover: #a7a7a7 !important;
-
-  --color-button-background: #3a3a3a !important;
-  --color-button-text: #ffffff !important;
-  --color-button-hover: #555555 !important;
-
+  --color-text-secondary: #cccccc !important;
   --color-card-background: #1f1f1f !important;
-  --color-card-border: #333333 !important;
-  --color-card-text: #e0e0e0 !important;
+  --color-border-primary: #404040 !important;
 }
 
-body.dark-mode {
-  background-color: var(--color-background-base) !important;
+.dark-mode .card {
+  background-color: var(--color-card-background) !important;
   color: var(--color-text-primary) !important;
+  border: 1px solid var(--color-border-primary) !important;
 }
 
-a {
-  color: var(--color-link) !important;
-}
-
-a:hover {
-  color: var(--color-link-hover) !important;
-}
-
-button {
-  background-color: var(--color-button-background) !important;
-  color: var(--color-button-text) !important;
-  /* border: 1px solid var(--color-border-primary) !important; */
-}
-
-button:hover {
-  background-color: var(--color-button-hover) !important;
+.dark-mode .button {
+  background-color: var(--color-background-secondary) !important;
+  color: var(--dark-mode-button-text) !important;
+  border: 1px solid var(--color-border-primary) !important;
 }
 
-.card {
-  background-color: var(--color-background-base) !important;
-  color: var(--color-card-text) !important;
+.dark-mode .filters-form,
+.dark-mode .filter-indicator,
+.dark-mode .sidebar {
+  background-color: var(--color-background-secondary) !important;
+  color: var(--color-text-primary) !important;
+  border: 1px solid var(--color-border-primary) !important;
 }
 
-header {
+.dark-mode .sku-info-bar,
+.dark-mode .remain-sticky {
   background-color: var(--color-background-highlight) !important;
   color: var(--color-text-primary) !important;
 }
 
-.tooltip {
-  background-color: var(--color-background-secondary) !important;
+.dark-mode .timeline-short-video-content {
+  background-color: var(--color-background-base) !important;
   color: var(--color-text-secondary) !important;
-  border: 1px solid var(--color-border-primary) !important;
 }
 
-.modal {
-  background-color: var(--color-card-background) !important;
-  color: var(--color-card-text) !important;
-  border: 1px solid var(--color-border-highlight) !important;
+.dark-mode .sponsored-label {
+  background-color: var(--dark-mode-sponsored) !important;
+  color: var(--dark-mode-sponsored-text) !important;
+}
+
+.dark-mode .lowest-price-store-highlight {
+  border: 3px solid #58a054 !important;
+  box-shadow: 0px 2px 4px #ffffff !important;
 }
 
-.dark-mode .notification-popup,
-.dark-mode .rc-icon-btn,
-.dark-mode .filters-form,
-.dark-mode .filter-indicator,
-.dark-mode .slider-wrapper,
-.dark-mode .histogram,
 .dark-mode .sku-info-bar,
+.dark-mode .top-filter-dropdown,
+.dark-mode .size-selection-modal,
+.dark-mode .js-order-options,
 .dark-mode .sku-card-favorite,
+.dark-mode .sku-reviews-order,
 .dark-mode .slider-btn,
 .dark-mode .suggestions-list-wrapper,
+.dark-mode .subcat-nav-sublist,
 .dark-mode .bottom-drawer-content,
 .dark-mode .notification,
-.dark-mode .remain-sticky {
+.dark-mode .remain-sticky,
+.dark-mode .country-picker-form,
+.dark-mode .modal-container-content,
+.dark-mode .js-order-options,
+.dark-mode .desktop-order-options {
   background-color: var(--color-background-base) !important;
   color: var(--color-text-primary) !important;
   border-bottom: 1px solid var(--color-border-primary) !important;
 }
 
-.dark-mode .info-label-positive {
-  background-color: #2c632a !important;
-}
-
-.dark-mode .info-label-negative {
-  background-color: #c93633 !important;
-}
-
-.dark-mode .lowest-price-store-highlight {
-  border: 3px solid #58a054 !important;
-  box-shadow: 1px 1px 0 #ffffff !important;
-  box-shadow: 0px 2px 4px #ffffff !important;
-}
-
-.dark-mode .sponsored-label,
-.dark-mode .flagged-list-title,
-.dark-mode .label-text {
-  background-color: #ff3048 !important;
+.dark-mode * {
+  background-color: inherit var(--color-background-base) !important;
+  color: var(--color-text-primary) !important;
 }
 
 /*************************************************************************************************************/

src/handlers/darkModeHandler.ts

@@ -43,6 +43,14 @@ export class DarkModeHandler {
 
     button.addEventListener("click", () => this.toggleDarkMode());
 
+    // Add hover event listeners
+    button.addEventListener("mouseover", () =>
+      document.body.classList.add("dark-mode-hover")
+    );
+    button.addEventListener("mouseout", () =>
+      document.body.classList.remove("dark-mode-hover")
+    );
+
     colFlex.appendChild(button);
 
     return colFlex;