Mozilla Developer Network - Dark Theme by queengooborg

Imported from https://cdn.jsdelivr.net/gh/33kk/uso-archive@flomaster/data/usercss/182570.user.css

Mirrored from https://github.com/queengooborg/darkthemes/raw/main/themes/mdn/mdn.user.css

Mozilla Developer Network - Dark Theme screenshot
Install Get Stylus Write a review

Details

Authorqueengooborg

LicenseGPL-3.0

Created atSeptember 28, 2021 01:24

Updated atFebruary 19, 2022 04:01

Applies tomozilla

Statistics

Learn how we calculate statistics in the FAQ.

Total views333

Total installs1958

Weekly installs66

Description

A dark theme for the MDN web docs pages (developer.mozilla.org), updated for compatibility with their new Yari layout engine. Colors are adjustable via the variables set on :root.

Notes

Userstyle doesn't have notes.

History

Daily snapshots of style statistics.

2021-09-282021-10-142021-10-302021-11-142021-11-302021-12-152021-12-312022-01-152022-01-312022-02-152022-03-032022-03-18Date0.007.5015.0022.5030.0037.5045.0052.5060.00Daily countDaily installsDaily updatesDaily views
2021-09-282021-10-162021-11-022021-11-192021-12-062021-12-232022-01-092022-01-262022-02-122022-03-012022-03-18Date0.00180.00350.00530.00700.00880.001050.001230.001400.00Total countTotal installsTotal views

Source code

/* ==UserStyle==
@name           Mozilla Developer Network - Dark Theme
@namespace      queengooborg
@author         Vinyl Da.i'gyu-Kazotetsu [https://queengoob.org]
@description    A dark theme for the MDN web docs pages (developer.mozilla.org), updated for compatibility with their new Yari layout engine.  Colors are adjustable via the variables set on :root.
@version        1.2.5
@license        GPL-3.0
==/UserStyle== */

@-moz-document domain("developer.mozilla.org"), domain("mdn.github.io"), domain("mdn.mozillademos.org"), domain("interactive-examples.mdn.mozilla.net"), domain("yari-demos.prod.mdn.mozit.cloud"), regexp(".*localhost:5042.*") {
:root {
    --background: #151515;
    --background-2: #191919;
    --background-3: #222;
    --background-input: #000;
    --background-input-hover: #151515;
    --background-disabled: #777;
    --background-highlight: #48430f;

    --foreground: #ccc;
    --foreground-2: #aab;
    --foreground-muted: #999;
    --foreground-input: #aaa;
    --foreground-input-hover: #fff;
    --foreground-disabled: #ddd;

    --border: solid 0.5px #353535;
    --border-color: #353535;

    --link: #369;
    --link-hover: #47a;
    --link-visited: #96a;

    --foreground-error: #fff;
    --foreground-warning: #fff;
    --foreground-info: #fff;
    --foreground-success: #fff;
    --background-error: #600;
    --background-warning: #320;
    --background-info: #138;
    --background-success: #151;
    --background-archived: #400;

    --syntax-foreground: #f5f5f5;
    --syntax-foreground-2: #ffffff;
    --syntax-background: #000000;
    --syntax-background-2: #202020;
    --syntax-comment: #b0b0b0;
    --syntax-builtin: #fb0120;
    --syntax-function: #6fb3d2;
    --syntax-keyword: #d381c3;
    --syntax-number: #fc6d24;
    --syntax-string: #a1c659;

    --selection-fg: #000;

    --bcd-foreground: #fff;
    --bcd-background-yes: #181;
    --bcd-background-partial: #861;
    --bcd-background-preview: #025;
    --bcd-background-no: #811;
}

html, body, main, .document-head, .user-head, .home-masthead, .main-menu, .wiki-main-content, .global-notice, .text-content table.standard-table:not(.learn-box) td, .search-pane, #example-element, #bitmap, ul.main-menu, .page-header-main, .bc-table, .header-search, .bc-platforms td, .bc-browsers td {
    background-color: var(--background);
    color: var(--foreground);
}

