MDN Dark Mode by majesticstring

Details

Authormajesticstring
LicenseNo License
CategoryMDN, Mozilla Developer Network
Created3 years, 3 months ago
Updated3 years, 3 months ago
Size10 kB
Statistics

Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description

This style adds a dark mode for the Mozilla Developer Network documentation (https://developer.mozilla.org).
Notes

Userstyle doesn't have notes.
Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           MDN Dark Mode
@namespace      developer.mozilla.org
@version        1.0.0
@description    This style adds a dark mode for the Mozilla Developer Network documentation (https://developer.mozilla.org).
@author         Harry Allen
==/UserStyle== */

@-moz-document domain("developer.mozilla.org") {
    :root {
	--g-dark-bg: #303030;
	--g-dark-text: #ffffffb3;
	--g-card-bg: #424242;
	--g-card-content-text: #ffffffb3;
	--g-input-bg: #ffffff1a;
	--g-card-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
	--g-divider: #ffffff1f;
	--atom-bg: #282C34;
	--atom-blue-outline: #528bff;
	--atom-selection-bg: #3E4451;
	--code-error: #f48771;
	--code-white: #abb2bf;
	--code-purple: #c678dd;
	--code-orange: #d19a66;
	--code-green: #98c379;
	--code-red: #e06c75;
	--code-deep-red: #be5046;
	--code-teal: #56b6c2;
	--code-yellow: #e5c07b;
	--code-blue: #61afef;
	--code-comment: #5c6370;
}
table th, table td, .bc-table th {
	background-color: var(--g-card-bg) ;
}
.bc-platforms th {
	border-bottom: 2px solid var(--g-divider);
	border-right-color: var(--g-divider)
}
.bc-table .bc-browsers * *::before {
	filter: invert(.8);
}
.language-icon::before {
	filter: invert(0.8);
}
body {
	background: var(--g-dark-bg);
	color: var(--g-dark-text)
}
.page-header-main {
	background: var(--g-dark-bg);
	color: var(--g-dark-text);
}
ul.main-menu {
	background: var(--g-dark-bg)
}
button {
	color: var(--g-dark-text);
}
.logo > svg {
	filter: invert(0.85)
}
footer .logo > svg{
	filter: none;
}
.main-page-content h2 a:link, .main-page-content h2 a:visited, .main-page-content h3 a:link, .main-page-content h3 a:visited {
	color: var(--g-dark-text)
}
.language-icon::before {
        filter: invert(0.8);
}
.sidebar .icon-deprecated {
	filter: brightness(1.3)
}
a:link, a:visited {
	color: var(--code-blue)
}
pre a:link, a:visited, code a:link, a:visited {
	color: var(--code-blue)
}
.token.doctype {
	color: var(--code-white);
}
.breadcrumb-locale-container {
	background: var(--g-card-bg);
	color: var(--g-card-content-text);
	border-radius: 4px;
	box-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
}
input, .header-search {
	background-color: var(--g-input-bg);
}
.header-search input.search-input-field {
	border: none;
	color: #ffffffb3;
}
::placeholder {
	color: #ffffffb3;
}
.search-button {
	background-color: #0000;
	filter: invert(0.8)
}
a.external:after {
	filter: invert(0.8)
}
.metadata {
	background:var(--g-card-bg);
	border-radius: 4px;
}
ul.main-menu li ul {
	background: var(--g-card-bg)
}
@media (min-width: 47.9385em) {
	ul.main-menu li ul {
		box-shadow: var(--g-card-shadow)
	}
}
ul.main-menu .top-level-entry:before {
	filter: invert(0.8)
}
.breadcrumbs-container li .breadcrumb-penultimate:after, .breadcrumbs-container li .breadcrumb:after {
	filter: invert(0.7)
}
.breadcrumbs-container li:last-child a:link, .breadcrumbs-container li:last-child a:visited {
	color: var(--g-dark-text)
}
code,
pre {
	background: var(--atom-bg);
	color: var(--code-white)
}
.token.entity {
	color: var(--code-teal)
}
.token.property {
	color: var(--code-white)
}
.token.punctuation {
	color: var(--code-white)
}
.token.comment {
	color: var(--code-comment)
}
pre[class~="css"] .token.function {
	color: var(--code-teal)
}
.token.function {
	color: var(--code-blue)
}
.token.tag {
	color: var(--code-red)
}
.token.attr-name {
	color: var(--code-orange)
}
.token.attr-value {
	color: var(--code-green)
}
.token.boolean {
	color: var(--code-orange)
}
.token.constant {
	color: var(--code-orange)
}
.token.number {
	color: var(--code-orange)
}
.token.selector {
	color: var(--code-orange)
}
.token.string {
	color: var(--code-green)
}
.token.keyword {
	color: var(--code-purple)
}
.token.operator {
	color: var(--code-teal)
}
.token.class-name {
	color: var(--code-yellow)
}
.token.atrule .token.rule {
	color: var(--code-purple)
}
.token.atrule {
	color: var(--code-orange)
}
.CodeMirror-cursor {
	border-left-color: var(--atom-blue-outline) !important
}
.CodeMirror {
	background-color: var(--atom-bg);
	color: var(--code-white)
}
.CodeMirror-focused .CodeMirror-selected {
	background: var(--atom-selection-bg);
}
.darktheme .w3-code {
	background: var(--atom-bg)
}
.cm-s-default .cm-bracket.cm-bracket {
	color: var(--code-white) !important;
}
.cm-s-default .cm-tag {
	color: var(--code-red) !important
}
.cm-m-xml.cm-tag.cm-bracket {
	color: var(--code-white) !important;
}
.cm-s-default .cm-builtin {
	color: var(--code-blue) !important;
}
.cm-s-default .cm-qualifier {
	color: var(--code-orange)
}
.cm-s-default .cm-property {
	color: var(--code-white)
}
.CodeMirror {
	color: var(--code-white)
}
.cm-s-default .cm-variable-2 {
	color: var(--code-red)
}
.CodeMirror-cursor {
	border-left: 2px solid var(--atom-blue-outline) !important;
}
.cm-s-default .cm-number,
.cm-s-default .cm-keyword {
	color: var(--code-orange)
}
.cm-s-default .cm-atom {
	color: var(--code-teal)
}
.cm-s-default .cm-attribute {
	color: var(--code-orange)
}
.cm-s-default .cm-string {
	color: var(--code-green)
}:root {
	--g-dark-bg: #303030;
	--g-dark-text: #ffffffb3;
	--g-card-bg: #424242;
	--g-card-content-text: #ffffffb3;
	--g-input-bg: #ffffff1a;
	--g-card-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
	--g-divider: #ffffff1f;
	--atom-bg: #282C34;
	--atom-blue-outline: #528bff;
	--atom-selection-bg: #3E4451;
	--code-error: #f48771;
	--code-white: #abb2bf;
	--code-purple: #c678dd;
	--code-orange: #d19a66;
	--code-green: #98c379;
	--code-red: #e06c75;
	--code-deep-red: #be5046;
	--code-teal: #56b6c2;
	--code-yellow: #e5c07b;
	--code-blue: #61afef;
	--code-comment: #5c6370;
}
table th, table td, .bc-table th {
	background-color: var(--g-card-bg) ;
}
.bc-platforms th {
	border-bottom: 2px solid var(--g-divider);
	border-right-color: var(--g-divider)
}
.bc-table .bc-browsers * *::before {
	filter: invert(.8);
}
.language-icon::before {
	filter: invert(0.8);
}
body {
	background: var(--g-dark-bg);
	color: var(--g-dark-text)
}
.page-header-main {
	background: var(--g-dark-bg);
	color: var(--g-dark-text);
}
ul.main-menu {
	background: var(--g-dark-bg)
}
button {
	color: var(--g-dark-text);
}
.logo > svg {
	filter: invert(0.85)
}
footer .logo > svg{
	filter: none;
}
.main-page-content h2 a:link, .main-page-content h2 a:visited, .main-page-content h3 a:link, .main-page-content h3 a:visited {
	color: var(--g-dark-text)
}
.sidebar .icon-deprecated {
	filter: brightness(1.3)
}
a:link, a:visited {
	color: var(--code-blue)
}
pre a:link, a:visited, code a:link, a:visited {
	color: var(--code-blue)
}
.token.doctype {
	color: var(--code-white);
}
.breadcrumb-locale-container {
	background: var(--g-card-bg);
	color: var(--g-card-content-text);
	border-radius: 4px;
	box-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
}
input, .header-search {
	background-color: var(--g-input-bg);
}
.header-search input.search-input-field {
	border: none;
	color: #ffffffb3;
}
::placeholder {
	color: #ffffffb3;
}
.search-button {
	background-color: #0000;
	filter: invert(0.8)
}
a.external:after {
	filter: invert(0.8)
}
.metadata {
	background:var(--g-card-bg);
	border-radius: 4px;
}
ul.main-menu li ul {
	background: var(--g-card-bg)
}
@media (min-width: 47.9385em) {
	ul.main-menu li ul {
		box-shadow: var(--g-card-shadow)
	}
}
ul.main-menu .top-level-entry:before {
	filter: invert(0.8)
}
.breadcrumbs-container li .breadcrumb-penultimate:after, .breadcrumbs-container li .breadcrumb:after {
	filter: invert(0.7)
}
.breadcrumbs-container li:last-child a:link, .breadcrumbs-container li:last-child a:visited {
	color: var(--g-dark-text)
}
code,
pre {
	background: var(--atom-bg);
	color: var(--code-white)
}
.token.entity {
	color: var(--code-teal)
}
.token.property {
	color: var(--code-white)
}
.token.punctuation {
	color: var(--code-white)
}
.token.comment {
	color: var(--code-comment)
}
pre[class~="css"] .token.function {
	color: var(--code-teal)
}
.token.function {
	color: var(--code-blue)
}
.token.tag {
	color: var(--code-red)
}
.token.attr-name {
	color: var(--code-orange)
}
.token.attr-value {
	color: var(--code-green)
}
.token.boolean {
	color: var(--code-orange)
}
.token.constant {
	color: var(--code-orange)
}
.token.number {
	color: var(--code-orange)
}
.token.selector {
	color: var(--code-orange)
}
.token.string {
	color: var(--code-green)
}
.token.keyword {
	color: var(--code-purple)
}
.token.operator {
	color: var(--code-teal)
}
.token.class-name {
	color: var(--code-yellow)
}
.token.atrule .token.rule {
	color: var(--code-purple)
}
.token.atrule {
	color: var(--code-orange)
}
.CodeMirror-cursor {
	border-left-color: var(--atom-blue-outline) !important
}
.CodeMirror {
	background-color: var(--atom-bg);
	color: var(--code-white)
}
.CodeMirror-focused .CodeMirror-selected {
	background: var(--atom-selection-bg);
}
.darktheme .w3-code {
	background: var(--atom-bg)
}
.cm-s-default .cm-bracket.cm-bracket {
	color: var(--code-white) !important;
}
.cm-s-default .cm-tag {
	color: var(--code-red) !important
}
.cm-m-xml.cm-tag.cm-bracket {
	color: var(--code-white) !important;
}
.cm-s-default .cm-builtin {
	color: var(--code-blue) !important;
}
.cm-s-default .cm-qualifier {
	color: var(--code-orange)
}
.cm-s-default .cm-property {
	color: var(--code-white)
}
.CodeMirror {
	color: var(--code-white)
}
.cm-s-default .cm-variable-2 {
	color: var(--code-red)
}
.CodeMirror-cursor {
	border-left:...
Reviews

No reviews yet.