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;
		}
	}

	.mw-header-menu-drawer-container {
		.mw-nav-links,
		.mw-user-links {
			a {
				&:hover {
					background-color: @dark-bg-60;
					color: @dark-text-90 !important;
				}

				&:active,
				&:focus {
					color: @dark-text-100 !important;
					background-color: @accent-10;
				}
			}
		}
	}

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

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

	.mw-header-menu-drawer {
		background: @dark-bg-40;
	}

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

	.suggestions-dropdown,
	#site-search #search-form #search-input {
		background: @dark-bg-50 !important;
	}

	.mw-header-menu-drawer-container .mw-header-banner,
	.mw-header-menu-drawer-container .mw-user-links #p-personal {
		border-color: @dark-bg-50;
	}

	.suggestion-link,
	#site-search #search-form #search-input {
		border-color: @dark-bg-60;
	}

	#site-search #search-toggle-icon-container #search-toggle-icon,
	#site-search > input:checked:hover ~ #search-toggle-icon-container #search-toggle-icon {
		border-color: @base-100;
	}

	.mw-header-menu-toggle span,
	#site-search #search-toggle-icon-container #search-toggle-icon:before,
	#site-search #search-toggle-icon-container #search-toggle-icon:after {
		background: @base-100;
	}

	.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,
	.mw-header-menu .mw-wiki-title,
	.mw-header-menu-drawer-container h3 {
		color: @dark-text-100;
	}

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

	.suggestion-link.active {
		background-color: @accent-10;
	}

	.suggestion-link.active .suggestion-title {
		color: @accent-90;
	}

	.mw-body-content #contentSub,
	.mw-body-content #contentSub2,
	.mw-body #siteSub,
	table.wikitable tr th,
	.mw-header-menu-drawer-container .mw-nav-links a,
	.mw-header-menu-drawer-container .mw-user-links a,
	.mw-body-content #mw-content-text .mw-parser-output #toc a:hover,
	.suggestion-description {
		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-header-menu-drawer-container .mw-nav-links a:after,
	.mw-header-menu-drawer-container .mw-user-links a:after,
	.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 );
	}

	.suggestion-placeholder {
		.suggestion-title,
		.suggestion-description {
			background: @dark-bg-20;
			background: linear-gradient( to right, @dark-bg-40 8%, @dark-bg-30 38%, @dark-bg-40 54% );
		}
	}

	.mw-header-container:before {
		box-shadow: 0 0 50px @header-height @dark-bg-0;
	}

	.mw-header-menu-toggle span,
	#site-search #search-toggle-icon-container #search-toggle-icon {
		opacity: 0.4;
	}

	.mw-header-menu input:hover ~ .mw-header-menu-toggle > span,
	#site-search #search-toggle:hover ~ #search-toggle-icon-container #search-toggle-icon {
		opacity: 0.6;
	}

	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;
			}
		}
	}
}