button, .crumbs span::after, .quick-links .toggleable > a i[class^="icon-"], .quick-links .toggleable > a, .toggler i[class^="icon-"], #wikiArticle i.icon-thumbs-down-alt, .light h2, .dark h2, .subnav .toggle-container .toggleable .toggler, .dropdown-container .dropdown-menu-items a, .dropdown-container .dropdown-menu-items button, .article h2 a:link, .article h2 a:visited, .article h2 code, .notecard.note a, .notecard.note a code, .main-page-content h2 a:link, .main-page-content h2 a:visited, .search-results-list .title a:link, .search-results-list .title a:visited, .login > a:link, .toolbox > ul > li > a, .crumbs li a.crumb-current-page:link, .crumbs li a.crumb-current-page:visited, .breadcrumbs li a.crumb-current-page:link, .breadcrumbs li a.crumb-current-page:visited, .dropdown-container .dropdown-menu-label, .main-nav li ul li, .main-page-content h2 a:link, .main-page-content h2 a:visited, .main-page-content h3 a:link, .main-page-content h3 a:visited, .header-search input.search-input-field {
    color: var(--foreground);
}

.title, .user-since, summary, .quick-links .toggle summary, .breadcrumbs-container li:last-child a:link, .breadcrumbs-container li:last-child a:visited, .search-results .highlight, .search-results .summary, .main-page-content [aria-current] {
    color: var(--foreground-2);
}

.nav-main-item > a:focus, .nav-main-item > a:hover, table.compat-table td, .newsletter-box, .toc, .text-content .card-grid > li, .communitybox, .overheadIndicator, .activity tbody tr:nth-child(even), .subnav .toggleable.current, .subnav > ol > li.current, .text-content table.standard-table:not(.learn-box):not(.nostripe) tr:nth-child(2n+1) td, .moreinfo, .text-content .learn-box, #nav-sec > ul > li > a:hover, #nav-sec > ul > li > a:focus, .home-hacks, .light h2, .dark h2, .dashboard-table tbody tr:hover, .callout-box, .text-content table.fullwidth-table th, .revision-list li:nth-child(2n+1), table td, ul.main-menu .top-level-entry, .header-search .search-results {
    background-color: var(--background-2);
    color: var(--foreground);
}

#main-header, .text-content table.standard-table:not(.learn-box) th, .nav-footer, .document-toc, .submenu, .activity thead, ul.main-menu li ul, #nav-sec > ul > li > a, .nav-main-search, .interactive, .output, .bc-table tbody tr:nth-child(2n), .bc-table .bc-history, .text-content table.bc-table, .bc-supports-unknown, .text-content table.fullwidth-table, .document-toc ul, .standard-table td, .standard-table th, .metadata, .properties td, .properties th, .breadcrumb-locale-container, table th, .main-page-content .inline.optional, .main-page-content .inline.readonly, .header-search .search-results .result-item.highlight, .header-search .search-results .result-item:hover {
    background-color: var(--background-3);
}

::-moz-selection {
    color: var(--background) !important;
    background: var(--link) !important;
}

::selection {
    color: var(--background) !important;
    background: var(--link) !important;
}

.home-masthead {
    background-image: none;
}

.titlebar-container {
    background-color: var(--background);
    border-color: var(--border-color);
}

table[style*="background:"] {
    background-color: var(--background) !important;
}

canvas {
    background-color: white;
}

button, .text-content article[id="wikiArticle"] > .summary + h2, .zone-subnav-container, .subnav .toggle-container .toggleable, button.logout.button, tr.bc-history dl.bc-notes-list {
    background-color: transparent;
}

.text-content h3.highlight-spanned code {
    background-color: transparent !important;
}

.text-content article p img {
    background-color: white;
}

