☰

UPS.com - Dark Mode

UPS.com - Dark Mode!

  1. /* ==UserStyle==
  2. @name         UPS.com - Dark Mode
  3. @version      20241114.23.52
  4. @namespace    typpi.online
  5. @description  UPS.com - Dark Mode!
  6. @homepageURL  https://github.com/Nick2bad4u/UserStyles
  7. @author       Nick2bad4u
  8. @license      UnLicense
  9. ==/UserStyle== */
  10.  
  11. @-moz-document domain("ups.com") {
  12. 	/* Base dark mode filter */
  13. 	html {
  14. 		filter: invert(1) hue-rotate(180deg) !important;
  15. 	}
  16.  
  17. 	/* Specific elements to exclude from inversion */
  18. 	:is(
  19. 		img,
  20. 		svg,
  21. 		video,
  22. 		iframe,
  23. 		[class*='footer'],
  24. 		[id*='footer'],
  25. 		.logo,
  26. 		.button,
  27. 		.btn,
  28. 		.input,
  29. 		.textarea,
  30. 		.card,
  31. 		.panel,
  32. 		.table,
  33. 		.modal,
  34. 		#ups-header_logo > img,
  35. 		#ups-navContainer
  36. 			> header
  37. 			> div.ups-container.navbar-expand-lg
  38. 			> div.ups-user-actions.dropdown
  39. 			> a.ups-cta.ups-cta-primary.d-none.d-md-block.ups-analytics
  40. 			> span,
  41. 		#ups-main
  42. 			> div
  43. 			> div
  44. 			> div
  45. 			> div.social.row
  46. 			> ul
  47. 			> li:nth-child(2)
  48. 			> button
  49. 			> span.ups-socialicon.ups-socialicon_facebook,
  50. 		#ups-main
  51. 			> div
  52. 			> div
  53. 			> div
  54. 			> div.social.row
  55. 			> ul
  56. 			> li:nth-child(1)
  57. 			> button
  58. 			> span.ups-socialicon.ups-socialicon_google,
  59. 		.brown.arc-container.apps-container.section,
  60. 		#tabs_0_tabContent_0
  61. 			> div
  62. 			> div
  63. 			> div
  64. 			> div
  65. 			> div.package-tracker,
  66. 		#tracking-numbers
  67. 	) {
  68. 		filter: invert(1) hue-rotate(180deg) !important;
  69. 	}
  70.  
  71. 	/* Additional styling for better dark mode experience */
  72. 	a,
  73. 	li:nth-child(n)
  74. 		> a
  75. 		> span.icon.ups-icon-link_newwindow,
  76. 	#sublist-connect-with-us-3
  77. 		> li:nth-child(n)
  78. 		> a
  79. 		> span.icon.icon-new-window
  80. 		> svg,
  81. 	#sublist-ups-companies-2
  82. 		> li:nth-child(n)
  83. 		> a
  84. 		> span
  85. 		> svg
  86. 		> use,
  87. 	#sublist-ups-sites-1
  88. 		> li:nth-child(n)
  89. 		> a
  90. 		> span
  91. 		> svg,
  92. 	#sublist-this-site-0
  93. 		> li:nth-child(n)
  94. 		> a
  95. 		> span
  96. 		> svg,
  97. 	#sublist-connect-with-us-3
  98. 		> li:nth-child(n)
  99. 		> a
  100. 		> span.icon.icon-facebook
  101. 		> svg
  102. 		> use,
  103. 	#sublist-connect-with-us-3
  104. 		> li:nth-child(2)
  105. 		> a
  106. 		> span.icon.icon-x
  107. 		> svg
  108. 		> use,
  109. 	#sublist-connect-with-us-3
  110. 		> li:nth-child(3)
  111. 		> a
  112. 		> span.icon.icon-instagram
  113. 		> svg
  114. 		> use,
  115. 	#sublist-connect-with-us-3
  116. 		> li:nth-child(4)
  117. 		> a
  118. 		> span.icon.icon-linkedin
  119. 		> svg
  120. 		> use,
  121. 	#sublist-connect-with-us-3
  122. 		> li:nth-child(5)
  123. 		> a
  124. 		> span.icon.icon-youtube
  125. 		> svg,
  126. 	#tabs_0_tabContent_0
  127. 		> div
  128. 		> div
  129. 		> div
  130. 		> div
  131. 		> div.track-form-wrapper
  132. 		> form
  133. 		> button.toggle-help
  134. 		> span
  135. 		> svg
  136. 		> use {
  137. 		color: #000 !important;
  138. 	}
  139.  
  140. 	a > span.icon.ups-icon-link_newwindow,
  141. 	#ups-footer_legalLinks > li:nth-child(n) > a,
  142. 	#ups-footer_connectLinks
  143. 		> li:nth-child(n)
  144. 		> a
  145. 		> span.icon.ups-icon-link_newwindow,
  146. 	#sublist-legal-0 > li:nth-child(n) > a,
  147. 	#sublist-ups-companies-2 > li:nth-child(n) > a,
  148. 	#sublist-ups-sites-1 > li:nth-child(n) > a,
  149. 	#sublist-this-site-0 > li:nth-child(n) > a,
  150. 	#sublist-connect-with-us-3
  151. 		> li:nth-child(n)
  152. 		> a,
  153. 	#tabs_0_tab_2 > h2,
  154. 	#tabs_0_tab_3 > h2,
  155. 	#tabs_0_tabContent_0
  156. 		> div
  157. 		> div
  158. 		> div
  159. 		> div
  160. 		> div.track-form-wrapper
  161. 		> div.help-content
  162. 		> p
  163. 		> a,
  164. 	#ups-footer_connectLinks > li:nth-child(n) > a {
  165. 		color: #fff !important;
  166. 	}
  167.  
  168. 	.button,
  169. 	.btn {
  170. 		border: none !important;
  171. 		background-color: #662f10 !important;
  172. 		color: #f8f8f2 !important;
  173. 	}
  174.  
  175. 	.button:hover,
  176. 	.btn:hover {
  177. 		color: #50fa7b !important;
  178. 	}
  179.  
  180. 	.input,
  181. 	.textarea {
  182. 		border: 1px solid #6272a4 !important;
  183. 		background-color: #44475a !important;
  184. 		color: #f8f8f2 !important;
  185. 	}
  186.  
  187. 	.input:focus,
  188. 	.textarea:focus {
  189. 		border-color: #50fa7b !important;
  190. 	}
  191.  
  192. 	.card,
  193. 	.panel {
  194. 		border: 1px solid #6272a4 !important;
  195. 		background-color: #44475a !important;
  196. 		color: #f8f8f2 !important;
  197. 	}
  198.  
  199. 	.table {
  200. 		background-color: #44475a !important;
  201. 		color: #f8f8f2 !important;
  202. 	}
  203.  
  204. 	.table th,
  205. 	.table td {
  206. 		border: 1px solid #6272a4 !important;
  207. 	}
  208.  
  209. 	.modal {
  210. 		background-color: #282a36 !important;
  211. 		color: #f8f8f2 !important;
  212. 	}
  213. }