MediaWiki:Gadget-Colortable.css

.colortable { --green-l: #a7f6b0; --red-l: #fabfb9; --blue-l: #bfd4ff; --yellow-l: #fff9ac; --green-d: #30623c; --red-d: #5c312e; --blue-d: #383477; --yellow-d: #5e5324; --green: var(--green-l); --red: var(--red-l); --blue: var(--blue-l); --yellow: var(--yellow-l); }

@media screen and (prefers-color-scheme: dark) { /* only timeless has a dark theme skin right now */ /* citizen is not here because it manages dark theme itself; adding it here will conflict with its light theme */ body.skin-timeless .colortable { --green: var(--green-d); --red: var(--red-d); --blue: var(--blue-d); --yellow: var(--yellow-d); } }

html.skin-citizen-dark .colortable { --green: var(--green-d); --red: var(--red-d); --blue: var(--blue-d); --yellow: var(--yellow-d); }

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

.ct-green { text-align: center; background-color: var(--green)  } .ct-red   { text-align: center; background-color: var(--red) } .ct-blue  { text-align: center; background-color: var(--blue) } .ct-yellow { text-align: center; background-color: var(--yellow) }