npm dark by aruncveli

/* ==UserStyle==
@name           npm dark
@namespace      github.com/aruncveli/userstyles
@version        24.09.04
@description    Dark theme for npm
@author         Arun Chandanaveli <aruncveli@gmail.com> (https://github.com/aruncveli)
@homepageURL    https://github.com/aruncveli/userstyles
@supportURL     https://github.com/aruncveli/userstyles/issues
@license        MIT
@preprocessor   stylus
@var	color	fg	        "Foreground"	            white
@var	color	bg	        "Background"	            black
@var	color	bg1	        "Background lightened 1"	#111111
@var	color	bg2	        "Background lightened 2"	#222222
@var	color	link-color	"Link"                    #ff453a
==/UserStyle== */

set-bg(var = bg)
  background-color var

set-bg1()
  set-bg(bg1)

set-bg2()
  set-bg(bg2)

set-fg()
  color fg

unset-bg-img()
  background-image unset

@-moz-document url-prefix("https://www.npmjs.com")
  :root
    color-scheme dark
    --header-color fg
    --bg bg
    --code-bg bg1
    --wombat-red link-color
    --background-color bg
    --color-fg-subtle fg

  .bg-white
    set-bg()

  ._2f299eeb // search box
  .bg-black-05
    set-bg1()

  ._8a2f7809 // search results
    border-bottom unset
    &:hover
      set-bg1()

  .dde91b96
    border-color bg1

  // Logos
  .af43375d svg path // npm
  a[aria-label=GitHub] svg path // Github
    fill fg

  .dark-gray
  ._1b8c0a9f // Headings in the footer
  .cd2827bb a // Links in the footer
  .a0dff0b1 // Keywords
  ._390acbc5::placeholder
  .hover-black:hover
  .c84e15be // Right pane headings: Install, Repository, etc.
    set-fg()

  for variant in "" "-90" "-80" "-70" "-60"
    .black{variant}
      set-fg()

