Template:B9s LED table/styles.css

.b9s-table {
	text-align: center;
	
	--loaded-l:  #c8ffc8;
	--missing-l: #ffc8c8;
	--corrupt-l: #c8c8ff;
	
	--loaded-d:  #4b804b;
	--missing-d: #804b4b;
	--corrupt-d: #4b4b80;
	
	--loaded:  var(--loaded-l);
	--missing: var(--missing-l);
	--corrupt: var(--corrupt-l);
}

@media screen and (prefers-color-scheme: dark) {
	/* only timeless has a dark theme skin right now */
	body.skin-timeless .b9s-table {
		--loaded:  var(--loaded-d);
		--missing: var(--missing-d);
		--corrupt: var(--corrupt-d);
	}
}

html.skin-citizen-dark .b9s-table {
	--loaded:  var(--loaded-d);
	--missing: var(--missing-d);
	--corrupt: var(--corrupt-d);
}

html.skin-citizen-dark .b9s-table td {
	padding: 10px; /* default padding is 10px 20px 10px 0 but it looks weird with bg colors */
}

.b9s-loaded  { background-color: var(--loaded)  }
.b9s-missing { background-color: var(--missing) }
.b9s-corrupt { background-color: var(--corrupt) }