Dark theme 🌚

[ghost]

#2178

Example:

If the colors can be inverted they have a good contrast ➡️⬅️👁️

[peterbe]

Can you please find the original dark theme issue filed and close this one?

[peterbe]

Oh. I see. I'm on the mobile app. This is the discussion.
I guess we can keep this open and people who want dark mode than react to this discussion.

[Ryuno-Ki]

Do you have a laptop/desktop device?
You could experiment a dark theme using the Stylus web extension.

A mere invert of the colours won't likely cut it (for typographic reasons).
You might also want to look into https://mozilla.design/ to check for brand guidelines.

[ghost]

https://www.google.com/search?q=dark%20theme%20mdn&ie=utf-8&oe=utf-8&client=firefox-b-m

I find a discoruse from 2018
Anyway what I'm talking Is some PR on minimalist and voilà 🇫🇷 🧞...

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
(That link talks about dinamic classes but We can Just style p, h1, etc for starting and the other atoms on demand)

How about mdn-minimalist-dark repository....

[ghost]

You might also want to look into https://mozilla.design/ to check for brand guidelines.

That's good.

[ghost]

Why I'm not see a lot of designers commenting in GitHub.
It would be good 👍

[ghost]

Do you have a laptop/desktop device?

Actually not.
I didn't open laptop from about months.
Coding Is impossibile but reading and use GitHub Is ok.
Then is more common to me to use dark theme in mobile because Is a advertitsed feature.

[dannycolin]

IMO, @mattiapontonio idea to fork mdn-minimalist makes more sense if we want something that can be merged upstream.

[ghost]

I agree.
Tagging @schalkneethling
And then Yari has to (bossy) depends on it.

---

Forking is certainly comfortable. It might also be interesting to start from 0, with 1 CSS file maybe and see what happens ...
https://developer.mozilla.org/en-US/docs/Web/CSS/@import

[schalkneethling]

While I agree that a dark theme would be nice to have on MDN Web Docs. We need to consider all the use cases and people this would impact[1]. In the end, it needs to be driven by user choice via @prefers-color-scheme but also, we should offer a toggle should you wish to override it.

i.e. based on time of day, on an OS level, the system would have switched to dark mode but, for the moment you wish to disable dark mode.

[1] https://levelup.gitconnected.com/why-dark-mode-causes-more-accessibility-issues-than-it-solves-d2f8359bb46a

[dannycolin]

@dannycolin While I agree, keep in mind that @mattiapontonio does not have a local setup running.
So I try to suggest alternatives for him to start hacking :-)

But they would have too to upstream the changes.

[Ryuno-Ki]

Yes, sure. But you can avoid some back and forth arguments if you can prove, that it's a well-thought out submission.

[dannycolin]

IMO, a userstyle isn't a well-thought out submission :)

[schalkneethling]

toggle-wise, I'd prefer something like https://adrianroselli.com/ has in his footer.

That one is pretty neat. Thank you for sharing

[MJP8]

I use dark-themed GitHub and Monokai color scheme text editor so I also think MDN should have dark theme too.

[vitaly-zdanevich]

Maybe at least we can start with dark theme for code examples, instead of writing a lot of code before deployment.

[ghost]

MDN burns my retinas, a dark mode toggle would be perfect.

[sideshowbarker]

Related request mdn/content#5272

[skeddles]

using this website is painful. it's 2021. add dark mode already.

[rroberrt]

I wrote a little user script that you can use with an addon script manager like Tampermonkey.

This script basically loops over every DOM element, checks its background colour, and if the background colour is brighter than the specified limit, it will apply a formula to it that darkens it.

I guess the biggest problem/concern is—it doesn't seem to be super fast, so there will be a flash of bright content before it gets dark.

It doesn't look fantastic, but it will definitely darken most of the content. (For some reason it won't affect .CodeMirror elements).

Here is the script:

// ==UserScript==
// @name         Dark Mode
// @namespace    http://tampermonkey.net/
// @version      0.0.0-alpha.0
// @description  A user script that darkens websites.
// @author       msfninja
// @include      *
// @grant        none
// @run-at       document-start
// ==/UserScript==

// Hide document while page is loading.
document.documentElement.style.backgroundColor = '#000f';
document.documentElement.style.opacity = '0';

// This variable sets the 'limit' of how bright a colour may be
// (a value from 0 to 255) before it's made darker. The sweetspot
// for a decent dark mode seems to be around 20. Setting it to 0
// will make every element black, and setting it to 255 will have
// no effect.
const max = 20;

