User:Sameerhameedy/Gadget-dark-mode-toggle-pagestyles.css

Note: You may have to bypass your browser’s cache to see the changes. In addition, after saving a sitewide CSS file such as MediaWiki:Common.css, it will take 5-10 minutes before the changes take effect, even if you clear your cache.

Mozilla / Firefox / Safari: hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (Command-R on a Macintosh);
Konqueror and Chrome: click Reload or press F5;
Opera: clear the cache in Tools → Preferences;
Internet Explorer: hold Ctrl while clicking Refresh, or press Ctrl-F5.

This style sheet lacks a documentation subpage. Please create it.

Useful links: root page • root page’s subpages • links • redirects • your own

/* Fixes for empty icons in Vector 2022 and Minerva */
.mw-ui-icon-vector-gadget-pt-darkmode,
.mw-ui-icon-vector-gadget-pt-darkmode-sticky-header,
.minerva-icon-portletlink-pt-darkmode {
	background-image: url(https://en.wikipedia.org/w/load.php?modules=oojs-ui.styles.icons-accessibility&image=moon);
}

.minerva-icon-portletlink-pt-darkmode {
	opacity: 0.65;
}

.client-dark-mode .mw-ui-icon-vector-gadget-pt-darkmode,
.client-dark-mode .mw-ui-icon-vector-gadget-pt-darkmode-sticky-header,
.client-dark-mode .minerva-icon-portletlink-pt-darkmode {
	background-image: url(https://en.wikipedia.org/w/load.php?modules=oojs-ui.styles.icons-accessibility&image=bright);
}

/* These same rules should also be in [[MediaWiki:Gadget-dark-mode.css]] but with higher specificity. */
.skin-vector-legacy :not(#pt-darkmode) + #pt-watchlist::before,
.skin-monobook :not(#pt-darkmode) + #pt-watchlist::before {
	content: "Dark mode";
	visibility: hidden;
	margin-left: inherit;
}