A finely tuned dark theme for npmjs.com
npmjs.com dark theme by forivall
Details
Authorforivall
LicenseNo License
Categorynpmjs.com
Created
Updated
Size22 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name npmjs.com dark theme
@namespace github.com/openstyles/stylus
@version 1.0.2
@description A finely tuned dark theme for npmjs.com
@author forivall
@preprocessor less
==/UserStyle== */
@-moz-document domain("www.npmjs.com") {
img[src="https://raw.githubusercontent.com/hapijs/assets/master/images/family.png"] {
border-radius: 20%;
}
img[src^="https://raw.githubusercontent.com/npm/arborist/main/docs/logo.svg"] {
box-shadow: 0 0 5px white;
filter: brightness(85%) invert() sepia(29%) hue-rotate(180deg) saturate(160%);
}
:first-child > a[href="https://www.graphql-scalars.dev"] {
display: inline-block;
width: 450px;
height: 270px;
overflow: hidden;
}
:first-child > a[href="https://www.graphql-scalars.dev"] img {
min-width: 866px;
height: 270px;
}
:is(._8c1ee087, ._43683c6d) > * {
backdrop-filter: blur(0px) brightness(60%);
box-shadow:
-1rem -0px 0px rgba(0,0,0,0.03),
(-1rem*7/8) -0px 0px rgba(0,0,0,0.04),
(-1rem*6/8) -0px 0px rgba(0,0,0,0.05),
(-1rem*5/8) -0px 0px rgba(0,0,0,0.06),
(-1rem*4/8) -0px 0px rgba(0,0,0,0.07),
(-1rem*3/8) -0px 0px rgba(0,0,0,0.08),
(-1rem*2/8) -0px 0px rgba(0,0,0,0.09),
(-1rem*1/8) -0px 0px rgba(0,0,0,0.04),
1rem -0px 0px rgba(0,0,0,0.03),
(1rem*7/8) -0px 0px rgba(0,0,0,0.04),
(1rem*6/8) -0px 0px rgba(0,0,0,0.05),
(1rem*5/8) -0px 0px rgba(0,0,0,0.06),
(1rem*4/8) -0px 0px rgba(0,0,0,0.07),
(1rem*3/8) -0px 0px rgba(0,0,0,0.08),
(1rem*2/8) -0px 0px rgba(0,0,0,0.09),
(1rem*1/8) -0px 0px rgba(0,0,0,0.04);
}
._43683c6d > * {
padding-left: 4rem;
padding-right: 4rem;
}
._43683c6d > .mw6 {
max-width: 32rem + 8rem;
}
._43683c6d.pv5 {
padding-top: 0;
padding-bottom: 0;
}
._43683c6d.pv5 > :first-child {
padding-top: 4rem;
}
._43683c6d.pv5 > :first-child {
padding-bottom: 4rem;
}
[class^="typeahead__typeaheadList___"],
[class^="homepage__container___"],
[class^="homepage__outer___"] {
color: #ccc;
background-color: #000;
}
:root,
html {
background-color: #20242d;
}
:root,
html,
body,
#login a,
#login + a, {
color: #ccc;
}
.d767adf4:hover {
background: hsl(120, 100%, 13%);
border-color: hsl(140, 100%, 9%);
}
.b5be2af6 svg,
.b5be2af6 svg:nth-of-type(2) {
fill: rgba(255, 255, 255, 0.5)
}
[aria-labelledby="repository repository-link"] svg > g[fill],
._5cfc0900 svg {
fill: rgba(255, 255, 255, 0.8);
}
.black,
._99e3854f,
._0edb515f,
label[for^="search_ranking"] {
color: #ccc;
}
label[for^="search_ranking"]:hover {
color: #fff;
}
.black-90 {
color: rgba(204, 204, 204, .9);
}
.black-70 {
color: rgba(204, 204, 204, .9);
}
._26391339 a {
color: #aaa;
background-color: #222;
border: 1px solid hsl(0, 0%, 22%);
}
._26391339 a:hover {
background-color: #333;
}
._1b8c0a9f {
color: #686868
}
.b--black-30 {
border-color: rgba(204,204,204,0.3);
}
header,
header[class*=" "],
#search > :first-child,
#signup {
border-color: #444;
}
#search > div > div.flex {
background-color: #222;
}
.header__searchInput___102CH,
.header__firstPublish___2CEvd,
.header__expansions___3REog{
color: #ccc !important;
}
._425fdea4,
#create_orgScope,
#invite_entity {
background-color: var(--white-1);
}
.fd18bd36 {
background-color: var(--white-1);
}
.fd18bd36:nth-of-type(2n+1) {
background-color: var(--white-2);
}
nav button,
header,
header > div,
main > div,
#app #main,
._75ce47e7
{
background-color: #20242d !important;
}
#app #main img[alt="Step 1"],
#app #main img[alt="Step 2"],
{
background-color: #ddd;
border-radius: 50%;
}
.f85080bd {
border-bottom-color: var(--white-4);
}
._5d3decdb {
border-color: var(--white-3);
border-bottom-color: var(--white-4);
}
a[href="/"] {
position: relative;
/* display: inline-block; */
}
@npmcolor: #fb3e44;
@npmcolor: #cb0300;
header.bg-white a[href="/"]::before {
@svgwidth: 70;
content: '';
position: absolute;
bottom: ((5px) * @svgwidth/780);
left: ((240px - 45px) * @svgwidth/780);
width: ((100px + 45px + 50px) * @svgwidth/780);
height: ((45px) * @svgwidth/780);
background-color: @npmcolor;
/* clip-path: path('M240,250h100v-50h100V0H240V250z M340,50h50v100h-50V50z M480,0v200h100V50h50v150h50V50h50v150h50V0H480z M0,200h100V50h50v150h50V0H0V200z'); */
/* clip-path: circle(5px); */
}
header.bg-white a[href="/"] svg {
@svgwidth: 70;
@bgoutset: ((45px) * @svgwidth/780);
background-color: @npmcolor !important;
box-shadow:
@bgoutset -@bgoutset 0 @npmcolor,
-@bgoutset -@bgoutset 0 @npmcolor,
@bgoutset 0 0 @npmcolor,
-@bgoutset 0 0 @npmcolor,
0px -1px 18px rgba(204, 204, 204, 0.05),
8px -1px 18px rgba(204, 204, 204, 0.1),
-8px -1px 18px rgba(204, 204, 204, 0.1),
0px -3px 18px rgba(204, 204, 204, 0.2),
4px 2px 8px rgba(204, 204, 204, 0.05),
-4px 2px 8px rgba(204, 204, 204, 0.05);
border-bottom: none;
}
header:not(.bg-white) a[href="/"]::before {
@svgwidth: 144;
content: '';
position: absolute;
bottom: -((19px) * @svgwidth/780);
left: ((240px - 45px) * @svgwidth/780);
width: ((100px + 45px + 50px) * @svgwidth/780);
height: ((45px) * @svgwidth/780);
background-color: @npmcolor;
/* clip-path: path('M240,250h100v-50h100V0H240V250z M340,50h50v100h-50V50z M480,0v200h100V50h50v150h50V50h50v150h50V0H480z M0,200h100V50h50v150h50V0H0V200z'); */
/* clip-path: circle(5px); */
}
header:not(.bg-white) a[href="/"] svg {
@svgwidth: 144;
@ratio: @svgwidth / 70;
@bgoutset: ((45px) * @svgwidth/780);
background-color: @npmcolor !important;
box-shadow:
@bgoutset -@bgoutset 0 @npmcolor,
-@bgoutset -@bgoutset 0 @npmcolor,
@bgoutset 0 0 @npmcolor,
-@bgoutset 0 0 @npmcolor,
(0px * @ratio) (-1px * @ratio) (18px * @ratio) rgba(204, 204, 204, 0.05),
(8px * @ratio) (-1px * @ratio) (18px * @ratio) rgba(204, 204, 204, 0.1),
(-8px * @ratio) (-1px * @ratio) (18px * @ratio) rgba(204, 204, 204, 0.1),
(0px * @ratio) (-3px * @ratio) (18px * @ratio) rgba(204, 204, 204, 0.2),
(4px * @ratio) (2px * @ratio) (8px * @ratio) rgba(204, 204, 204, 0.05),
(-4px * @ratio) (2px * @ratio) (8px * @ratio) rgba(204, 204, 204, 0.05);
border-bottom: none;
}
a[href="/"] svg path {
fill: #ededed !important;
}
a[href="https://github.com/npm"] svg>rect[fill] {
fill: rgba(255, 255, 255, .7);
}
a[href="https://github.com/npm"] svg>polygon[fill] {
fill: rgba(0, 0, 0, .82);
}
a[href="https://github.com"] svg {
fill: rgba(255, 255, 255, .7);
}
li a {
color: #999 !important;
}
.global__application___g4ZRy main,
.bg-white {
background-color: #2A303C
}
.ab3bb16f input[type="radio"] {
visibility: hidden;
}
.dark-gray, .b4929007 {
color: var(--black-2);
}
.b4929007 {
text-shadow: 0 1px 0 var(--white-6);
}
._16dbbe04 {
color: var(--black-2) !important;
}
.bg-light-gray {
background-color: var(--blue-4);
}
[aria-label="Profile menu"] + span > div * {
color: inherit;
}
[aria-label="Profile menu"] + span > div > h2 {
border-bottom-color: var(--white-6);
}
[aria-label="Profile menu"] + span > div {
border-color: var(--white-7);
}
[aria-label="Profile menu"] + span > div::before {
border-bottom-color: var(--white-7);
}
[aria-label="Profile menu"] + span > div::after {
border-bottom-color: #2A303C;
}
[aria-label="Profile menu"] + span > div .list li a {
&:hover, &:focus {
background-color: var(--blue-4);
}
}
[aria-label="Profile menu"] + span > div .list li a[href="/org/create"] {
border-color: var(--white-6);
}
main .black,
main .hover-black:focus,
main .hover-black:hover {
color: #fff
}
main .black-80 {
color: rgba(255, 255, 255, 0.8)
}
main .black-60 {
color: rgba(255, 255, 255, 0.6)
}
main .black-50 {
color: rgba(255, 255, 255, 0.5)
}
.package__sidebarCode___3QsIw {
border: 1px #2A303C solid;
}
.tabs__tab___1gHZ2.tabs__teal___23Oy8:hover {
background-color: #0C3040;
}
.bg-washed-red {
background-color: hwb(0 13% 75%);
}
.bg-washed-red > span > code {
background-color: var(--s-background);
}
rect[fill="#cccccc"] {
fill: #fb3e44;
}
/* -- NPM Dark Theme -- */
main .b--black-10 {
border-color: rgba(255, 255, 255, 0.2)
}
.package__sectionHeader___Ov0xh {
color: #fff
}
.package__rightSidebar___9dMXo {
background: #20242d
}
.package__install___3jWoO svg,
.package__downloads___1Bmfo svg,
.package__runkit___1iQd- svg .line,
.package__runkit___1iQd- svg .line-round,
.package__githubIcon___3R9ox svg g {
fill: #fff
}
.tabs__tabs___17CUw {
background: #20242d
}
.tabs__tab___1gHZ2.tabs__yellow___1c2N8 .tabs__tabLink___2tDwu,
.tabs__tabLink___2tDwu,
.tabs__tab___1gHZ2.tabs__purple___3sUHq .tabs__tabLink___2tDwu,
.tabs__tab___1gHZ2.tabs__violet___rtKBH .tabs__tabLink___2tDwu {
color: #fff
}
.tabs__tab___1gHZ2.tabs__yellow___1c2N8:hover {
background-color: rgba(255, 205, 58, 0.1)
}
.tabs__tab___1gHZ2:hover {
background-color: rgba(203, 56, 55, 0.1)
}
.tabs__tab___1gHZ2.tabs__purple___3sUHq:hover, ._8055e658.c1f85151:hover {
background-color: rgba(200, 54, 195, 0.1)
}
.tabs__tab___1gHZ2.tabs__violet___rtKBH:hover, ._8055e658._7cec0316:hover {
background-color: rgba(137, 86, 255, 0.1)
}
.tabs__tab___1gHZ2.tabs__cyan___:hover, ._8055e658.b4fcfd19:hover{
background-color: rgba(41, 171, 226, 0.1);
}
.tabs__tab___1gHZ2.tabs__yellow_...