// Here you can choose what elements should not be affected. You
// can specify classes, IDs or tag names (in the appropriate
// array, presumably).
const exclude = {
	classNames: [
	],
	ids: [
	],
	tagNames: [
		'input'
	]
};

// Starting from here you should probably not touch anything.

// Threshold after which to darken a colour.
const threshold = Math.pow(max, 3);

const
	// querySelectorAll
	qa = selector => {
		return document.querySelectorAll(selector);
	},

	// Checks for class containment.
	contains = element => {

		// Loop over all class names meant to be excluded.
		exclude.classNames.forEach(className => {

			// Does the supplied element contain an excluded class name?
			if (element.classList.contains(className)) {
				// Return `true`.
				return true;
			}
		});

		// Return `false`.
		return false;
	},

	// Applies a darkening formula to a value.
	darken = value => {
		// Return a reduced value that's below the limit (`max`).
		return Math.round(value / 255) * max;
	},

	// Generates an RGBA string.
	generate = array => {

		// Define colours.
		let
			red = darken(array[0]),
			green = darken(array[1]),
			blue = darken(array[2]),

			// If there's an opacity specified, use it. Otherwise
			// use '1' (maximum opacity).
			alpha = array[3] ? array[3] : '1';

		// Return an RGBA string.
		return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
	};

// The thing that does the whole job.
const main = () => {
	// A CSS string of rules
	let css = `.bc-table, .bc-table * { background-color: #000f !important; color: #ffff !important; }`;

	// Loop over all elements in <body>.
	qa('*').forEach(element => {
		// Is the element concerned not one of the excluded ones?
		if (!(
			contains(element) ||
			exclude.ids.includes(element.id) ||
			exclude.tagNames.includes(element.tagName.toLowerCase())
		)) {
			// Set element's colour to white.
			element.style.color = 'rgba(255, 255, 255, 1)';

			// Define some variables.
			let
				// The background of the current element
				background = window.getComputedStyle(element).backgroundColor,

				// RGBA array of the background's RGBA value
				rgba = background.split(/[\(\))]/)[1].split(', '),

				// The average value of the background
				average = rgba[0] * rgba[1] * rgba[2];

			// Is the average above the threshold?
			if (average > threshold) {

				// Generate an ID.
				let id = `id${Math.random().toString().slice(2)}`

				// Fingerprint the element.
				element.classList.add(id);

				// Add CSS rules.
				css += `.${id} { background-color: ${generate(rgba)} !important; }`;
			}
		}
	});

	// Apply CSS rules.
	let style = document.createElement('style');
	if (style.styleSheet) {
		style.styleSheet.cssText = css;
	}
	else {
		style.appendChild(document.createTextNode(css));
	}
	document.head.appendChild(style);
}

// Wait until body is loaded.
document.body.onload = event => {
	// Call `main`.
	main();

	// Unhide the document.
	document.documentElement.style.opacity = '1';
}

If someone knows how to optimise this code, I'd like to hear.

[rroberrt]

An updated version is available as a gist here. I updated the original code here as well. Most issues I initially described seem to be more or less fixed now?..

[queengooborg]

I'm +1 for a dark theme for any site or service, and I think that any website, program, etc. should offer a dark mode. For one of my web development contracts, I led the development of a user-switchable dark theme, defaulting to the value of the prefers-color-scheme media query. I'd be happy to get this one going if this is something we want to go forward with!

(As a current alternative, I have some custom CSS available at https://userstyles.world/style/1268/mozilla-developer-network-dark-theme -- hope you don't mind the shameless self-plug. :P)

[sgalanb]

Hi, I’ve just released an extension that adds a dark mode (with a toggle to choose between on o off, using localStorage too) for all MDN Web Docs website and has different VS Code based themes. It isn't perfect but it does the job until an official implementation. It's open-source so feel free to pull-request more themes or any feature/bug.

Firefox Browser Add-ons

Chrome Web Apps

Git-Hub repository

[queengooborg]

Just wanted to let everyone know that MDN is planning to incorporate a dark theme into their upcoming redesign, so soon there will be no more need for browser extensions and user CSS!

[Sashank999]

Ok this new design is amazing. The font size used for the code can be a little bit bigger.

[schalkneethling]

Thank you @Sashank999. We are working on improving the typography, scan ability and general legibility.

[rroberrt]

Is there any key combination shortcut to focus on the search bar that you get to see when you click the search icon in the top right corner of the website (see picture below)?

_{(Or is there a more appropriate place to ask this question?)}

[dannycolin]

@msfninja It's / but there's currently a bug preventing it to work if the input is hidden. AFAIK, there's already a patch about to or already merged that should be pushed in production with the next release.

[schalkneethling]

Yes indeed! We will likely ship a fix this week.