New York Times Dark Mode

about.nyt-dark-mode-css.md

NYT Dark Mode CSS

ads.css

/* Hide Ads
 */
.ad,
[id*="-ad-"],
#top-wrapper,
#story #top-wrapper {
  display: none !important;
}
#app > div[class]:first-child {
  opacity: 0;
  height: 10px;
  overflow: hidden;
  pointer-events: none;
}

base.css

a[href^="https://www.nytimes.com/by/"] img {
  border-radius: 100%;
}

#desktop-sections-button:not(:hover) {
  background: transparent;
}

dark.css

@media (prefers-color-scheme: dark) {
  /* Root Inversion
   */
  :root {
    --menuShadow: 0 0.75px 0 rgba(0, 0, 0, 0.25),
      0 2px 8px 2px rgba(255, 255, 255, 0.88);
  }
  html {
    filter: invert(0.915) !important;
  }
  html,
  body,
  #app {
    background: white !important;
  }

  /* Uninverted Elements
   */
  video,
  /* iframe, */
  object,
  svg,
  img,
  [name="articleBody"] p a,
  [name="articleBody"] ul a,
  [name="articleBody"] ol a,
  [direction="positive"],
  [direction="negative"],
  button:not(.css-11evwck):not([aria-label="More sharing options ..."]):not(.css-1szc2m4):not(.css-w5tmva):not(.css-fnhm75),
  [class*="sprite"],
  .g-headshot,
  .react-vhs-container [class*="poster"],
  .vhs-plugin-controls,
  .vhs-plugin-controls-gradient,
  #live, .css-40v4b6, .css-192lewg .e6idgb70 /* LIVE elements */ {
    color: white;
    filter: invert(1) !important;
  }

  /* Generic Buttons
   */
  a > svg,
  button > svg {
    filter: unset !important;
  }

  button > i * {
    /* fix article comments button */
    color: white !important;
  }
  button > i:after {
    /* fix article comments button */
    border-color: black transparent !important;
  }

  button.css-1h5igzw,
  button.css-159bbcu,
  [data-testid="mini-nav-sections"] button,
  [data-testid="mini-nav-sections"] svg,
  [role="toolbar"][data-testid="share-tools"] button,
  [role="toolbar"][data-testid="share-tools"] svg {
    background-color: transparent !important;
    opacity: 0.88 !important;
  }

  /* NYT MASTHEAD
   */

  /* sticky nav */
  #app header > .css-1y7qxpi[style*="visible"] {
    box-shadow: var(--menuShadow);
  }

  /* logo */
  [data-testid="mini-nav-home"] svg path {
    fill: rgba(255, 255, 255, 0.88);
  }

  /* topnav buttons */
  .NYTAppHideMasthead header button {
    background: transparent !important;
  }
  .NYTAppHideMasthead header section > :last-child button {
    background: rgba(0, 0, 0, 0.1) !important;
    border-color: #000 !important;
  }
  .NYTAppHideMasthead header.css-ahe4g0 section button * {
    filter: invert(1) !important;
    color: black !important;
  }
  .NYTAppHideMasthead header section button:hover {
    background: rgba(0, 0, 0, 0.375) !important;
  }

  /* account modal */
  .ReactModal__Content {
    box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 6px 3px !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
  }
  .ReactModal__Content > svg[fill="#000"] {
    filter: invert(0) !important;
  }
  #nytslm {
    box-shadow: 0 0.75px 0 rgba(0, 0, 0, 0.2), -6px 0 black, 6px 0 black,
      var(--menuShadow);
  }

  /* SLIDING SIDEBAR
   */
   nav[data-testid="desktop-nav"] > section {
    border-radius: 0;
    box-shadow: var(--menuShadow);
  }

  /* ARTICLE
   */
  /* article nav */
  .css-1aor85t,
  .nytslm_outerContainer {
    box-shadow: var(--menuShadow);
  }
  [aria-label="comments panel"] {
    box-shadow: rgba(0, 0, 0, 0.15) -0.88px 0 0,
      rgba(255, 255, 255, 1) 3px 0px 12px 3px;
  }
  [role="toolbar"][data-testid="share-tools"] svg.css-4brsb6 path {
    fill: white;
  }

  /* FAQ Toggle List Widget
   */
  button[id^="faq-"] {
    background: black;
    color: white !important;
    border-top-color: #555;
  }

  /* LIVEBLOG
   */
  .css-x00beb {
    box-shadow: var(--menuShadow) !important;
  }

  /* VIDEO PLAYER
   */
  /* fullscreen */
  .nytd-player-container:-webkit-full-screen {
    filter: invert(1);
  }
  /* controls */
  .react-vhs-container [aria-label="video end slate"] > :last-child,
  .vhs-plugin-controls > :not(.vhs-plugin-controls-progress) {
    filter: invert(1);
  }
  .react-vhs-container [aria-label="video end slate"] svg {
    fill: black !important;
  }

  /* NYT MAGAZINE
   */
  /* main content */
  #collection-magazine {
    margin-top: 0;
  }
  /* masthead */
  .NYTAppHideMasthead section:not(.css-ui9rw0) a[href] > svg {
    filter: invert(1) !important;
  }

  /* FULL BLEED ARTICLES
   */
  #fullBleedHeaderContent header,
  #fullBleedHeaderContent figure.sizeFull {
    filter: invert(1) !important;
  }

  /* MISCELLANEOUS
   *  RE-INVERSIONS
   */
  #fullBleedHeaderContent .css-1pumfk,
  section[name="articleBody"] iframe,
  .top-art {
    filter: invert(1);
  }
}

index.scss

@import url('./ads.css');
@import url('./base.css');
@import url('./invert.css');