Darker theverge.com (2022-23 redesign) by mkody

/* ==UserStyle==
@name         Darker theverge.com (2022-24 redesign)
@version      20231129.16.40
@namespace    ch.kdy.darker-theverge-2022
@description  Make theverge.com darker and easier on the eyes.
@author       mkody
@license      WTFPL
==/UserStyle== */
@-moz-document domain("theverge.com") {
  /* Doing my best to make it dark and somewhat readable */
  /* Sorry, I need to edit the blurple chief. Now rgb(155, 110, 245) */
  /*
    TODO:
    - Check different pages with their different colors and elements

    NOTE:
    - Special pages likes this one shouldn't be too much affected (missing #__next): https://www.theverge.com/c/23307867/human-composting-process-return-home 
  */
  #__next {
    background: rgb(19 19 19);
    color: #fff;
  }

  #__next div:not(.duet--page-layout--group):not(.duet--page-layout--quick-post) .duet--navigation--sticky-nav.bg-white {
    background-color: rgb(19 19 19);
    color: #fff;
  }
  #__next div:not(.duet--page-layout--group):not(.duet--page-layout--quick-post) .duet--navigation--navigation nav svg,
  #__next div:not(.duet--page-layout--group):not(.duet--page-layout--quick-post) .duet--navigation--sticky-nav.bg-white svg {
    fill: #fff;
  }
  #__next .duet--article--share-buttons .fill-black {
    fill: rgb(155, 110, 245);
  }

  /* Fix for featured articles with big hero */
  #__next .duet--page-layout--feature-article .\[\&_a\]\:text-black a {
    color: rgb(155, 110, 245) !important;
  }

  #__next .duet--layout--rail .bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(50 50 50);
  }

  #__next .bg-white {
    background: rgb(19 19 19);
  }
  #__next header > .bg-blurple {
    background: transparent;
  }

  #__next .text-black,
  #__next .ewrhy33 {
    color: rgb(255 255 255);
  }
  #__next .text-blurple {
    color: rgb(155 110 245);
  }
  #__next .hover\:text-blurple:hover {
    color: rgb(155 110 245);
  }
  #__next .\[\&\ > p\ > span\:first-child\]\:text-gray-13 > p > span:first-child,
  #__next .text-gray-13,
  #__next .ewrhy37 {
    color: rgb(236 236 236);
  }
  #__next .text-gray-4a {
    color: rgb(185 185 185);
  }
  #__next .text-gray-5a {
    color: rgb(165 165 165);
  }
  #__next .text-gray-63 {
    color: rgb(156 156 156);
  }
  #__next .bg-franklin {
    background-color: rgb(50 50 50);
  }
  #__next .bg-gray-ef {
    background-color: #323232;
  }

  /* Revert some of the previous rules for the little side widgets which have light backgrounds */
  /* Same for the little icons in the quick feed */
  #__next .duet--recirculation--group-breaker.text-black,
  #__next .duet--recirculation--group-breaker .text-black,
  #__next .duet--recirculation--list-breaker-compact.text-black,
  #__next .duet--recirculation--list-breaker-compact .text-black,
  #__next .duet--content-cards--content-card .md\:items-start .text-black {
    color: rgb(0 0 0);
  }
  #__next .duet--recirculation--group-breaker .text-gray-13,
  #__next .duet--recirculation--list-breaker-compact .text-gray-13 {
    color: rgb(19 19 19);
  }

  #__next .\[\&\ > p\ > span\:first-child\]\:text-black > p > span:first-child,
  #__next .\[\&_\.duet--article-byline-and\]\:text-black .duet--article-byline-and {
    color: rgb(255 255 255);
  }
  #__next .\[\&_a\]\:shadow-underline-black a {
    --tw-shadow: inset 0 -1px 0 0 #fff;
  }

  #__next .duet--article--article-body-component .bg-gray-200 {
    background-color: rgb(50 50 50);
  }

  #__next .text-franklin {
    --tw-text-opacity: 0.5;
  }
  #__next .selection\:bg-franklin-20 ::selection,
  #__next .selection\:bg-franklin-20::selection {
    background-color: rgb(80 80 80);
  }
  
  /* Fixes in bloquotes */
  #__next blockquote > p {
    /* gray-4a */
    color: rgb(185 185 185);
  }
  #__next blockquote > p a {
    color: inherit !important;
  }

  /* Streams of updates */
  /* First, pinned posts */
  #updates-section .bg-\[\#F6F2FF\] {
    background-color: rgb(50 50 50);
  }
  /* Then most of the text */
  #updates-section .text-gray-33 {
    color: rgb(236 236 236);
  }
  /* And now links who are apparently in dangerously set CMS markup too */
  #updates-section .duet--article--dangerously-set-cms-markup a {
    color: inherit;
  }
  #updates-section .duet--article--dangerously-set-cms-markup a:not(:hover) {
    --tw-shadow: inset 0 -1px 0 0 #fff;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  /* Fix input box for newsletters */
  #__next .duet--layout--rail .duet--cta--newsletter .bg-white {
    --tw-bg-opacity: 0;
  }

  /* Comments - Elements we have access */
  div[id*="headlessui-dialog-panel"] > aside {
    background: rgb(19 19 19);
  }
  .coral.coral-commentForm,
  .coral-rte > div {
    color: #fff !important;
    background: rgb(19 19 19) !important;
  }
  .coral-rte-content {
    color: #fff !important;
  }
  .coral.coral-counter span {
    color: rgb(19 19 19) !important;
  }

  /* Comments - For the rest this userscript is required: https://greasyfork.org/en/scripts/424030-stylus-shadow-dom-support */
  #coral {
    --verge-coral-background: rgb(19 19 19) !important;
    --verge-coral-foreground: #fff !important;
    --verge-coral-foreground-light: rgb(155, 110, 245) !important;
    --verge-coral-100: #222222 !important;
    --verge-coral-200: #333!important;
    --palette-background-input: #444 !important;
    --palette-background-popover: #444 !important;
    --palette-primary-500: #777 !important;
    --palette-primary-600: #666 !important;
    --palette-grey-500: #777 !important;
    --palette-grey-600: #666 !important;
    --palette-text-500: #fff !important;
    --verge-coral-grey-13: #777 !important;
    --verge-coral-grey-ef: #666 !important;
  }
  .coral.coral.coral-rte-toolbar button {
    color: #eee !important;
  }
  .coral.coral-comment-reportButton[data-variant="filled"] {
    color: #222222 !important;
  }
  .coral-comment:not(.coral-reacted-0):not(.coral-reacted-1):not(.coral-reacted-2):not(.coral-reacted-3):not(.coral-reacted-4) .coral-indent {
    /* When a comment has 5+ reactions */
    background: #2a2a2a !important;
  }
}