☰

Walmart.com - Dark Mode

Dark mode for Walmart.com

  1. /* ==UserStyle==
  2. @name         Walmart.com - Dark Mode
  3. @version      20241114.16.31
  4. @namespace    typpi.online
  5. @description  Dark mode for Walmart.com
  6. @homepageURL  https://github.com/Nick2bad4u/UserStyles
  7. @author       Nick2bad4u
  8. @license      UnLicense
  9. @supportURL   https://github.com/Nick2bad4u/UserStyles/issues
  10.  
  11. @var color base-border "Base Border" #333333
  12. @var color base-background "Base Background" #111111
  13. @var color base-text "Base Text" #dddddd
  14. @var color link-color "Link Color" #1e90ff
  15. @var color button-border "Button Border" #444444
  16. @var color button-background "Button Background" #222222
  17. @var color button-hover-border "Button Hover Border" #555555
  18. @var color button-hover-background "Button Hover Background" #333333
  19. @var color price-color "Price Color" #ffcc00
  20. @var color notification-background "Notification Background" #444444
  21. @var color notification-text "Notification Text" #ffcc00
  22. ==/UserStyle== */
  23.  
  24. @-moz-document domain("walmart.com") {
  25. 	:root {
  26. 		--base-border: var(base-border);
  27. 		--base-background: var(base-background);
  28. 		--base-text: var(base-text);
  29. 		--link-color: var(link-color);
  30. 		--button-border: var(button-border);
  31. 		--button-background: var(button-background);
  32. 		--button-hover-border: var(button-hover-border);
  33. 		--button-hover-background: var(button-hover-background);
  34. 		--price-color: var(price-color);
  35. 		--notification-background: var(notification-background);
  36. 		--notification-text: var(notification-text);
  37. 	}
  38.  
  39. 	/* Base styles */
  40. 	*:not(img, svg, iframe, a, i, span.mr2, span.mh2, p) {
  41. 		border-color: var(--base-border) !important;
  42. 		background-color: var(--base-background) !important;
  43. 		color: var(--base-text) !important;
  44. 	}
  45.  
  46. 	a {
  47. 		color: var(--link-color) !important;
  48. 	}
  49.  
  50. 	/* Media elements */
  51. 	img,
  52. 	video {
  53. 		filter: brightness(1) !important;
  54. 	}
  55.  
  56. 	/* Buttons and Input Fields */
  57. 	button,
  58. 	input,
  59. 	select,
  60. 	textarea,
  61. 	div > div.z-2.relative.mt2.w-60 > div > a {
  62. 		border-color: var(--button-border) !important;
  63. 		background-color: var(--button-background) !important;
  64. 		color: var(--base-text) !important;
  65. 	}
  66.  
  67. 	button:hover,
  68. 	input:focus,
  69. 	select:focus,
  70. 	textarea:focus {
  71. 		border-color: var(--button-hover-border) !important;
  72. 		background-color: var(
  73. 			--button-hover-background
  74. 		) !important;
  75. 	}
  76.  
  77. 	/* Header, Navbar, and Footer */
  78. 	header,
  79. 	.header,
  80. 	.footer,
  81. 	nav,
  82. 	.navbar {
  83. 		background-color: var(--base-background) !important;
  84. 		color: var(--base-text) !important;
  85. 	}
  86.  
  87. 	header a,
  88. 	.header a,
  89. 	.footer a,
  90. 	nav a,
  91. 	.navbar a {
  92. 		color: var(--link-color) !important;
  93. 	}
  94.  
  95. 	/* Product Listings */
  96. 	.product,
  97. 	.product-card,
  98. 	.product-list-item {
  99. 		border-color: var(--base-border) !important;
  100. 		background-color: var(--button-background) !important;
  101. 		color: var(--base-text) !important;
  102. 	}
  103.  
  104. 	.product-card .price,
  105. 	.product-list-item .price {
  106. 		color: var(--price-color) !important;
  107. 	}
  108.  
  109. 	/* Category and Sidebar Menus */
  110. 	.sidebar,
  111. 	.category-menu,
  112. 	.filter-menu {
  113. 		border-color: var(--base-border) !important;
  114. 		background-color: var(--base-background) !important;
  115. 		color: var(--base-text) !important;
  116. 	}
  117.  
  118. 	.sidebar a,
  119. 	.category-menu a,
  120. 	.filter-menu a {
  121. 		color: var(--link-color) !important;
  122. 	}
  123.  
  124. 	/* Shopping Cart and Checkout */
  125. 	.cart,
  126. 	.checkout,
  127. 	.order-summary,
  128. 	.cart-item {
  129. 		border-color: var(--base-border) !important;
  130. 		background-color: var(--button-background) !important;
  131. 		color: var(--base-text) !important;
  132. 	}
  133.  
  134. 	.cart .price,
  135. 	.checkout .price,
  136. 	.order-summary .price {
  137. 		color: var(--price-color) !important;
  138. 	}
  139.  
  140. 	/* Forms and Popups */
  141. 	.modal,
  142. 	.popup,
  143. 	.form-container {
  144. 		border-color: var(--base-border) !important;
  145. 		background-color: var(--base-background) !important;
  146. 		color: var(--base-text) !important;
  147. 	}
  148.  
  149. 	.modal button,
  150. 	.popup button,
  151. 	.form-container button {
  152. 		background-color: var(--button-background) !important;
  153. 		color: var(--base-text) !important;
  154. 	}
  155.  
  156. 	/* Specific UI Adjustments */
  157. 	.breadcrumb,
  158. 	.pagination,
  159. 	.page-navigation {
  160. 		border-color: var(--base-border) !important;
  161. 		background-color: var(--button-background) !important;
  162. 		color: var(--base-text) !important;
  163. 	}
  164.  
  165. 	.breadcrumb a,
  166. 	.pagination a,
  167. 	.page-navigation a {
  168. 		color: var(--link-color) !important;
  169. 	}
  170.  
  171. 	.notification,
  172. 	.alert,
  173. 	.badge {
  174. 		background-color: var(
  175. 			--notification-background
  176. 		) !important;
  177. 		color: var(--notification-text) !important;
  178. 	}
  179.  
  180. 	/* Tooltip */
  181. 	.tooltip {
  182. 		border-color: var(--button-hover-border) !important;
  183. 		background-color: var(
  184. 			--button-hover-background
  185. 		) !important;
  186. 		color: var(--base-text) !important;
  187. 	}
  188. }