Template:Cards/styles.css

/* {{pp-template}} */
.blacksuits, .clubs, .spades {
	color: black;
}

.redsuits, .diamonds, .hearts {
	color: red;
}

/* Dark mode fixes - padding prevents black text touching background */
@media screen {
	html.skin-theme-clientpref-night .blacksuits,
	html.skin-theme-clientpref-night .clubs,
	html.skin-theme-clientpref-night .spades,
	html.skin-theme-clientpref-night .playingcards {
		padding-left: 0.2em;
		padding-right: 0.2em;
		border-radius: 0.2em;
		background: white;
		color: black;
	}

	html.skin-theme-clientpref-night .redsuits,
	html.skin-theme-clientpref-night .diamonds,
	html.skin-theme-clientpref-night .hearts {
		padding-left: 0.2em;
		padding-right: 0.2em;
		border-radius: 0.2em;
		background: white;
		color: red;
	}
}

@media screen and ( prefers-color-scheme: dark ) {
	html.skin-theme-clientpref-os .blacksuits,
	html.skin-theme-clientpref-os .clubs,
	html.skin-theme-clientpref-os .spades,
	html.skin-theme-clientpref-os .playingcards {
		padding-left: 0.2em;
		padding-right: 0.2em;
		border-radius: 0.2em;
		background: white;
		color: black;
	}

	html.skin-theme-clientpref-os .redsuits,
	html.skin-theme-clientpref-os .diamonds,
	html.skin-theme-clientpref-os .hearts {
		padding-left: 0.2em;
		padding-right: 0.2em;
		border-radius: 0.2em;
		background: white;
		color: red;
	}
}