MDN Web Docs Dark Theme by subz390

/* ==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;
  }

}