@-moz-document url-prefix("https://www.npmjs.com/package")
  // Tabs
  ._8055e658
    &.d9f99065
    &._7aa1ee94
    &.c1f85151
    &._7cec0316
    &.b4fcfd19
      &:hover
        set-bg1()
    &._7cec0316.ac5f7ef8
      background-color rgba(137, 86, 255, 0.08)

  // Logos
  .fbd04dd1 // Copy code
  .lh-copy // Copy code arrow
  ._5cfc0900// Downloads
    svg
      fill fg

  // Logos
  a[aria-labelelledby=repository] // repo
  ._513426a8// Git
    svg g
      fill fg

  // Readme
  ._6d9832ac// Headings
    h1
    h2
    h3
    h4
    h5
    h6
    strong
      set-fg()
  ._704c034e// Contents
    p
    .highlight
    li
      set-fg()
  .a0dff0b1 // Keywords
  .c84e15be // Right pane headings: Install, Repository, etc.
  ._704c034e // Legacy markdown content
    set-fg()

  // File explorer - Code tab
  ._5ae7dfec button
    set-fg()
    &:hover
      set-fg()
  .a2ab2737:hover // row
    set-bg1()
  ._450b46e9 // Back button
    filter invert(1)

  // Misc buttons on the bottom right

  unset-bg-border()
    background-image unset
    border unset

  bg1-bg-border()
    set-bg1()
    unset-bg-border()

  fg-bg-border()
    set-fg()
    unset-bg-border()

  a[href^="/support"]
    color var(--color-fg-danger)
    bg1-bg-border()
    &:hover
      background-color var(--color-fg-danger)
      fg-bg-border()

  a[href^="https://runkit.com"]
    color rgb(75 173 58 / 50%)
    bg1-bg-border()
    &:hover
      background-color rgb(75 173 58 / 50%)
      fg-bg-border()

  // Author box
  ._704c034e
    td
      set-bg()
    blockquote
      set-bg1()

  // Fund this package banner
  ._24a1e9c7
    set-bg1()
    set-fg()
    unset-bg-img()
    &:hover
      set-fg()
      set-bg2()
      unset-bg-img()

  @css {
    /*!
    * GitHub Dark v0.5.0
    * Copyright (c) 2012 - 2017 GitHub, Inc.
    * Licensed under MIT (https://github.com/primer/github-syntax-theme-generator/blob/master/LICENSE)
    */

    .pl-c /* comment, punctuation.definition.comment, string.comment */ {
      color: #959da5;
    }

    .pl-c1,
    .pl-s .pl-v /* string variable */ {
      color: #c8e1ff;
    }

    .pl-e,
    .pl-en /* entity.name */ {
      color: #b392f0;
    }

    .pl-smi,
    .pl-s .pl-s1 /* string source */ {
      color: #f6f8fa;
    }

    .pl-ent /* entity.name.tag */ {
      color: #7bcc72;
    }

    .pl-k /* keyword, storage, storage.type */ {
      color: #ea4a5a;
    }

    .pl-s,
    .pl-pds,
    .pl-s .pl-pse .pl-s1,
    .pl-sr,
    .pl-sr .pl-cce,
    .pl-sr .pl-sre,
    .pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
      color: #79b8ff;
    }

    .pl-v,
    .pl-ml /* markup.list, sublimelinter.mark.warning */ {
      color: #fb8532;
    }

    .pl-bu /* invalid.broken, invalid.deprecated, invalid.unimplemented, message.error, brackethighlighter.unmatched, sublimelinter.mark.error */ {
      color: #d73a49;
    }

    .pl-ii /* invalid.illegal */ {
      color: #fafbfc;
      background-color: #d73a49;
    }

    .pl-c2 /* carriage-return */ {
      color: #fafbfc;
      background-color: #d73a49;
    }

    .pl-c2::before /* carriage-return */ {
      content: "^M";
    }

    .pl-sr .pl-cce /* string.regexp constant.character.escape */ {
      font-weight: bold;
      color: #7bcc72;
    }

    .pl-mh,
    .pl-mh .pl-en,
    .pl-ms /* meta.separator */ {
      font-weight: bold;
      color: #0366d6;
    }

    .pl-mi /* markup.italic */ {
      font-style: italic;
      color: #f6f8fa;
    }

    .pl-mb /* markup.bold */ {
      font-weight: bold;
      color: #f6f8fa;
    }

    .pl-md /* markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted */ {
      color: #b31d28;
      background-color: #ffeef0;
    }

    .pl-mi1 /* markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted */ {
      color: #176f2c;
      background-color: #f0fff4;
    }

    .pl-mc /* markup.changed, punctuation.definition.changed */ {
      color: #b08800;
      background-color: #fffdef;
    }

    .pl-mi2 /* markup.ignored, markup.untracked */ {
      color: #2f363d;
      background-color: #959da5;
    }

    .pl-mdr /* meta.diff.range */ {
      font-weight: bold;
      color: #b392f0;
    }

    .pl-mo /* meta.output */ {
      color: #0366d6;
    }

    .pl-ba /* brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote */ {
      color: #ffeef0;
    }

    .pl-sg /* sublimelinter.gutter-mark */ {
      color: #6a737d;
    }

    .pl-corl /* constant.other.reference.link, string.other.link */ {
      text-decoration: underline;
      color: #79b8ff;
    }
  }

@-moz-document url-prefix("https://www.npmjs.com/search")

  // Search results
  .a9b7335e // header
    set-bg()
  ._31dfe8f0 a // Pagination
    set-fg()
  .a0329937._31dfe8f0 a
    set-bg1()
  ._26391339 a
    set-fg()
    set-bg()
    &:hover
      set-bg1()

  // Sort labels
  ._9390ec46 label
    set-fg()
    &:hover
      set-fg()

  // Tag chips
  ._39bb688c // Match
    set-bg1()
    &:hover
      set-bg2()

  // Quality stats
  ._89d0b3e5
    set-fg()

  .hover-black:hover
    set-bg2()

  .b--black-10
    border-color fg