Template:Infobox chip/styles.css

.infobox {
	--giga-chip-background-light: #f7cee7;
	--mega-chip-background-light: #adefef;
	--dark-chip-background-light: #b58cd6;
	--giga-chip-background-dark: #63535D;
	--mega-chip-background-dark: #486363;
	--dark-chip-background-dark: #544163;
}

html.skin-citizen-light .infobox {
	--giga-chip-background: var(--giga-chip-background-light);
	--mega-chip-background: var(--mega-chip-background-light);
	--dark-chip-background: var(--dark-chip-background-light);
}

html.skin-citizen-dark .infobox {
	--giga-chip-background: var(--giga-chip-background-dark);
	--mega-chip-background: var(--mega-chip-background-dark);
	--dark-chip-background: var(--dark-chip-background-dark);
}

@media (prefers-color-scheme: light) {
html.skin-citizen-auto .infobox {
	--giga-chip-background: var(--giga-chip-background-light);
	--mega-chip-background: var(--mega-chip-background-light);
	--dark-chip-background: var(--dark-chip-background-light);
}
}

@media (prefers-color-scheme: dark) {
html.skin-citizen-auto .infobox {
	--giga-chip-background: var(--giga-chip-background-dark);
	--mega-chip-background: var(--mega-chip-background-dark);
	--dark-chip-background: var(--dark-chip-background-dark);
}
}

.infobox.chip-class-giga {
	background: var(--giga-chip-background);
}

.infobox.chip-class-mega {
	background: var(--mega-chip-background);
}

.infobox.chip-class-dark {
	background: var(--dark-chip-background);
}