Template:ダークモード互換/styles.css

/* Default */
.vp-darkmode {
	border: 1px solid #a2a9b1;
	background-color: var(--background-color-neutral-subtle, #f8f9fa);
	color: var(--color-base, #202122);
}

/* Lime */
.vp-darkmode-lime {
	background-color: #edffed;
}
.vp-darkmode-lime:not(.vp-darkmode-defaultborder) {
	border-color: #00af89;
}

/* Green */
.vp-darkmode-green {
	background-color: #C7F2C7;
}
.vp-darkmode-green:not(.vp-darkmode-defaultborder) {
	border-color: #008000;
}

/* Yellow */
.vp-darkmode-yellow {
	background-color: #FFFFD9;
}
.vp-darkmode-yellow:not(.vp-darkmode-defaultborder) {
	border-color: gold;
}

/* Orange */
.vp-darkmode-orange {
	background-color: #ffe7ce;
}
.vp-darkmode-orange:not(.vp-darkmode-defaultborder) {
	border-color: #f28500;
}

/* Red */
.vp-darkmode-red {
	background-color: #ffdbdb;
}
.vp-darkmode-red:not(.vp-darkmode-defaultborder) {
	border-color: #b32424;
}

/* Skyblue */
.vp-darkmode-skyblue {
	background-color: #F3F9FF;
}
.vp-darkmode-skyblue:not(.vp-darkmode-defaultborder) {
	border-color: #88C3FE;
}

/* Blue */
.vp-darkmode-blue {
	background-color: #dfe8ff;
}
.vp-darkmode-blue:not(.vp-darkmode-defaultborder) {
	border-color: #36c;
}

/* Purple */
.vp-darkmode-purple {
	background-color: #e4d8ff;
}
.vp-darkmode-purple:not(.vp-darkmode-defaultborder) {
	border-color: #9932cc;
}

/* For preference-originating dark mode */
@media screen {
	html.skin-theme-clientpref-night .vp-darkmode-skyblue {
		background-color: #0d243c;
	}
	html.skin-theme-clientpref-night .vp-darkmode-red {
		background-color: #390000;
	}
	html.skin-theme-clientpref-night .vp-darkmode-orange {
		background-color: #412100;
	}
	html.skin-theme-clientpref-night .vp-darkmode-lime {
		background-color: #204220;
	}
	html.skin-theme-clientpref-night .vp-darkmode-green {
		background-color: #002400;
	}
	html.skin-theme-clientpref-night .vp-darkmode-yellow {
		background-color: #452d00;
	}
	html.skin-theme-clientpref-night .vp-darkmode-purple {
		background-color: #13003d;
	}
	html.skin-theme-clientpref-night .vp-darkmode-blue {
		background-color: #001830;
	}
}

/* For OS-originating dark mode */
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .vp-darkmode-blue {
		background-color: #001830;
	}
	html.skin-theme-clientpref-os .vp-darkmode-purple {
		background-color: #13003d;
	}
	html.skin-theme-clientpref-os .vp-darkmode-lime {
		background-color: #204220;
	}
	html.skin-theme-clientpref-os .vp-darkmode-green {
		background-color: #002400;
	}
	html.skin-theme-clientpref-os .vp-darkmode-yellow {
		background-color: #452d00;
	}
	html.skin-theme-clientpref-os .vp-darkmode-orange {
		background-color: #412100;
	}
	html.skin-theme-clientpref-os .vp-darkmode-red {
		background-color: #390000;
	}
	html.skin-theme-clientpref-os .vp-darkmode-skyblue {
		background-color: #0d243c;
	}
}