Extension talk:DarkMode

Jump to navigation Jump to search

About this board

Last version does not work anymore with skin Chameleon

Emmanuel Touvier (talkcontribs)

The new version is working fine with Vector skin, keeping the dark mode across pages, but there is a regression on my wiki: it does not work anymore with Chameleon skin. It used to work before with both skins.

MusikAnimal (talkcontribs)

It seems Chameleon does not give footer links IDs, so there's no simple way to add listeners to them. We'll have to either come up with a hack, or make the placement of the darkmode toggle configurable. I think the latter is a good idea anyway. I'll look into this soon.

Other skins meanwhile seem to give footer link different IDs, so either way you have identified a cross-skin compatibility issue.

Reply to "Last version does not work anymore with skin Chameleon"

Enable for users who are not logged in

Summary by MusikAnimal

Fixed, but dark mode is still not persistent for logged out users.

NottNott (talkcontribs)

This extension is awesome, thanks so much for making it. Is there a way to enable the Dark Mode toggle for IP users who are not logged in?

Johnywhy (talkcontribs)


R4356th (talkcontribs)
Summary by MusikAnimal

Will not be deployed to the WMF cluster, unfortuantely

Berrely (talkcontribs)

It's about time someone developed a darkmode for MediaWiki, fingers crossed this could come to Wikipedia eventually!

Berot3 (talkcontribs)

True. What do you think how long it could take? I'd say in 10 to 20 years it could be there. (I mean hidden in the beta-features of course.)

Dark mode is lost when navigating to a different page

Summary by MusikAnimal

Fixed for logged in users. Issue still stands for logged out users, but depending on the setup they might have to experience a "flash" on every page load anyway.

Spiros71 (talkcontribs)

Thank you for this extension! I just tried it and when I click Dark Mode on a page it works just fine. However, when moving to another wiki page, the Dark Mode is lost, and I have to click again. MW 1.31, Timeless theme.

Omegatron (talkcontribs)

Same for me. Any resolution?

Cantaloa (talkcontribs)

Yeah, this script has various issues. First, it waits until the user clicks to do anything in the first place. But the Javascript loads too early anyways.

The script should either hook into server/php state or set some css or something. Edit: Cookies were sufficient.

Cantaloa (talkcontribs)

Alright, I just forked their extension and implemented persistent dark-mode support. I'll clean it up and toss it on Github. If I forget to come back to link it, feel free to ping me or comment on my talk page.

Dnsbl1 (talkcontribs)
Cantaloa (talkcontribs)

See if this works: Topic:Vqoyyfiw18jjd5sh -- I made various changes to it, the primary change being to set/unset a darkmode=1 cookie. The benefit of a cookie is that it works for anonymous users (rather than using MediaWiki's state). Feel free to continue the discussion at the topic link.

MusikAnimal (talkcontribs)

@Cantaloa Sorry for the late reply; I wasn't actually watching this page until now. DarkMode was basically a WMF built extension that was abandoned very early on. As you've noticed it is very much incomplete.

It's awesome you got some of the more essential features figured out! Is there any reason why you forked it instead of submitting patches to the original extension?

Cantaloa (talkcontribs)

Yeah, publishing my hasty quickfix was all I had time for.

MusikAnimal (talkcontribs)

Hehe, okay. I just wanted to give you an opportunity to get credit for your work, if you want it! I will need to make the same kind of changes. I have been putting off finishing this extension for so long now, but I would have happily reviewed/merged any patches :) That said, if you don't have Gerrit set up and all that, I can certainly sympathize with avoiding the learning curve.

Cantaloa (talkcontribs)

I certainly don't need credit as 99.9% of the work is pushing a release, not the trivial tweak I came up with; work I'm very generously offering you ;) As a final note, iirc, I found out through people asking for help with theme breakage that applying the CSS `filter` (like the invert() rule) to `<body>` will make downstream `position: fixed` dom nodes base their position off `<body>` instead of `:root` (`<html>`). The simplest fix is to move the `darkmode` class toggle from `<body>` to `<html>` which has a nice API through an unstable feature only available since one of the MW releases since I posted in this thread, so look out for that (https://doc.wikimedia.org/mediawiki-core/master/php/classOutputPage.html#a6a34e78b9018c807dc53e13b4c4111e5). Quick, obvious reminder of what that fix would look like: https://github.com/danneu/MediaWiki-DarkMode/issues/1#issuecomment-772003944 -- Good luck. This is all I had time for. I may have time in the coming weeks to field test this on my own at least.

MusikAnimal (talkcontribs)

Indeed, OutputPage::addHtmlClasses() was added by yours truly in preparation for finishing DarkMode :) See the discussion there for why it's marked as unstable (basically dark mode is the only use case for it). That was the tiny bit of work I actually did do in my free time after the project was abandoned by WMF. I didn't realize DarkMode was being used by so many people, much less people who had forked and "finished" it. But so long as you're okay with me copying your code, I will! I hope to get to this soon, but please don't ever hesitate to contribute directly either should you want to. (talkcontribs)

I see the the config section mentions 'mw-no-invert' and 'darkmode' classes you can add to your CSS so not everything is inverted, but neither of these seem to do anything for me. Is there another way? I like the dark mode option but some of my infobox colors and images that are inserted through CSS take away from the look when they're inverted and I'd like to keep them the same or add a dark-mode specific color. (talkcontribs)

Up, I don't get it too to be honest (talkcontribs)

Ok found it from a topic about some "less to css", actually you should not prefix with ".darkmode" but with ".client-dark-mode". Example for the main wiki logo :

/* Exclude logo to be change with or without DarkMode */

.client-dark-mode .mw-wiki-logo {

filter: invert( 1 ) hue-rotate( 180deg );


Enjoy :)

Reply to "Styling options?"
Patrik L. (talkcontribs)

@MusikAnimal Hello, is there any way to test dark mode if I have not own wiki? I want test it. Thanks.

Reply to "Testing"

Request about keeping dark mode on moving to other pages

Summary by Atmark-chan
Atmark-chan (talkcontribs)

I sometimes use this function in other wikis; Thank you!

I think it is better that it can keep dark mode on moving to other page if dark mode has turned on. Could you implement that? I expect it is possible with cache or something.

Atmark-chan (talkcontribs)
There are no older topics