☰

UPS.com - Dark Mode

UPS.com - Dark Mode!

As of 20/11/2024. See the latest version.

/* ==UserStyle==
@name         UPS.com - Dark Mode
@version      20241114.23.52
@namespace    typpi.online
@description  UPS.com - Dark Mode!
@homepageURL  https://github.com/Nick2bad4u/UserStyles
@author       Nick2bad4u
@license      UnLicense
==/UserStyle== */

@-moz-document domain("ups.com") {
  /* Base dark mode filter */
  html {
    filter: invert(1) hue-rotate(180deg) !important;
  }

  /* Specific elements to exclude from inversion */
  :is(
      img,
      svg,
      video,
      iframe,
      [class*='footer'],
      [id*='footer'],
      .logo,
      .button,
      .btn,
      .input,
      .textarea,
      .card,
      .panel,
      .table,
      .modal,
      #ups-header_logo > img,
      #ups-navContainer
        > header
        > div.ups-container.navbar-expand-lg
        > div.ups-user-actions.dropdown
        > a.ups-cta.ups-cta-primary.d-none.d-md-block.ups-analytics
        > span,
      #ups-main
        > div
        > div
        > div
        > div.social.row
        > ul
        > li:nth-child(2)
        > button
        > span.ups-socialicon.ups-socialicon_facebook,
      #ups-main
        > div
        > div
        > div
        > div.social.row
        > ul
        > li:nth-child(1)
        > button
        > span.ups-socialicon.ups-socialicon_google,
      .brown.arc-container.apps-container.section,
      #tabs_0_tabContent_0 > div > div > div > div > div.package-tracker,
      #tracking-numbers
    ) {
    filter: invert(1) hue-rotate(180deg) !important;
  }

  /* Additional styling for better dark mode experience */
  a,
  li:nth-child(n) > a > span.icon.ups-icon-link_newwindow,
  #sublist-connect-with-us-3 > li:nth-child(n) > a > span.icon.icon-new-window > svg,
  #sublist-ups-companies-2 > li:nth-child(n) > a > span > svg > use,
  #sublist-ups-sites-1 > li:nth-child(n) > a > span > svg,
  #sublist-this-site-0 > li:nth-child(n) > a > span > svg,
  #sublist-connect-with-us-3 > li:nth-child(n) > a > span.icon.icon-facebook > svg > use,
  #sublist-connect-with-us-3 > li:nth-child(2) > a > span.icon.icon-x > svg > use,
  #sublist-connect-with-us-3 > li:nth-child(3) > a > span.icon.icon-instagram > svg > use,
  #sublist-connect-with-us-3 > li:nth-child(4) > a > span.icon.icon-linkedin > svg > use,
  #sublist-connect-with-us-3 > li:nth-child(5) > a > span.icon.icon-youtube > svg,
  #tabs_0_tabContent_0
    > div
    > div
    > div
    > div
    > div.track-form-wrapper
    > form
    > button.toggle-help
    > span
    > svg
    > use {
    color: #000 !important;
  }

  a > span.icon.ups-icon-link_newwindow,
  #ups-footer_legalLinks > li:nth-child(n) > a,
  #ups-footer_connectLinks > li:nth-child(n) > a > span.icon.ups-icon-link_newwindow,
  #sublist-legal-0 > li:nth-child(n) > a,
  #sublist-ups-companies-2 > li:nth-child(n) > a,
  #sublist-ups-sites-1 > li:nth-child(n) > a,
  #sublist-this-site-0 > li:nth-child(n) > a,
  #sublist-connect-with-us-3 > li:nth-child(n) > a,
  #tabs_0_tab_2 > h2,
  #tabs_0_tab_3 > h2,
  #tabs_0_tabContent_0 > div > div > div > div > div.track-form-wrapper > div.help-content > p > a,
  #ups-footer_connectLinks > li:nth-child(n) > a {
    color: #fff !important;
  }

  .button,
  .btn {
    background-color: #662f10 !important;
    color: #f8f8f2 !important;
    border: none !important;
  }

  .button:hover,
  .btn:hover {
    color: #50fa7b !important;
  }

  .input,
  .textarea {
    background-color: #44475a !important;
    color: #f8f8f2 !important;
    border: 1px solid #6272a4 !important;
  }

  .input:focus,
  .textarea:focus {
    border-color: #50fa7b !important;
  }

  .card,
  .panel {
    background-color: #44475a !important;
    color: #f8f8f2 !important;
    border: 1px solid #6272a4 !important;
  }

  .table {
    background-color: #44475a !important;
    color: #f8f8f2 !important;
  }

  .table th,
  .table td {
    border: 1px solid #6272a4 !important;
  }

  .modal {
    background-color: #282a36 !important;
    color: #f8f8f2 !important;
  }
}