.archive-content {
    background-color: var(--background-archived);
}

input[type="search"], .reviews button, select, .button, .htab > ul > li, .htab > ul > li a, input[type="email"], input[type="button"], input[type="submit"], button.neutral, textarea, .button.neutral, input[type="text"], .header-search form, .search-form > input#home-q, .search-form > input#search-q {
    background-color: var(--background-input);
    color: var(--foreground-input);
}

input[type="search"]:focus, .reviews button:hover, select:hover, .button:hover, .htab > div, .login > a:hover, .login > a:focus, button.neutral:hover, textarea:focus, button:hover, input[type="text"]:focus {
    background-color: var(--background-input-hover);
    color: var(--foreground-input-hover);
}

.htab > ul > li {
    background-color: var(--background-input) !important;
    color: var(--foreground-input) !important;
}

.htab > ul > li.selected, .htab > ul > li.selected a {
    background-color: var(--background-input-hover) !important;
    color: var(--foreground-input-hover) !important;
}

.htab > ul > li, :not(pre) > * > code {
    background-color: transparent !important;
}

li.webextension-api-sidebar {
    background-color: transparent;
}

.contributors, .search-results-list mark {
    color: var(--foreground-muted);
    background: var(--background-highlight);
}

*[style="color: #888;"] {
    color: var(--foreground-muted) !important;
}

.spec-CR {
    color: #4af;
}

html:not(.no-js) .nav-main-item > a, a:hover, :not(pre) > * > a code, a, a:link, .nav-footer a:link, .button.link, .result-list .column-1 {
    color: var(--link);
}

html:not(.no-js) .nav-main-item > a:hover, :not(pre) > * > a:hover code, .toc-links a:focus, .toc-links a:hover, .button.link:hover, .search-results-filters label:hover .filter-name {
    color: var(--link-hover);
}

a:visited {
    color: var(--link-visited);
}

.quick-links a.new, article a.new {
    color: #c00;
}

.dropdown-container .dropdown-menu-items, .main-nav li ul {
    background-color: var(--background-2);
}

/* Syntax Highlighting and Code colors */
.CodeMirror {
    background-color: var(--syntax-background);
}

.CodeMirror-gutters, :not(pre) > * > code, pre.syntaxbox, .text-content pre[class*="language-"], pre[class*="language-"], .text-content pre, .text-content h3.highlight-spanned, .text-content h3 .highlight-span, .text-content .properties, .htmlVer, .inlineIndicator, .article .inline.optional, .article .inline.readonly, kbd, code, pre, table pre {
    background-color: var(--syntax-background-2);
    color: var(--syntax-foreground);
}

.CodeMirror, .text-content code[class*="language-"], pre[class*="language-"], code[class=" language-css"] {
    color: var(--syntax-foreground);
}

.CodeMirror-linenumber {
    color: var(--foreground-muted);
}

.cm-s-default .cm-property, .token.selector, .token.tag, .token.operator, .token.punctuation {
    color: var(--syntax-builtin);
}

.cm-s-default .cm-def, .token.function, .token.attr-name, .token.function {
    color: var(--syntax-function);
}

.cm-s-default .cm-keyword, .token.property, .token.keyword {
    color: var(--syntax-keyword);
}

.cm-s-default .cm-string, .cm-s-default .cm-string-2, .token.regex, .token.url, .token.string, .token.attr-value, .language-css .token.string, .style .token.string, .token.entity, .token.variable {
    color: var(--syntax-string);
}

.cm-s-default .cm-comment, .token.comment {
    color: var(--syntax-comment);
}

.cm-s-default .cm-number, .token.number {
    color: var(--syntax-number);
}

.token.url {
    background-color: rgba(255, 255, 255, 0.1);
}

.text-content pre[class*="language-"].example-bad {
    background-color: rgba(100, 50, 50, 0.3);
}

