Skip to content

MDN - dark theme (Obsolete) by phammy

Screenshot of MDN - dark theme (Obsolete)

Details

Authorphammy

LicenseNo License

Categorydeveloper.mozilla.org

Created

Updated

Code size5.9 kB

Code checksum9a0f34f5

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

(Obsolete, mdn now has a great built in dark theme) Dark theme for MDN Web Docs

Notes

Original boiler plate by grom (userstyles.org/styles/65358), Heavily Modified.

Source code

/* ==UserStyle==
@name           MDN - dark theme
@namespace      example.com
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */


@-moz-document domain("developer.mozilla.org") {
 
html { background: #17171a !important; }
 
html > body, table, tbody, tr, td:not([style*="background"]), h1, h2, h3, ul, ol, li, dl, dt, dd, p, blockquote, q, cite, fieldset, form, label, iframe, header, main, footer, nav, article, section, caption, center, abbr, sub, sup, font, code,
/* images */ .lwrap { background: none !important; }
    
ul.technologies, .references-guides, .feedback {background-color: #111 !important;}
 
div, tt, a, span, img { background-color: transparent !important; }
 
#content, #tabzilla-panel, #toc, table.diff { background: #0f0f11 !important; border-radius: 12px}
 
option, kbd, pre, th, #main-header, .submenu, .from-search-toc { background: #181818 !important; }
 
.diff_add, .diff_sub, .diff_chg { background: #111 !important; }
 
mark, .warning { background: #933 !important; border-color: transparent !important; }
 
/* example; .experimental: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes */
.notice.experimental, .experimental, .draft, .overheadIndicator.draft { background: #332 !important; border-color: #664 !important; }
 
/* header search */ .search-wrap, .reviews, .warning-review, .note, /* Eyedropper */ .geckoVersionNote, /* nsILocalFile */ .geckoVersionHeading { background: #333 !important; border-color: #555 !important; }
 
/* example; obsolete content: https://developer.mozilla.org/en-US/docs/E4X */
.line-highlight { background: rgba(140,140,140,.2) !important; }
 
/* example: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXULRuntime OR ./nsILocalFile */
div[style*="background: #dd0000;"] { background: #700 !important; } /* red: nonexistent */
div[style*="background: #00dd00;"] { background: #070 !important; } /* green: supported */
div[style*="background: #ff8000;"] { background: #f80 !important; } /* orange: deprecated */
div[style*="background: #eeee00;"] { background: #ff0 !important; } /* yellow: last changed */
 
* { color: inherit !important; border-color: #555 !important; text-shadow: none !important; box-shadow: none !important; }
html { color: #ccc !important; }
hr { height: 0 !important; border: 0 solid #555 !important; border-width: 1px 0 0 !important; }
a { color: #4be !important; }
a:hover { color: #7df !important; }
a:visited { color: #98f !important; }
a:visited:hover { color: #baf !important; }
a.new, .newpage { color: #f55 !important; }
a.new:hover { color: #f77 !important; }
/* don't use .error, because of body.error */
dl, ul, ol { -moz-column-rule-color: #555 !important; }
 
::-moz-selection { background: #184880 !important; }
::selection { background: #184880 !important; }
 
 
input[type="submit"]:hover, input[type="button"]:hover, input[type="file"]:hover, input[type="reset"]:hover, button:hover
{ border-color: #158 !important; background-color: #158 !important; color: #fff !important; }
 
button, input, select, textarea { -moz-appearance: none !important; }
input[type="radio"], input[type="checkbox"] { color: #4be !important; background: #222 !important; border-color: #999 !important; }
 
input, select, textarea{ background: #181818 !important; color: #ccc !important;}
input[type] { border-width: 1px !important; border-style: solid !important; }
textarea:hover, input:hover, select:hover, textarea:focus, input:focus, select:focus { border-color: #09f !important; }
 
select > button, .search-wrap > input[type="search"] { background-color: transparent !important; border: none !important; }
option:hover, option:focus, option:active, option:checked { background: #158 !important; }
 
#wiki-left, #toc { opacity: .6 !important; }
#wiki-content img:not(:hover) { opacity: .7 !important; }
 
.cssprop { background: /*#320*/ #431 !important; border-left-color: #960 !important; }
:not(pre) > code[class*="language-"], pre[class*="language-"] { border-left-color: #158 !important; }
/* comments */ .token.comment, .token.prolog, .token.doctype, .token.cdata { color: #777 !important; }
/* blue */ .token.atrule, .token.attr-value, .token.keyword { color: #5bf !important; }
/* green */ .token.selector, .token.attr-name, .token.string { color: #5f5 !important; }
/* gray */ .token.punctuation,.token.operator { color: #fa0 !important; }
/* red/magenta */ .token.property, .token.tag, .token.boolean, .token.number, .token.function { color: #f5f !important; }
 
span[title="Recommendation"] { color: #ccc !important; background: #262 !important; }
span[title="Working Draft"] { color: #ccc !important; background: #851 !important; }
span[title^="Editor's Draft"], span[title="Editor's Draft (unofficial)"] { color: #ccc !important; background: #933 !important; }
 
.inlineIndicator, .indicatorInHeadline, .blockIndicator, .overheadIndicator { background: none !important; }
.readOnly { background: #333 !important; color: #ccc !important; }
.unimplemented, .obsolete { background: #522 !important; color: #ccc !important; }
/* requires min version */ .minVer, .jsMinVer, .mbMinVer,
/* -moz-; -webkit- */ .prefixBox, /* requires Gecko x.y */ .standardNote, .optional, .renamed { background: #345 !important; color: #ccc !important; }
 
/* history */ .revision-list-controls:before { filter: invert(1); }
.diff_add { color: #7f7 !important; }
.diff_sub { color: #f77 !important; }
.diff_chg { color: #ff7 !important; }
 
    
a {color: #5ca0be !important}
.metadata {background: #222}
.search-button {display: none !important;}
.logo, .interactive {filter: invert(.9)}
.main-page-content {padding: 3rem;}
button::before {filter: invert(1) !important;}
#main-q {
    border-radius: 1px !important;
    transform: translateX(40px);
}

}

Reviews

No reviews yet.