MDN Web Docs - Dark Theme by themadness

/* ==UserStyle==
@name         MDN Web Docs - Dark Theme
@version      20210921.07.34
@namespace    userstyles.world/user/themadness
@description  Dark mode for MDN documentation, bit of a work in progress.
@author       themadness
@license      No License
==/UserStyle== */

@-moz-document regexp("https://developer.mozilla.org/[^/]+/docs/?.*") {
html {
    --main-background: #282828; /* #fff */
    --main-color: #ddd; /* #1b1b1b */
    --alt-background-1: #393939; /* #f4f4f4 */
    --link-color: #52BFFF; /* #005282 */
    --border-color: #777; /* #a4a4a4 */
    --border-color-2: 77; /* #d5d5d5 */
    
    background-color: var(--main-background);
    color: var(--main-color);
}
ul.main-menu .top-level-entry::before,
ul.language-toggle .language-icon::before,
.bc-platforms th[class]::before,
.bc-browsers [class*=bc-head-icon-]::before,
.logo svg,
.ic-footnote::before,
.bc-history-link,
a.external::after,
.search-button,
.main-page-content .code-example .copy-icon, .main-page-content .code-example:focus .copy-icon, .main-page-content .code-example:hover .copy-icon,
.breadcrumbs-container li .breadcrumb-penultimate::after, .breadcrumbs-container li .breadcrumb::after {
    filter: invert(.83);
}
#nav-footer .logo svg {
    filter: invert(.17);
}
ul.main-menu,
.page-header-main,
ul.main-menu li ul {
    background-color: var(--main-background);
}
.main-page-content h2 a:link, .main-page-content h2 a:visited, .main-page-content h3 a:link, .main-page-content h3 a:visited,
.breadcrumbs-container li:last-child a:link, .breadcrumbs-container li:last-child a:visited,
.bc-supports-no, .bc-supports-partial, .bc-supports-unknown, .bc-supports-yes, .bc-table .bc-history,
.notecard a:link, .notecard a:visited,
button {
    color: var(--main-color);
}
.header-search input.search-input-field,
.header-search .search-results {
    border-color: var(--main-color);
    color: var(--main-color);
    background-color: var(--main-background);
}
table td,
code, pre,
.bc-table,
.bc-table tbody tr:nth-child(2n),
.breadcrumb-locale-container,
tr.bc-history dl.bc-notes-list,
.header-search .search-results .result-item.highlight, .header-search .search-results .result-item:hover,
.properties td, .properties th,
.metadata {
    background-color: var(--alt-background-1);
}
table {
    border-color: var(--border-color);
}
table td, table th {
    border-bottom-color: var(--border-color);
}
table th {
    background-color: var(--border-color-2);
}

.header-search .search-results .result-item {
    border-bottom-color: var(--alt-background-1);
}

a:link, a:visited {
    color: var(--link-color);
}
ul.main-menu li ul a:focus, ul.main-menu li ul a:hover {
    background-color: #008DDF; /* #0072b3 */
    color: var(--main-background);
}

.bc-supports-yes {
    background-color: #174E2E;
}
.bc-supports-partial,
.bc-supports-no {
    --bar-color: rgba(253, 176, 179,.1);
    background-color: #5E0C0E;
    background-image: linear-gradient(to bottom right,var(--bar-color) 0,var(--bar-color) 1px,transparent 0,transparent 67px,var(--bar-color) 0,var(--bar-color) 73px,transparent 0,transparent 138px,var(--bar-color) 0,var(--bar-color) 144px,transparent 0),linear-gradient(to bottom left,var(--bar-color) 0,var(--bar-color) 1px,transparent 0,transparent 67px,var(--bar-color) 0,var(--bar-color) 73px,transparent 0,transparent 138px,var(--bar-color) 0,var(--bar-color) 144px,transparent 0);
}

.notecard.note {
    background-color: #28354a; /* #ddeaff */
}

.notecard,
.properties,
.properties td, .properties th {
    border-color: var(--link-color);
}

ul.main-menu li ul {
    border-color: var(--border-color);
    box-shadow: #757575 0 2px 8px 0; /* #8a8a8a */
}


.token.cdata, .token.comment, .token.doctype, .token.prolog, .token.punctuation {
    color: #aaa; /* #6d6d6d */
}
.token.attr-name, .token.builtin, .token.char, .token.inserted, .token.selector, .token.string {
    color: #00D080; /* #005a38 7.57 */
}
.token.boolean, .token.constant, .token.deleted, .token.number, .token.property, .token.symbol, .token.tag {
    color: #FF8F94; /* #a30008 7.45 */
}
.token.atrule, .token.attr-value, .token.keyword {
    color: #3EB8FF; /* #005282 7.54 */
}
.token.class-name, .token.function {
    color: #FF7F88; /* #db000e 4.75 */
}
.language-css .token.string, .style .token.string, .token.entity, .token.operator, .token.url {
    color: var(--main-color);
}

}