☰

NpmJS.com – Dark [Ath]

Dark theme for NPM (NpmJS.com). Includes styling of documentation.

  1. /* ==UserStyle==
  2. @name           NpmJS.com – Dark [Ath]
  3. @namespace      athari
  4. @version        1.1.1
  5. @description    Dark theme for NPM (NpmJS.com). Includes styling of documentation.
  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. ==/UserStyle== */
  12.  
  13. @-moz-document domain("npmjs.com") {
  14.   :root {
  15.     color-scheme: dark;
  16.   }
  17.   
  18.   :root {
  19.     --color-fg-default: #eee; /*262626*/
  20.     --color-fg-muted: #ccc; /*4d4d4d*/
  21.     --color-fg-subtle: #999; /*666666*/
  22.     --color-fg-on-emphasis: #ffffff;
  23.     --color-fg-brand: #cb3837;
  24.     --color-fg-accent: #196cb2;
  25.     --color-fg-success: #107010;
  26.     --color-fg-attention: #886701;
  27.     --color-fg-danger: #bb2e3e;
  28.  
  29.     --color-bg-default: #111; /*ffffff*/
  30.     --color-bg-subtle: #1f1f1f; /*f7f7f7*/
  31.     --color-bg-inset: #222; /*f2f2f2*/
  32.     --color-bg-emphasis: #262626;
  33.     --color-bg-accent: oklch(from #f2f9ff 0.3 c h); /*f2f9ff*/
  34.     --color-bg-success: oklch(from #dcfdd9 0.3 c h); /*dcfdd9*/
  35.     --color-bg-attention: oklch(from #fff5d8 0.3 c h); /*fff5d8*/
  36.     --color-bg-danger: oklch(from #ffdbdb 0.3 c h); /*ffdbdb*/
  37.  
  38.     --color-border-default: #444; /*e6e6e6*/
  39.     --color-border-muted: #333; /*f2f2f2*/
  40.     --color-border-strong: #666; /*8f8f8f*/
  41.     --color-border-accent: #afcee9;
  42.     --color-border-accent-emphasis: #0969da;
  43.     --color-border-success: #93d58a;
  44.     --color-border-success-emphasis: #107010;
  45.     --color-border-attention: oklch(from #efd88f 0.5 c h); /*efd88f*/
  46.     --color-border-danger: #f1b8bc;
  47.     
  48.     /* missing wtf?? */
  49.     --color-canvas-default: #111;
  50.     --color-canvas-overlay: #333;
  51.     --color-accent-muted: #334;
  52.     --color-accent-subtle: #223;
  53.     --shadow-floating-small: 1px 1px 2px 2px #0004;
  54.  
  55.     --color-shadow-large: 0 8px 24px rgba(140, 149, 159, 0.2);
  56.  
  57.     /*
  58.       Legacy color variables — please avoid!
  59.     */
  60.     --button-green: #00c642;
  61.     --npmRed: #cb3837;
  62.     --npmLightRed: #fb3e44;
  63.     --wombat-red: #cb3837;
  64.     --wombat-red-hover: #c40b0a;
  65.     --wombat-yellow: #ffcd3a;
  66.     --wombat-violet: #8956ff;
  67.     --wombat-purple: #c836c3;
  68.     --wombat-green: #00c642;
  69.     --wombat-teal: #29abe2;
  70.     --blue: #357edd;
  71.     --light-blue: #70b8ff;
  72.     --header-color: #eee;
  73.     --bg: #111;
  74.     --bg-dark: #cb3837;
  75.     --background-color: #000; /*fafafa*/
  76.     --wombat-bg-red: rgba(203, 55, 56, 0.1);
  77.  
  78.     --code: 'Cascadia Code', 'Fira Mono', 'Andale Mono', 'Consolas', monospace;
  79.     --code-ls: 0px;
  80.     --code-lh: 24px;
  81.  
  82.     --standardCardTransition: all 0.2s ease;
  83.  
  84.     --header-letter-spacing: 0.015625em;
  85.  
  86.     --readme-font-size: 16px;
  87.     --readme-line-height: 1.3;
  88.  
  89.     --code-font-size: 13px;
  90.     --copy-color: #eee;
  91.     --code-bg: #222;
  92.     --code-box-radius: 2px;
  93.  
  94.     /* docs */
  95.     --fontStack-monospace: var(--code);
  96.     /*--fgColor-default: #eee;
  97.     --bgColor-default: #111;
  98.     --borderColor-default: #444;
  99.     --borderColor-muted: #333;*/
  100.   }
  101.  
  102.   :not(#\0) {
  103.     word-break: normal;
  104.   }
  105.  
  106.   input {
  107.     color: #eee !important;
  108.     background: #222 !important;
  109.     &::placeholder {
  110.       color: #888 !important;
  111.     }
  112.   }
  113.  
  114.   h1, h2, h3, h4, h5, h6 {
  115.     span {
  116.       color: inherit !important;
  117.     }
  118.   }
  119.  
  120.   form#search > .relative {
  121.     border-color: #333 !important;
  122.     > .nowrap {
  123.       background: #222;
  124.     }
  125.   }
  126.  
  127.   footer {
  128.     background: #000 !important;
  129.     #footer {
  130.       h3 {
  131.         color: #bbb;
  132.       }
  133.       a {
  134.         color: var(--wombat-red);
  135.       }
  136.     }
  137.   }
  138.  
  139.   .black {
  140.     color: #eee;
  141.   }
  142.   .hover-black:is(:hover, :focus) {
  143.     color: #eee;
  144.   }
  145.   .black-90 {
  146.     color: #ddd;
  147.   }
  148.   .black-80 {
  149.     color: #ccc;
  150.     svg {
  151.       color: inherit;
  152.       g {
  153.         fill: currentcolor;
  154.       }
  155.     }
  156.     button {
  157.       color: inherit;
  158.     }
  159.   }
  160.   .black-70 {
  161.     color: #bbb;
  162.   }
  163.   .black-60 {
  164.     color: #aaa;
  165.   }
  166.   .bg-black-05 {
  167.     background: #222;
  168.   }
  169.   .hover-bg-black-10:is(:hover, :focus) {
  170.     background: #444;
  171.   }
  172.   .b--black-30 {
  173.     border-color: #333;
  174.   }
  175.   .b--black-20 {
  176.     border-color: #2f2f2f;
  177.   }
  178.   .b--black-10 {
  179.     border-color: #222;
  180.   }
  181.   .bg-white {
  182.     background-color: #111;
  183.   }
  184.   .bg-washed-red {
  185.     background-color: #311;
  186.   }
  187.  
  188.   .button-reset {
  189.     opacity: 0.7;
  190.   }
  191.  
  192.   #readme {
  193.     color: var(--copy-color);
  194.     line-height: var(--readme-line-height);
  195.     p, li,
  196.     h1, h2, h3, h4, h5, h6,
  197.     strong, em, del, ins, b, i, s,
  198.     code, pre,
  199.     .highlight {
  200.       color: inherit;
  201.     }
  202.     .highlight {
  203.       code, pre {
  204.         font-size: var(--code-font-size);
  205.         .pl-s, .pl-pds, .pl-s .pl-pse .pl-s1, .pl-sr, .pl-sr .pl-cce, .pl-sr .pl-sre, .pl-sr .pl-sra {
  206.           color: oklch(from #032f62 0.6 c h);
  207.         }
  208.         .pl-e, .pl-en {
  209.           color: oklch(from #6f42c1 0.7 c h);
  210.         }
  211.         .pl-c1, .pl-s .pl-v {
  212.           color: oklch(from #005cc5 0.6 c h);
  213.         }
  214.         .pl-smi, .pl-s .pl-s1, .pl-mi, .pl-mb {
  215.           color: oklch(from #24292e 0.8 c h);
  216.         }
  217.         .pl-corl {
  218.           color: oklch(from #032f62 0.7 c h);
  219.         }
  220.         .gutter {
  221.           color: #eee;
  222.           background: #333;
  223.         }
  224.         .source.gfm {
  225.           color: #bbb;
  226.         }
  227.         .gfm .markup.heading {
  228.           color: #eee;
  229.         }
  230.         .markdown {
  231.           .paragraph {
  232.             color: #bbb;
  233.           }
  234.           .heading {
  235.             color: #eee;
  236.           }
  237.         }
  238.         .keyword, .storage, .storage.type {
  239.           color: oklch(from #222 0.9 c h);
  240.         }
  241.         .entity {
  242.           &.name {
  243.             &.function {
  244.               color: oklch(from #900 0.6 c h);
  245.             }
  246.             &.tag {
  247.               color: oklch(from #008080 0.7 c h);
  248.             }
  249.           }
  250.           &.other {
  251.             &.attribute-name {
  252.               color: oklch(from #458 0.7 c h);
  253.             }
  254.           }
  255.         }
  256.         .string {
  257.           color: oklch(from #d14 0.7 c h);
  258.         }
  259.         .variable {
  260.           color: oklch(from #008080 0.7 c h);
  261.         }
  262.         .support:is(.constant, .function, .type) {
  263.           color: oklch(from #458 0.7 c h);
  264.         }
  265.       }
  266.     }
  267.     .editor-colors {
  268.       .keyword,
  269.       .storage,
  270.       .storage.type {
  271.         color: oklch(from #222 0.7 c h);
  272.       }
  273.       .meta.structure.dictionary.json > .string.quoted.double.json,
  274.       .meta.structure.dictionary.json > .string.quoted.double.json .punctuation.string {
  275.         color: oklch(from #000080 0.6 c h);
  276.       }
  277.       .css.support.property-name {
  278.         color: oklch(from #333 0.8 c h);
  279.       }
  280.       .support.constant,
  281.       .support.function,
  282.       .support.type {
  283.         color: oklch(from #458 0.7 c h);
  284.       }
  285.       .variable {
  286.         color: oklch(from #008080 0.7 c h);
  287.       }
  288.       .constant.language {
  289.         color: oklch(from #606aa1 0.7 c h);
  290.       }
  291.     }
  292.     code, pre {
  293.       background: var(--code-bg);
  294.       font-size: var(--code-font-size);
  295.       word-break: normal !important;
  296.     }
  297.     blockquote {
  298.       background: #222;
  299.       border-color: #333;
  300.     }
  301.     table, tr, th, td {
  302.       border-color: #333;
  303.     }
  304.     td {
  305.       background: #111;
  306.       tr:nth-child(even) & {
  307.         background: #181818;
  308.       }
  309.     }
  310.     th {
  311.       background: #222;
  312.     }
  313.   }
  314.  
  315.   #tabpanel-explore {
  316.     pre {
  317.       filter: invert(1);
  318.       -webkit-text-stroke: 0.5px;
  319.       code {
  320.         font-size: 13px;
  321.       }
  322.     }
  323.   }
  324.  
  325.   #tabpanel-readme,
  326.   #tabpanel-dependents,
  327.   #tabpanel-dependencies {
  328.     h2.b--black-10,
  329.     h3.b--black-10 {
  330.       color: #eee;
  331.     }
  332.   }
  333.  
  334.   [aria-labelledby="package-settings_publishingAccess_radiogroup_label"] {
  335.     background: var(--color-bg-subtle);
  336.   }
  337.   [aria-label="Pagination Navigation"] {
  338.     > div > a {
  339.       color: #eee;
  340.       background: #333;
  341.       border-color: #444;
  342.       &:hover {
  343.         background: #444;
  344.       }
  345.       &[aria-current="true"] {
  346.         background: #777;
  347.       }
  348.     }
  349.   }
  350.   [id="pkg-list-exact-match"] {
  351.     background: #334;
  352.   }
  353.   [aria-owns^="package-tab-readme"] {
  354.     > li {
  355.       a {
  356.         &#package-tab-dependencies {
  357.           color: oklch(from #782075 0.6 c h);
  358.         }
  359.         &#package-tab-dependents {
  360.           color: oklch(from #290089 0.6 c h);
  361.         }
  362.         &#package-tab-versions {
  363.           color: oklch(from #146c91 0.6 c h);
  364.         }
  365.       }
  366.       &:not(:has(a[aria-selected="true"])):hover {
  367.         background: #222;
  368.       }
  369.     }
  370.   }
  371.   #main > .center-ns > .bg-washed-red.b--black-10:has(.b--black-10) code.b--black-30 /* deprecated warning */ {
  372.     background: #222;
  373.   }
  374.  
  375.   /* docs */
  376.   [style="color: rgb(57, 58, 52); background-color: rgb(246, 248, 250);"],
  377.   [style="color:#393A34;background-color:#f6f8fa"] {
  378.     color: var(--copy-color) !important;
  379.     background: var(--code-bg) !important;
  380.   }
  381.   [style="color: rgb(57, 58, 52);"] {
  382.     color: var(--copy-color) !important;
  383.   }
  384.   [style="color:#393A34"] {
  385.     color: oklch(from #393A34 0.8 c h) !important;
  386.   }
  387. }