mediawiki-skins-Citizen/resources/components/darkmode.less

//
// Citizen - Dark mode Styles
// https://starcitizen.tools
//

@media ( prefers-color-scheme: dark ) {
	html,
	body {
		background: @dark-bg-0;
		color: @dark-text-90;
	}

	::-webkit-scrollbar-thumb {
		background-color: @dark-bg-60;
	}

	* {
		scrollbar-color: @dark-bg-60 transparent;
	}

	pre,
	code,
	.mw-code {
		color: @dark-text-90;
		background-color: @dark-bg-10;
		border: 1px solid @dark-bg-20;
	}

	input,
	select,
	textarea {
		border: 1px solid @dark-bg-50;
		background: @dark-bg-40;
		color: @dark-text-80;
	}

	fieldset {
		color: @dark-text-90;
		border-color: @dark-bg-20;
	}

	legend {
		color: @dark-text-100;
	}

	a,
	a:visited,
	a.external,
	.mw-body-content #mw-content-text .mw-parser-output #toc li.active {
		color: @dark-color-link;
	}

	a.new {
		color: @dark-color-link-new !important;
	}

	.catlinks .mw-normal-catlinks > ul li a {
		background-color: @dark-bg-10;
		border-color: @dark-bg-10;
	}

	#p-namespaces ul li a {
		background-color: @dark-bg-10;
		border-color: @dark-bg-20;

		&:hover {
			background-color: @dark-bg-20;
		}
	}

	table.wikitable tr:hover {
		background-color: @dark-bg-10;
	}

	table.wikitable tr th,
	table.wikitable tr td {
		border-color: @dark-bg-20;
	}

	#page-tools #p-actions ul {
		background: @dark-bg-50;
	}

	.mw-body .firstHeading,
	.mw-body-content h1,
	.mw-body-content h2,
	.mw-body-content h3,
	.mw-body-content h4,
	.mw-body-content h5,
	.mw-body-content h6 {
		color: @dark-text-100;
	}

	table.wikitable {
		color: @dark-text-90;
	}

	.mw-body-content #contentSub,
	.mw-body-content #contentSub2,
	.mw-body #siteSub,
	table.wikitable tr th,
	.mw-body-content #mw-content-text .mw-parser-output #toc a:hover {
		color: @dark-text-80 !important;
	}

	.mw-body-content #mw-content-text .mw-parser-output #toc li.active a,
	.mw-body-content #mw-content-text .mw-parser-output #toc li.active li {
		color: @dark-text-80;
	}

	a.mw-wiki-title,
	.mw-body-content #mw-content-text .mw-parser-output #toc a {
		color: @dark-text-70;
	}

	.mw-body-content #mw-content-text .mw-parser-output #toc {
		color: @dark-text-60;
	}

	#page-tools #p-views li > a:after,
	#page-tools #p-actions:before,
	.mw-editsection > a:before,
	#pt-notifications-alert .mw-echo-notifications-badge:before,
	#pt-notifications-notice .mw-echo-notifications-badge:before,
	#p-namespaces ul li a:after {
		filter: invert( 1 );
	}

	ol.references li:target,
	sup.reference:target {
		background-color: @accent-10;
	}
}

@media only screen and ( max-width: 1450px ) and ( prefers-color-scheme: dark ) {
	.mw-body-content #mw-content-text .mw-parser-output #toc {
		background: @dark-bg-40;

		.toctoggle a {
			background-color: @dark-bg-50;

			&:before {
				filter: invert( 1 );
			}

			&:hover,
			&:focus {
				background-color: @accent-10;
			}
		}
	}
}