☰

Walmart.com - Dark Mode

Dark mode for Walmart.com

目前为 2025-01-21 提交的版本，查看 最新版本。

  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(
  33. 			button-hover-border
  34. 		);
  35. 		--button-hover-background: var(
  36. 			button-hover-background
  37. 		);
  38. 		--price-color: var(price-color);
  39. 		--notification-background: var(
  40. 			notification-background
  41. 		);
  42. 		--notification-text: var(notification-text);
  43. 	}
  44.  
  45. 	/* Base styles */
  46. 	*:not(
  47. 			img,
  48. 			svg,
  49. 			iframe,
  50. 			a,
  51. 			i,
  52. 			span.mr2,
  53. 			span.mh2,
  54. 			p
  55. 		) {
  56. 		border-color: var(--base-border) !important;
  57. 		background-color: var(
  58. 			--base-background
  59. 		) !important;
  60. 		color: var(--base-text) !important;
  61. 	}
  62.  
  63. 	a {
  64. 		color: var(--link-color) !important;
  65. 	}
  66.  
  67. 	/* Media elements */
  68. 	img,
  69. 	video {
  70. 		filter: brightness(1) !important;
  71. 	}
  72.  
  73. 	/* Buttons and Input Fields */
  74. 	button,
  75. 	input,
  76. 	select,
  77. 	textarea,
  78. 	div > div.z-2.relative.mt2.w-60 > div > a {
  79. 		border-color: var(--button-border) !important;
  80. 		background-color: var(
  81. 			--button-background
  82. 		) !important;
  83. 		color: var(--base-text) !important;
  84. 	}
  85.  
  86. 	button:hover,
  87. 	input:focus,
  88. 	select:focus,
  89. 	textarea:focus {
  90. 		border-color: var(
  91. 			--button-hover-border
  92. 		) !important;
  93. 		background-color: var(
  94. 			--button-hover-background
  95. 		) !important;
  96. 	}
  97.  
  98. 	/* Header, Navbar, and Footer */
  99. 	header,
  100. 	.header,
  101. 	.footer,
  102. 	nav,
  103. 	.navbar {
  104. 		background-color: var(
  105. 			--base-background
  106. 		) !important;
  107. 		color: var(--base-text) !important;
  108. 	}
  109.  
  110. 	header a,
  111. 	.header a,
  112. 	.footer a,
  113. 	nav a,
  114. 	.navbar a {
  115. 		color: var(--link-color) !important;
  116. 	}
  117.  
  118. 	/* Product Listings */
  119. 	.product,
  120. 	.product-card,
  121. 	.product-list-item {
  122. 		border-color: var(--base-border) !important;
  123. 		background-color: var(
  124. 			--button-background
  125. 		) !important;
  126. 		color: var(--base-text) !important;
  127. 	}
  128.  
  129. 	.product-card .price,
  130. 	.product-list-item .price {
  131. 		color: var(--price-color) !important;
  132. 	}
  133.  
  134. 	/* Category and Sidebar Menus */
  135. 	.sidebar,
  136. 	.category-menu,
  137. 	.filter-menu {
  138. 		border-color: var(--base-border) !important;
  139. 		background-color: var(
  140. 			--base-background
  141. 		) !important;
  142. 		color: var(--base-text) !important;
  143. 	}
  144.  
  145. 	.sidebar a,
  146. 	.category-menu a,
  147. 	.filter-menu a {
  148. 		color: var(--link-color) !important;
  149. 	}
  150.  
  151. 	/* Shopping Cart and Checkout */
  152. 	.cart,
  153. 	.checkout,
  154. 	.order-summary,
  155. 	.cart-item {
  156. 		border-color: var(--base-border) !important;
  157. 		background-color: var(
  158. 			--button-background
  159. 		) !important;
  160. 		color: var(--base-text) !important;
  161. 	}
  162.  
  163. 	.cart .price,
  164. 	.checkout .price,
  165. 	.order-summary .price {
  166. 		color: var(--price-color) !important;
  167. 	}
  168.  
  169. 	/* Forms and Popups */
  170. 	.modal,
  171. 	.popup,
  172. 	.form-container {
  173. 		border-color: var(--base-border) !important;
  174. 		background-color: var(
  175. 			--base-background
  176. 		) !important;
  177. 		color: var(--base-text) !important;
  178. 	}
  179.  
  180. 	.modal button,
  181. 	.popup button,
  182. 	.form-container button {
  183. 		background-color: var(
  184. 			--button-background
  185. 		) !important;
  186. 		color: var(--base-text) !important;
  187. 	}
  188.  
  189. 	/* Specific UI Adjustments */
  190. 	.breadcrumb,
  191. 	.pagination,
  192. 	.page-navigation {
  193. 		border-color: var(--base-border) !important;
  194. 		background-color: var(
  195. 			--button-background
  196. 		) !important;
  197. 		color: var(--base-text) !important;
  198. 	}
  199.  
  200. 	.breadcrumb a,
  201. 	.pagination a,
  202. 	.page-navigation a {
  203. 		color: var(--link-color) !important;
  204. 	}
  205.  
  206. 	.notification,
  207. 	.alert,
  208. 	.badge {
  209. 		background-color: var(
  210. 			--notification-background
  211. 		) !important;
  212. 		color: var(--notification-text) !important;
  213. 	}
  214.  
  215. 	/* Tooltip */
  216. 	.tooltip {
  217. 		border-color: var(
  218. 			--button-hover-border
  219. 		) !important;
  220. 		background-color: var(
  221. 			--button-hover-background
  222. 		) !important;
  223. 		color: var(--base-text) !important;
  224. 	}
  225. }