☰

NYTimes.com – Dark Paywall Bypass [Ath]

Dark theme for New York Times (NYTimes.com). Includes paywall bypass and font configuration. No more unreadable text.

  1. /* ==UserStyle==
  2. @name           NYTimes.com – Dark Paywall Bypass [Ath]
  3. @namespace      athari
  4. @version        1.1.0
  5. @description    Dark theme for New York Times (NYTimes.com). Includes paywall bypass and font configuration. No more unreadable text.
  6. @author         Athari (https://github.com/Athari)
  7. @homepageURL    https://github.com/Athari/AthariUserCSS
  8. @supportURL     https://github.com/Athari/AthariUserCSS/issues
  9. @license        MIT
  10. @preprocessor   default
  11.  
  12. @var            text     ath-header-font-family "Font: Headers"     "Arial, sans-serif"
  13. @var            text     ath-text-font-family   "Font: Text"        "Segoe UI, Arial, sans-serif"
  14. @var            number   ath-base-font-size     "Font size: Base"   [16, 8, 30, 0.5, 'px']
  15. @var            number   ath-adrticle-font-size "Font size: Aricle" [13, 8, 30, 0.5, 'px']
  16. ==/UserStyle== */
  17.  
  18. @-moz-document domain("nytimes.com") {
  19.   :root {
  20.     --color-content-primary: #eee;
  21.     --color-content-secondary: #ccc;
  22.     --color-content-tertiary: #999;
  23.     --color-background-primary: #111;
  24.     --color-background-secondary: #222;
  25.     --color-background-tertiary: #333;
  26.     --color-background-elevated: #222;
  27.     --color-stroke-primary: #ccc;
  28.     --color-stroke-quaternary: #aaa;
  29.   }
  30.  
  31.   html {
  32.     font-size: var(--ath-base-font-size);
  33.   }
  34.   body {
  35.     color: var(--color-content-secondary) !important;
  36.   }
  37.   h1, h2, h3, h4, h5, h6, .summary-class {
  38.     font-family: var(--ath-header-font-family) !important;
  39.   }
  40.   p, li, div, span {
  41.     font-family: var(--ath-text-font-family) !important;
  42.   }
  43.   [name="articleBody"] {
  44.     font-size: var(--ath-article-font-size);
  45.     p, li, div, span {
  46.       font-size: inherit !important;
  47.       line-height: 1.5 !important;
  48.     }
  49.   }
  50.  
  51.   html, body, main,
  52.   .vi-gateway-container {
  53.     height: auto !important;
  54.   }
  55.   html {
  56.     color-scheme: dark;
  57.     overflow: hidden scroll;
  58.   }
  59.   body {
  60.     overflow: visible;
  61.     background: var(--color-background-primary) !important;
  62.   }
  63.   .vi-gateway-container {
  64.     position: static !important;
  65.     /* alternative: > div[class], > div[class]:empty:last-child { */
  66.     > div:empty {
  67.       display: none !important;
  68.     }
  69.   }
  70.   iframe,
  71.   #sponsor-wrapper,
  72.   [data-testid^="ReadersModeGateway"] {
  73.     display: none !important;
  74.   }
  75.  
  76.   svg[fill="#000000"] {
  77.     fill: #ccc;
  78.   }
  79.  
  80.   
  81.   a {
  82.     color: var(--color-content-primary);
  83.     p {
  84.       color: inherit !important;
  85.     }
  86.   }
  87.   [class], [class][class]::before, [class][class]::after {
  88.     border-color: #555;
  89.   }
  90.  
  91.   input:not([type=button], [type=submit]) {
  92.     color: revert !important;
  93.   }
  94.  
  95.   #in-story-masthead,
  96.   [data-testid="masthead-container"] {
  97.     background: #1f1f1f !important;
  98.     border: none;
  99.     header {
  100.       border: none;
  101.     }
  102.     span, a {
  103.       color: #ccc;
  104.     }
  105.   }
  106.   [data-testid="desktop-nested-nav"] > ul > li {
  107.     > div {
  108.       background: var(--color-background-secondary) !important;
  109.     }
  110.     button {
  111.       background: var(--color-background-secondary) !important;
  112.     }
  113.   }
  114.   div:has(> div > [data-testid="floating-desktop-nested-nav"]) {
  115.     background: var(--color-background-secondary) !important;
  116.     button {
  117.       background: var(--color-background-secondary) !important;
  118.     }
  119.     [data-testid^="nav-dropdown-"] {
  120.       background: #1f1f1f !important;
  121.     }
  122.   }
  123.   [data-testid="search-form"] {
  124.     background: var(--color-background-secondary) !important;
  125.     > div,
  126.     > div > div {
  127.       background: inherit !important;
  128.     }
  129.     input {
  130.       background: revert !important;
  131.     }
  132.   }
  133.   [data-testid="search-results"] {
  134.     span {
  135.       color: inherit;
  136.     }
  137.   }
  138.   #site-index {
  139.     background: #222;
  140.     :not(#\0)::before {
  141.       border-color: #555 !important;
  142.     }
  143.     h3 {
  144.       color: var(--color-content-primary);
  145.     }
  146.     a {
  147.       color: var(--color-content-secondary);
  148.     }
  149.   }
  150.   
  151.   path[fill="#000"],
  152.   path[fill="#121212"] {
  153.     fill: var(--color-stroke-quaternary) !important;
  154.   }
  155.  
  156.   [data-testid="onsite-messaging-unit-gateway"],
  157.   [data-testid="NextBestAction"],
  158.   #dock-container {
  159.     display: none !important;
  160.   }
  161. }