twitter-reading-dark.user.css

/* ==UserStyle==
@name           Twitter Reading Dark
@namespace      suienzan
@version        1.1.2
@updateURL      https://userstyles.world/api/style/719.user.css
@description    A dark twitter theme for reading only. Need :has() support. Seeing https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility.
@author         Midori <suienzan@gmail.com>
@preprocessor   stylus

@var            select theme "Theme" ["0:Default*", "1:IM@S Light", "2:IM@S Dark"] 
@var            checkbox noLike "Hide like button" 0
@var            checkbox noNav "Hide nav in timeline" 0
@var            checkbox noPost "Hide What’s happening" 1

==/UserStyle== */
@-moz-document regexp('^https:\/\/(.*\.)?(twitter|x).com\/?.*') {

  /** IM@S Light **/
  if theme==1 {
    :root {
      --color-custom-background: #fbfafa;
      --color-custom-background-alpha: #fbfafabf;
      --color-custom-background-accent: #ebe1ff;
      --color-custom-background-accent-alpha: #ebe1ff66;
    }
  }

  /** IM@S Dark **/
  else if theme==2 {
    :root {
      --color-custom-background: #3f3538;
      --color-custom-background-alpha: #3f3538bf;
      --color-custom-background-accent: #515558;
      --color-custom-background-accent-alpha: #51555866;
    }
  }

  /** Default **/
  else {
    :root {
      --color-custom-background: #333435;
      --color-custom-background-alpha: #333435bf;
      --color-custom-background-accent: #444648;
      --color-custom-background-accent-alpha: #44464866;
    }
  }

  /** color **/
  /* main background */
  body,
  #RemoveThisLineIfWontBreak,
  /* primaryColumn */
  /* light */
  :not([role='radiogroup'])>.r-14lw9ot,
  /* dark */
  :not([role='radiogroup'])>.r-kemksi,
  /* Chat & Grok buttons */
  [data-testid="chat-drawer-main"]>.bg-background,
  /* buttons in /i/grok */
  [data-testid='primaryColumn'] button.r-rs99b7:has(svg+.r-4qtqp9):not(.r-wamsre),
  /* button in /explore > 'For you' tab */
  .r-loe9s5 {
    background-color: var(--color-custom-background) !important;
  }

  /* empty line use as border in /compose/tweet */
  .r-kuekak,
  /* timeline in /:name/status/:id */
  .r-hjejmn,
  /* highlight background in menu */
  /* light */
  .r-x572qd,
  /* dark */
  .r-g2wdr4,
  /* buttons:hover in /i/grok */
  [data-testid='primaryColumn'] button.r-wamsre {
    background-color: var(--color-custom-background-accent);
  }

  /* blurred background in top nav */
  /* light */
  .r-6026j,
  /* dark */
  .r-5zmot {
    background-color: var(--color-custom-background-alpha);
  }

  /* dialog overlay */
  .r-11z020y {
    background-color: var(--color-custom-background-accent-alpha);
  }

  /** border color **/
  /* vertical */
  /* light */
  .r-jxzhtn,
  /* dark */
  .r-1kqtdi0,
  /* horizontal */
  /* light */
  .r-j5o65s,
  /* dark */
  .r-1igl3o0,
  /* unfocused search bar in /explore */
  .r-1roi411,
  /* card, media & etc... */
  .r-1ets6dv,
  /* border of grok & chat button */
  .r-1xsrhxi,
  /* border in /:name/status/:id */
  .r-2sztyj {
    border-color: var(--color-custom-background-accent);
  }

  /* border under What’s happening, indeed 1px height box */
  .r-109y4c4 {
    background-color: var(--color-custom-background-accent);
  }

  /* buttons in /i/grok */
  [data-testid='primaryColumn'] button.r-rs99b7:has(svg + .r-4qtqp9),
  [data-testid='primaryColumn'] button:has(svg + .r-4qtqp9)>.r-rs99b7 {
    border-color: var(--color-custom-background-accent) !important;
  }

  /* profile photo */
  .r-hjejmn.r-1udh08x {
    background-color: transparent;
  }

  [class='css-1dbjc4n r-hjejmn'] {
    background-color: transparent;
  }

  /** fix **/
  /* remove padding under 'Post your reply' */
  .r-1h8ys4a.r-1mmae3n {
    padding-bottom: 0;
  }

  /** hide annoying **/
  /* Sidebar */
  [data-testid='sidebarColumn'],
  /* inline prompt */
  [data-testid='cellInnerDiv']:has([data-testid='inlinePrompt']),
  /* Spaces promotion in mobile view */
  [data-testid='TopNavBar']+ :has([data-testid='placementTracking']) {
    display: none;
  }

  /* Who to follow & etc... */
  /* in desktop home page */
  [data-testid='primaryColumn']:has([data-testid='tweetButtonInline']),
  /* in mobile home page */
  body:has([data-testid='TopNavBar']):has([href='/home/pinned/edit']) [data-testid='primaryColumn'],
  /* in user profile page */
  [data-testid='primaryColumn']:has([data-testid='UserName']) {

    /* title */
    [data-testid='cellInnerDiv']:has(h2[role='heading']),
    /* Who to follow content */
    [data-testid='cellInnerDiv']:has([data-testid='UserCell']),
    /* Show more */
    [data-testid='cellInnerDiv']:has(a[href*='/i/connect_people']) {
      display: none;
    }
  }

  /* Like button */
  if noLike {

    [data-testid='like'][role='button'],
    :has(> [data-testid='like'][role='button']) {
      display: none;
    }
  }

  /* Hide What’s happening */
  if noPost {
    .r-109y4c4 {
      display: none;
    }

    [data-testid='primaryColumn']>[tabindex='0']> :has([d*='M6 5c-1.1 0-2']) {
      display: none;
    }
  }

  /* nav in timeline */
  if noNav {
    .r-1e5uvyk nav:not(:has(a)) {
      display: none;
    }

    /* mobile view */
    body:has([data-testid='TopNavBar']) {
      [data-testid='TopNavBar'] nav[role='navigation'] {
        display: none;
      }

      header>div:empty {
        height: 53px !important;
      }
    }
  }
}