.header-search .search-results mark {
    background-color: var(--background-highlight);
}

/* "Special" background + foreground combinations */
.subnav > ol > li > a:hover, ul.tags li, ul.tags li a, ul.tags a, td[tabindex]:hover .bc-history-link, td[tabindex]:focus .bc-history-link {
    background-color: var(--link);
    color: var(--background);
}

.spec-cr:before, .spec-pr:before, .spec-rec:before, .spec-rfc:before {
    background-color: #3f3;
    color: #000;
}

.spec-cr, .spec-pr, .spec-rec, .spec-rfc {
    color: #3f3;
}

.spec-living:before, .spec-standard:before {
    background-color: #08f;
    color: #000;
}

.spec-living, .spec-standard {
    color: #4af;
}

.spec-draft:before, .spec-lc:before, .spec-wd:before {
    background-color: #f80;
    color: #000;
}

.spec-draft, .spec-lc, .spec-wd {
    color: #f80;
}

.spec-ed:before, .spec-obsolete:before {
    background-color: #e22;
    color: #000;
}

.spec-ed, .spec-obsolete {
    color: #e22;
}

.callout-newsletter, .notification.info, .communitymailinglist a, .notification.info .notification-img i, .notecard.note, .spec-rc::before {
    background-color: var(--background-info);
    color: var(--foreground-info);
}

.deprecated, .deprecatedBadge, .indicator-danger, .nonStandard, .nonstandardBadge, .obsolete, .obsoleteBadge, .unimplemented, .unimplementedBadge, .warning, .example-bad {
    background-color: var(--background-error);
    color: var(--foreground-error);
}

mark, .notice, .indicator-warning, .reviews, .draft, .privilegedBadge, .renamed, .secureContexts, .todo, .translationInProgress, .warning-review, #document-flaws .macro-filepath-in-prerequisite {
    background-color: var(--background-warning);
    color: var(--foreground-warning);
}

.example-good {
    background-color: var(--background-success);
    color: var(--foreground-success);
}

.reviews a, .draft a, .privilegedBadge a, .renamed a, .secureContexts a, .todo a, .translationInProgress a, .warning.warning-review a {
    color: var(--foreground-warning);
    text-decoration: underline;
}

.notecard.draft code, .notecard.experimental code, .notecard.secure code, .notecard.warning code {
    color: inherit;
}

/* Borders */
.callout-box, #main-header, ul.tags li, .text-content table {
    border: none;
}

.communitycontact a {
    border-color: var(--link);
}

.communitycontact a:hover, .communitycontact a:focus {
    border-color: var(--link-hover)
}

.text-content article[id="wikiArticle"] > div:not([class]) > h2::before, .text-content article[id="wikiArticle"] > h2::before, .text-content table.standard-table:not(.learn-box), .text-content table, .text-content table.standard-table:not(.learn-box) th, .text-content table.standard-table:not(.learn-box) td, .text-content th, .text-content td, input[type="email"], .submenu, button, .crumbs, select, .subnav > ol > li > a, .subnav .toggler, .text-content table.standard-table:not(.learn-box) td.header, #main-q, .home-hacks li, input[type="search"], .home-contribute li, body .topicpage-table .section, .zone-parent, .summary, input[type="text"], .output, .interactive, .text-content table.fullwidth-table th, .text-content table.fullwidth-table td, kbd {
    border-color: var(--border-color);
}

.submenu {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

a.button, .reviews, .text-content pre, .newsletter-box, button, input {
    border-radius: 10px;
}

#doc-rendering-in-progress.warning, #doc-rendering-scheduled.warning, #kserrors.warning, .deprecated, .draft, .experimental, .experimentalBadge, .inlineIndicator.deprecated, .inlineIndicator.experimental, .inlineIndicator.experimentalBadge, .inlineIndicator.nonStandard, .inlineIndicator.nonstandardBadge, .install, .nonStandard, .nonstandardBadge, .note, .obsolete, .privilegedBadge, .secureContexts, .translationInProgress, .warning.warning-review, .warning:not(.notification) {
    padding-left: 40px;
}

