Extension talk:DarkMode

gadget:dark-mode.css is available

I don't see an option to enable a dark mode in "VECTOR-2022" theme on www.mediawiki.org.

Is this option no longer supported?

add @import "https://en.wikipedia.org/w/index.php?title=MediaWiki:Gadget-dark-mode.css&action=raw&ctype=text/css"; to special:mypage/common.css and reload

This solution help resolving my problem.

Thanks :)

Hi, when I navigate to my mediawiki installation, I can see the Darkmode toggle but I have to click it to change to dark mode. If I log out, the wiki changes back to light mode. Is there any way to always make Darkmode the default logged in or out? Thank you.

Basically yes.

Developers might create a cookie which is bound to browser profile and would memorize last state until cookies are deleted or browser account or device is changed or preference is explicitly set again.

so, what's the solution to make it works? I am not familliar with php programming

This extension does not work on mobile sites.

To be more specific, first of all, there is no button to enable or disable dark mode on the mobile site, and even if you log in with the same account and turn it on on the desktop site, it will not apply to mobile.

Can confirm. Does not work on mobile. Disappointing.

I could manage to make it work with the skin Minerva but it is limited to $wgDarkModeTogglePosition = 'personal'.

In the DarkMode extension folder, go to includes and open the file Hooks.php. On line 179, change

"return $skin->getSkinName() !== 'minerva';"

with

return $skin->getSkinName() !== 'minervaXX';

Though I would appreciate some feedback from the devs.

Where is the right place to ask about installing the extension on new wikis?

I don't think it will be deployed on WMF wikis. Vector 2022 will soon have a dark mode option. For other skins, you'll have to rely on the gadget counterpart if it's available on said wiki.

Aha, thanks! How to get the gadget installed here / on Meta?

Just ask wiki admins to create those six MediaWiki: namespace pages?

I couldn't find any open Phab ticket about this. I think that the specifics of [soon] and implementation details of the option will leave dm-enthusiasts using the current gadget for a while.

On Meta, we should probably propose it first at m:Babel. Barring objections I can install it there. mediawiki.org doesn't have much of a "community" for things like this, so I might be bold and just install it. It's an opt-in gadget, after all.

As CSS and JS it should be possible to use this either as a gadget only (no install) or as a user script and css, but how? Tye js needs modifying to do this.

You can set it up like it's done on English Wikipedia. See w:Wikipedia:Dark mode (gadget) for instructions.

There seems to be quite a bit of divergence between the gadget and the extension. Maybe something can be done to sync them?

• The gadget CSS has received a bunch of edits, some requested after MusikAnimal's last edit: https://en.wikipedia.org/w/index.php?title=MediaWiki%3AGadget-dark-mode.css&diff=1172905668&oldid=1101625928
• The extension CSS has got 6 new commits in 2023
• The gadget JS is, well, a lot less functional than the extension thing which has an icon, but I suppose whether to change it would require a discussion

I found the images or elements with mw-no-invert class are still slightly color-altered. I looked into it and found the two hue-rotate(180deg) did not exactly return to the original color. invert() does not influence this.

See this example.

"filter: unset" should return it to normal. Definitely should be a configuration option though.

filter: unset equals to filter: none. It does not remove filters applied by parent elements.

Apologies; I meant to apply "filter: unset" on the root element where the original filter is set. Then you can implement your own class (.client-darkmode .invertible) on elements you want to invert - if you were wanting any to be inverted in the first place.

I ended up just ditching the built-in resources/ext.DarkMode.less file altogether and making my own for that very reason, but also to maintain more control (example).

I installed it to extensions and added the following in LocalSettings.php

wfLoadExtension( 'DarkMode' );

The Darkmode shows up but when I click it all it does is adds a # to the end of the url.

It also does not change to Default

Thanks.

What MediaWiki version, browser, and skin are you using? It sounds like a JavaScript error. See w:WP:JSERROR on how to report those.

Mediawiki 1.39.1

Firefox 112.0.2 (64-bit)

vector

The resource from “<url that it won't let me post>/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)

Thanks

Hi,

I try today this extension and non-logged users have to toggle in dark mode at each page. Is there a fix to that problem ?

Regards

Please see Topic:Wpakcrc34z4v9qmc; a cookie might memorize the last used preference, for both registered and anonymous users.

Hi,

in darkmode, the logo of the wiki is in negative photo mode. How can I fix this ?

Regards

Fixed

Hi, I was using the DarkMode extension recently and I am not really sure why the two bottom corners always remain white.

(for more context: if a page is longer and you have to scroll, the left and right sides cut from dark to white at some point)

I searched everywhere but didn't find anything documenting this.

Installed software

Product	Version
MediaWiki	1.39.0
PHP	8.1.8 (fpm-fcgi)
MariaDB	10.7.7-MariaDB
ICU	67.1
Lua	5.1.5
Pygments	2.11.2

Extension	Version	License	Description	Authors
DarkMode	0.2.0 (2c6c85b) 21:21, 5 December 2022	MIT	A toggleable dark mode for the MediaWiki user interface	MusikAnimal and R4356th

I can see the same behaviour on example wiki at https://meta.miraheze.org/wiki/Miraheze when toggling on dark mode.

Thanks

Sorry to bring this up but I am also having this same problem on my wiki and I have not found a solution to the problem, I am still having this problem.

It wasn't obvious at first but nl6720 posted the fix here

You have to add the following code here to your MediaWiki:Common.css

/* Work around a bug in Extension:DarkMode where it sets the background color to
 * black and then inverts it.
 */
@media screen {
	html.client-darkmode {
		/* body-background-color from https://github.com/archlinux/archwiki/blob/master/extensions/ArchLinux/modules/arch_definitions.less */
		background-color: #f6f9fc;
	}
}