>Synpath: Moving header/label/data call colouring to stylesheet with dark mode

2025-02-09T01:33:26Z

Moving header/label/data call colouring to stylesheet with dark mode

New page

.infobox-chromosome .infobox-header {
background-color: #ddd;
}
.infobox-chromosome .infobox-label {
background-color: #e7dcc3;
}
.infobox-chromosome .infobox-data {
background-color: #eee;
}

/* dark mode has an infobox-specific selector that sets th and td background and
* text colouring to a default white on black. The only ways to opt out of this
* colouring is via the !important tag or the notheme class. The notheme class
* also sets the colour scheme back to light and for whatever reason I can't
* use this stylsheet to set color-scheme back to dark. !important it is then
*/
@media screen {
html.skin-theme-clientpref-night .infobox-chromosome .infobox-header {
background-color: #404244 !important;
}
html.skin-theme-clientpref-night .infobox-chromosome .infobox-label {
/* !important req. to override dark mode theming;
* notheme cannot be applied to the th.infobox-label as
* Module:Infobox currently does not support it (08-02-2025)
*/
background-color: #3b3018 !important;
}
html.skin-theme-clientpref-night .infobox-chromosome .infobox-data {
background-color: #27292d !important;
}
}

/* dark mode opt in via OS (auto) */
/* see styling comments above */
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .infobox-chromosome .infobox-header {
background-color: #404244 !important;
}
html.skin-theme-clientpref-os .infobox-chromosome .infobox-label {
background-color: #3b3018 !important;
}
html.skin-theme-clientpref-os .infobox-chromosome .infobox-data {
background-color: #27292d !important;
}
}

Template:Infobox chromosome/styles.css - Revision history

>Synpath: Moving header/label/data call colouring to stylesheet with dark mode