How do I add dark mode to a Miraheze wiki using CSS and JS?

[proud notch]

Hello, a few months back I've been struggling to implement dark mode to a Miraheze wiki that I'm admin on.

I tried to use this method but it didn't work: https://meta.weirdgloop.org/w/Themes
This is the dark mode skin I used: https://poupedia.com/MediaWiki:Vector-theme-dark.css

I'm not talking about the DarkMode extension though, I tried to use JavaScript and gadgets to implement a button to try to switch/toggle light and dark themes, but the switch didn't work functionally.

How do I implement this feature to the wiki?

[rocky escarp]

I would highly recommend that you use an extension rather than use JS, because the extension will load much faster than custom JS. Whether that's Theme or DarkMode that's up to you

Now on this wiki I couldn't find a button to switch themes, but I did find the option in preferences (using the themes built into Vector), which gave me a page that looked like this image

[trim fjord]

[[mw:Extension:ThemeToggle]] was added to Miraheze recently, it can be used as better alternative to dark mode, although themes have to be defined manually in CSS, preferably w/ variables, and switch button/dropdown carry wiki.gg styling
pizzatower.wiki on mira uses it, for example

[keen heron]

https://www.mediawiki.org/wiki/Extension:ThemeToggle

[trim fjord]

also Vector 2022 has native night mode and I believe it can be set as default via php settings file, but it has to be requested via [[Phorge]]

[keen heron]

https://meta.miraheze.org/wiki/Phorge

[trim fjord]

[[mw:Skin:Vector 2022]]

[keen heron]

https://www.mediawiki.org/wiki/Skin:Vector_2022