MediaWiki:Gadget-DarkToggle.js: Difference between revisions

MediaWiki:Gadget-DarkToggle.js (view source)

Revision as of 20:26, March 3, 2025

321 bytes added , 1 month ago

m

no edit summary

Porplemontage

Bureaucrats, Developers, Administrators

14,139

edits

@@ Line 43: / Line 43: @@
 	var isDark = false;
 	var toggleText = 'Dark mode';
-	var footerList = $(':is(#f-list, #footer-places)');
 	if (getCookie('darkTheme') == 'on' || !getCookie('darkTheme') && window.matchMedia('(prefers-color-scheme: dark)').matches) {
 		toggleText = 'Light mode';
@@ Line 49: / Line 48: @@
 	}
-	if (mw.config.get('skin') == 'nimbus')
+	if (mw.config.get('skin') == 'nimbus') {
-		$('#wiki-login').prepend('<div id="toggleContainer" style="float:left;position:relative;right:5px;cursor:pointer"><img id="themeToggle" src="https://wiki.gallery/images/dark/moon/' + (isDark ? 'yellow' : 'white') + '.png" title="Toggle night theme"/></div>');
+		$('#wiki-login').prepend('<div id="toggleContainer" style="float:left"><a id="toggleLink" href="javascript:;" title="Toggle night theme"><img id="toggleImage" src="https://wiki.gallery/images/dark/moon/' + (isDark ? 'yellow' : 'white') + '.png"/></a></div>');
-	else if (mw.config.get('skin') == 'minerva')
+	} else if (mw.config.get('skin') == 'minerva')
-		footerList.after('<ul id="toggleContainer" class="minerva-toggle hlist"><li><a id="themeToggle" href="javascript:;">Toggle night theme</a></li></ul>');
+		$('#footer-places').after('<ul id="toggleContainer" class="minerva-toggle hlist"><li><a id="toggleLink" href="javascript:;">Toggle night theme</a></li></ul>');
-	else
+	else if (mw.config.get('skin') == 'timeless')
-		footerList.append('<li id="toggleContainer"><a id="themeToggle" href="javascript:;">' + toggleText + '</a></li>');
+		$('#footer-places').append('<li id="toggleContainer"><a id="toggleLink" href="javascript:;">' + toggleText + '</a></li>');
+	else {
+		$(':is(#p-personal ul, #p-vector-user-menu-overflow ul)').prepend('<li id="toggleContainer" class="mw-list-item"><a id="toggleLink" href="javascript:;" title="Toggle night theme"><img id="toggleImage" src="https://wiki.gallery/images/dark/moon/' + (isDark ? 'yellow' : 'white') + '.png"/></a></li>');
+	}
-	$('#themeToggle').click(function() {
+	$('#toggleLink').click(function() {
 		if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
 			if (isDark)