Dark mode for the MDN site would be awesome

MDN
#1

Hi there. My first post here. I’ve searched the site but didn’t find another topic on this issue. I’m sure lots of people would appreciate if we could have a toggle in a corner, on the MDN site (https://developer.mozilla.org), to switch to a dark mode UI. This would be great when you want to study a subject on the MDN site, especially when it’s a bit later in the evening.

Some websites like Ars Technica offer this choice out of the box, I wonder if it’s possible to get a simple dark mode for a start. I know this might complicate some issues with images and graphics that were made for a light background, but at least we could have a better reading experience for mostly text-based articles.

5 Likes
#2

Since this will require changes to Kuma core, you should open a bug on https://bugzilla.mozilla.org, or politely ask @jwhitlock to do it for you.

#3

There is already a bug, that we’ve marked “WONTFIX”: https://bugzilla.mozilla.org/show_bug.cgi?id=1427452

1 Like
#4 
There are some user style sheet solutions floating around you can use: [https://userstyles.org/styles/139747/a-mdn-darkly](https://userstyles.org/styles/139747/a-mdn-darkly)

I believe Stly-us is the current favourite custom styles extension. (Stylish was pulled from the
marketplace for violation of data practices. I believe Stly-us is the current favourite custom styles extension.)


S.
1 Like
#5

Yeah, that’s the problem. I would have made my own stylesheet, but I try to avoid installing any extensions, unless they are open-source or I wrote them myself.

I suppose this decision to have a dark mode should have been made right from the start, when the MDN site was re-themed. Now it might be too late and costly to re-process all the assets to adapt them to a dark background with light text.

Will take a look at Stly-us and see if it can be a solution in this case.

Thanks.

#6

Dolan, it’s also that that makes almost every part of front-end dev automatically more expensive, because you have to implement and test both themes

1 Like
#7

I would absolutely love a dark mode. studying at night fries my brain and eyes. I googled this topic to see if there was a dark mode and thats how i found this.

1 Like
#8

This is pretty old now, but I made a chrome extension because this bothered me so much… Not sure if it’s cool to post it here or not - to mods, I apologize in advance if not

#9

+1 here from me
dark mode is easy on eye for people like me who stay on there screen for long time on daily base

have a nice day everyone :slight_smile:

1 Like
#10

@lndrcrvlh totally happy for you to share this here. We’d love a dark mode on MDN, but with a small dev team and limited timescales, it is unfortunately something that never finds its self at the top of the priority list.

2 Likes
#11

Aware this is old, but thought I’d throw in another workaround. In Chrome or Edge you can force dark mode on every site using:

    # Chrome
    chrome://flags -> Force Dark Mode for Web Contents

    # Edge:
    edge://flags -> Force Dark Mode for Web Contents

This works surprisingly well for MDN, the downside is that this is not a per site setting. You will likely want to turn this off once you’re done.

This feature is not yet available in Firefox as far as I am aware.

1 Like
#12

c’mon this is 2021, dark theme please.

#13

Unfortunately, there’s not much action. In the discussion user “queengooborg” posts a link to a user style sheet they created: https://userstyles.world/style/1268/mozilla-developer-network-dark-theme

Cheers,
Michael

1 Like
Creating optional Dark Mode for developers and learners
#14

The Chrome Dark Mode extension worked for me:
https://chrome.google.com/webstore/detail/dark-mode/dmghijelimhndkbmpgbldicpogfkceaj?hl=en

#15

Hi, since @lndrcrvlh extension seems to be abandoned, I’ve just released my own one that also adds a dark mode for all MDN Web Docs website and has different VS Code based themes. It’s open-source.

Firefox Browser Add-ons link: https://addons.mozilla.org/es/firefox/addon/mdn-dark-mode/

Chrome Web Apps link: https://chrome.google.com/webstore/detail/mdn-dark-mode/jdaepiaaanhlmgoehjnnkhiagfkalhoc

Git-Hub repo: https://github.com/sgalanb/MDN-Dark-Mode

1 Like
#16

Hey, Dolan. Check out the new MDN. Welcome to Dark mode.

3 Likes
#17

Thanks. This is good news, it’s a lot more usable now.
The site also seems superfast now, awesome

2 Likes
#18

Since the dark mode is now officially supported on MDN, will the other Mozilla pages (such as firefox.com, addons.mozilla.org, support.mozilla.org) be receiving their own dark themes?

To my knowledge addons (e.g. Dark Reader) aren’t allowed to run on the Mozilla-owned domains (there has been a partial* about:config override, which I didn’t immediately find).

*doesn’t affect at least the Firefox addons website, presumably hard-coded

1 Like