ul.main-menu li ul, .header-search .search-results {
    box-shadow: 0 2px 20px 0 black;
}

.callout-box, a.button, button {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

kbd, a.button:focus, button.logout, button.transparent, .notification.info button, button:active, .news letter button {
    box-shadow: none;
}

/* Navigation buttons on some articles/tutorials */
span[style*="background: #eaeff2"] {
    background-color: var(--background-input) !important;
    border: solid 0.5px var(--border-color);
    color: var(--foreground-input) !important;
    box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.9) !important;
}

span[style*="background: #eaeff2"]:hover {
    background-color: var(--background-input-hover) !important;
    color: var(--foreground-input-hover) !important;
}

span[style*="background: #eaeff2"]:active {
    box-shadow: none !important;
}

#main-q {
    padding-left: 5px;
}

#close-header-search {
    margin-top: 10px;
}

#wikiArticle i.icon-beaker {
    color: #4af;
}

.tagit-choice.ui-widget-content.ui-state-default, .tagit-new, .tagit.ui-widget-content li, ul.tags li {
    background: var(--background);
    color: var(--foreground);
    border: var(--border);
}

/* Compat Tables */

.bc-supports-no, .bc-supports-partial, .bc-supports-unknown, .bc-supports-yes, .bc-table .bc-history {
    color: var(--bcd-foreground);
}

.bc-supports-yes {
    background-color: var(--bcd-background-yes);
}

.bc-supports-partial {
    background-color: var(--bcd-background-partial);
}

.bc-supports-preview {
    background-color: var(--bcd-background-preview);
}

.bc-supports-no {
    background-color: var(--bcd-background-no);
    background-image: linear-gradient(to bottom right, rgba(94, 3, 6, .25) 0, rgba(94, 3, 6, .25) 1px, transparent 0, transparent 67px, rgba(94, 3, 6, .25) 0, rgba(94, 3, 6, .25) 73px, transparent 0, transparent 138px, rgba(94, 3, 6, .25) 0, rgba(94, 3, 6, .25) 144px, transparent 0), linear-gradient(to bottom left, rgba(94, 3, 6, .25) 0, rgba(94, 3, 6, .25) 1px, transparent 0, transparent 67px, rgba(94, 3, 6, .25) 0, rgba(94, 3, 6, .25) 73px, transparent 0, transparent 138px, rgba(94, 3, 6, .25) 0, rgba(94, 3, 6, .25) 144px, transparent 0);
}

/* Inverting Images */
.logo, header h4::before, .blockIndicator::before, .inlineIndicator.secureContexts::before, .geckoVersionNote::before, .inheritsbox::before, .note::before, .notice::before, .overheadIndicator::before, .standardNoteBlock::before, .warning::before, html[dir="ltr"] .external-icon:not([href^="https://mdn.mozillademos.org"]):not(.ignore-external)::before, html[dir="rtl"] .external-icon:not([href^="https://mdn.mozillademos.org"]):not(.ignore-external)::after, .select-browser-block > .browser .browser-logo img, a.external:before, .bc-icons i:before, .legend-icons:before, .breadcrumbs-container li .breadcrumb-penultimate:after, .breadcrumbs-container li .breadcrumb:after, a.external:after {
    filter: invert(100%);
}

div.page-footer-logo .logo {
    filter: invert(0%);
}

.bc-browsers .bc-head-txt-label::before, i[class^="ic-"]::before, .bc-platforms th::before, .crumbs span::after {
    filter: invert(100%);
}

.revision-list-controls:before {
    filter: invert(1) contrast(0.9) brightness(2);
}
}

Reviews

wscherphof reviewed and gave 4/5 ⭐ on November 26, 2021 at 06:46
Thank you