Dark Theme for crates.io
/* ==UserStyle==
@name Opinionated crates.io Dark Theme
@namespace griffi-gh
@author griffi-gh
@description Dark Theme for crates.io
@version 0.6.2
@preprocessor default
@license MIT
==/UserStyle== */
@-moz-document domain("crates.io") {
:root {
--main-bg: #2c3333;
--main-bg-dark: #1c2323;
--main-bg-light: #5d6353;
--main-color: white;
--header-bg-color: #000502;
--footer-bg-color: #000904;
--crate-color: #000904;
}
html, body {
background-color: var(--main-bg);
}
head {
background-color: var(--header-bg-color);
}
li > * {
background-color: var(--main-bg-dark)!important;
color: var(--main-color)!important;
}
input[name="q"] {
background-color: var(--main-bg-dark);
color: var(--main-color);
}
*[class*="docs"],*[class*="_inner-main_"] > *[class*="_list_"] {
background-color: var(--main-bg-dark);
}
/* Dark mode in code blocks */
code, pre {
background-color: var(--main-bg-dark)!important;
color: var(--main-color)!important;
}
/* code blocks: Fix unreadable strings and attrs */
code .hljs-string {
color: #f1ed69 !important;
}
code .hljs-attr {
color: lightblue !important;
}
/* Fix copy button background on hover */
*[class*="_copy-button"]:hover {
background: var(--main-bg-light) !important;
}
/* Increase max width (from 900px to 1100px) */
*[class*="_width-limit"] {
width: 1100px !important;
}
@media only screen and (max-width: 1100px) {
*[class*="_width-limit"] {
width: 100% !important;
}
}
/* Hacky navbar styling */
*[class*="_nav"] {
margin-bottom: 0 !important;
z-index: 9999 !important;
/* Required for sticky to look right*/
background: var(--main-bg) !important;
/* Make nav sticky */
position: sticky !important;
top: 0 !important;
}
*[class*="_docs"] {
border-radius: 0 0 9px 9px !important;
}
*[class*="_list"] {
--nav-tabs-border-width: 3px;
}
*[class*="_list"],*[class*="_link"] {
border-bottom: var(--nav-tabs-border-width) solid var(--gray-border) !important;
}
*[class*="_link"] {
margin-right: 4px !important;
margin-bottom: calc(1px - var(--nav-tabs-border-width)) !important;
color: lightgray !important;
}
*[class*="_link"][class*="_active"] {
border-bottom: var(--nav-tabs-border-width) solid var(--link-color) !important;
color: white !important;
}
/* Fix error message */
body > p {
color: var(--main-color);
}
/* Make stat lines a bit more subtle */
*[class*="_stat"] {
border-left-color: var(--main-bg-light) !important;
}
/* Remove line to the left of the first stat*/
*[class*="_stats"] h3 + *[class*="_stat"] {
border-left: none !important;
}
/* Put notifications on top */
.ember-cli-notifications-notification__container {
z-index: 999999 !important;
}
/* Fix /me page */
*[class*="_token-list"] > * {
background: var(--main-bg-dark) !important;
}
/* Fix dashboard */
*[class*="_token-display"] {
background: var(--main-bg) !important;
}
*[class*="_feed"], *[class*="_load-more"] * {
background: var(--main-bg-dark) !important;
}
/* Fix "add owner" menu */
*[class*="_email-form"] {
background: var(--main-bg-dark) !important;
}
/*Make pagination more obvious */
*[class*="_pagination_"] > ol > li > a {
transition: all .15s !important;
border-radius: 3px !important;
}
*[class*="_pagination_"] > ol > li > a.active {
background: var(--main-bg-light) !important;
}
*[class*="_pagination_"] > ol > li > a:not(.active):not(:hover) {
border-radius: 7px !important;
}
*[class*="_pagination_"] > ol > li > a:not(.active):hover {
background: var(--main-bg-light) !important;
}
/* fix arrows color*/
*[class*="_pagination_"] > a svg circle {
fill: var(--main-bg-dark) !important;
}
/* make icons consistent and a slight shadow to them */
svg[class*="_download-icon"] circle {
fill: transparent !important;
}
*[class*="_updated-at_"] svg, svg[class*="_download-icon"] {
filter: drop-shadow(0px 0px 3px var(--main-bg-light));
}
/* Invert crate version color */
*[class*="_range-lg_"] {
color: white !important;
}
/* Fix header and dropdown z-index */
header[class*="_header_"], *[class*="_dropdown_"] {
z-index: 999998 !important;
}
/*Remove ugly header shadow*/
#cargo-desktop-search, [class*="_main_"] {
box-shadow: none !important;
}
.tooltip.ember-tooltip {
z-index: 999999 !important;
}
}
@-moz-document regexp(".*crates\\.io\\/crates\\/.*\\/versions") {
*[class*="_nav"] {
/* z-index: unset !important; */
}
}