MDN Web Docs dark theme
https://developer.mozilla.org/
MDN Web Docs Dark Theme by subz390
Mirrored from https://github.com/subz390/mdn-docs-dark-theme/raw/main/mdn-docs-dark-theme.user.css
Details
Authorsubz390
LicenseNo License
Categorymozilla
Created
Updated
Size9.1 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name developer.mozilla.org Dark Theme
@namespace github.com/subz390
@version 1.0.0
@description MDN Docs dark theme for developers with sensitive eyes
@author subz390
==/UserStyle== */
@-moz-document domain("developer.mozilla.org"), domain("interactive-examples.mdn.mozilla.net") {
:root {
--theme-font-size: 1.2em;
--theme-font: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
--code-font: fira code, monospace;
--lime-green: #bafa31;
--theme-primary-color: #379dc8;
--theme-selection-color: #115588;
--color: #d1d1d1;
--background: #181818;
--color-grey: #555555;
--color-dark: #181818;
--background-light: #222222;
}
html {
background-color: var(--background) !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: inherit;
}
body {
font-family: var(--theme-font) !important;
font-size: var(--theme-font-size);
color: var(--color) !important;
}
div, tt, a, span, img {
background-color: transparent !important;
}
#content,
#tabzilla-panel,
#toc,
table.diff,
.document-toc {
background-color: var(--background-light) !important;
border: none;
}
option, kbd, pre, th, #main-header, .submenu, .from-search-toc {
color: var(--color) !important;
background-color: var(--background) !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-color: var(--background-light) !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: non existent */
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;
border-color: var(--color-grey) !important;
text-shadow: none !important;
box-shadow: none !important;
}
html {
color: #e8e8e8;
}
hr {
height: 0 !important;
border: 0 solid var(--color-grey) !important;
border-width: 1px 0 0 !important;
}
a {
color: var(--theme-primary-color) !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 {
column-rule-color: var(--color-grey) !important;
}
::-moz-selection {
background-color: var(--theme-selection-color) !important;
}
::selection {
background: var(--theme-selection-color) !important;
}
input[type='submit'],
input[type='button'],
input[type='file'],
input[type='reset'],
button {
color: var(--color) !important;
background-color: inherit;
}
input[type='submit']:hover,
input[type='button']:hover,
input[type='file']:hover,
input[type='reset']:hover,
button:hover {
color: var(--color) !important;
background-color: var(--theme-selection-color) !important;
}
button, input, select, textarea {
-moz-appearance: none !important;
}
input[type='radio'],
input[type='checkbox'] {
color: var(--theme-primary-color) !important;
background-color: var(--background-light) !important;
border-color: var(--color-grey) !important;
}
input,
select,
textarea,
input[type='text'] {
background: #181818 !important;
color: #ccc !important;
padding: 2px !important;
border: 1px solid var(--color-grey) !important;
}
input[type] {
border: 1px solid var(--color-grey) !important;
}
textarea:hover,
input:hover,
select:hover,
textarea:focus,
input:focus,
select:focus {
border-color: var(--theme-primary-color) !important;
}
select > button,
.search-wrap > input[type='search'] {
background-color: transparent !important;
border: none !important;
}
option:hover,
option:focus,
option:active,
option:checked {
background: linear-gradient(#158, #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;
}
:not(pre) > * > code, :not(pre) > code {
font-family: var(--code-font);
font-size: 0.9rem;
/* text-decoration: underline; */
color: var(--color) !important;
background-color: var(--background) !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;
}
.header-search form {
border: none;
}
.live * {
background: #1d1d1d !important;
font-family: var(--code-font);
/* color: #c8c8c8 !important; */
}
/* Browser Compatibility Tables */
.bc-table thead {
color: var(--color-dark) !important;
background-color: var(--background-light) !important;
}
.bc-supports-yes {
color: var(--color-dark) !important;
background-color: var(--lime-green) !important;
}
.bc-supports-unknown,
.bc-history {
color: var(--color) !important;
background-color: var(--background) !important;
}
.ic-disabled::before {
text-shadow: 2px 2px var(--color);
}
.main-menu {
color: var(--color-dark) !important;
background-color: var(--background-light) !important;
}
.logo svg {
fill: var(--theme-primary-color);
}
}
@-moz-document domain("interactive-examples.mdn.mozilla.net") {
.CodeMirror {
font-family: monospace;
}
/* function names */
.cm-s-default .cm-def {
color: #fff;
}
/* comments */
.cm-s-default .cm-comment {
color: #cc7d2f;
}
/* keywords */
.cm-s-default .cm-keyword {
color: #1595e1;
}
/* null */
.cm-s-default .cm-atom {
color: #00b5d2;
}
}