I am an admin on the Girl Genius (GG) wiki:
https://girlgenius.fandom.com/wiki/Girl_Genius_Wiki
I am trying to apply different background colors to certain table cells depending on whether the wiki is being viewed using light or dark mode. I am attempting to define my own CSS custom properties (aka CSS variables). I am using information from the page Help:FandomDesktop conversion guide:
https://community.fandom.com/wiki/Help:FandomDesktop_conversion_guide#Theme-specific_selectors
I am placing my CSS in the "MediaWiki:Fandomdesktop.css" page for the GG wiki:
https://girlgenius.fandom.com/wiki/MediaWiki:Fandomdesktop.css
I am using the theme selectors from the conversion guide page:
Here is my code:
.theme-fandomdesktop-dark {
/* colored boxes for chronology tables, dark version using CSS custom properties aka CSS "variables" */
--gg-chron-names-used-heading: #626255;
--gg-chron-names-used-field: #686855;
--gg-chron-text-heading: #847C7C;
--gg-chron-text-field: #886C6C;
--gg-chron-extras-heading: #778484;
--gg-chron-extras-field: #4B6060;
}
.theme-fandomdesktop-light {
/* colored boxes for chronology tables, light version using CSS custom properties aka CSS "variables" */
--gg-chron-names-used-heading: #EBEBCC;
--gg-chron-names-used-field: #FFFFCC;
--gg-chron-text-heading: #D6CCCC;
--gg-chron-text-field: #FFCCCC;
--gg-chron-extras-heading: #CCE0E0;
--gg-chron-extras-field: #CCFFFF;
}
I am trying to access these variables in a template used to create the table. Previously this template had hex codes where I place the var () function calls.
<includeonly>{|class="wikitable" border="2" cellspacing="0" cellpadding="2px" style="border-collapse:collapse;"
|- style="background:lightgrey; font-size:90%;"
! rowspan="4" valign="top" | Identifier<br> Page
! colspan="3" | Characters
|- style="background:lightgrey; font-size:90%;"
! colspan="3" | Actions
|- style="background:lightgrey; font-size:90%;"
! colspan="3" | Quotes
|-style="font-size:90%;"
! style="background: var(--gg-chron-names-used-heading);" | Names Used
! style="background: var(--gg-chron-text-heading);" | Text
! style="background: var(--gg-chron-extras-heading);" | Extras</includeonly>
Despite my efforts, the cells I am attempting to change are being given the default background color instead of customized colors.
https://girlgenius.fandom.com/wiki/Chronology_-_Volume_2-9#---First_Page_of_VOLUME_22_.28Act_2:_BOOK_NINE.29
Should my approach work? If so, can someone help me fix my code? Or is my approach completely wrong? If so, can someone tell me why? And more importantly, can someone please suggest a method that will do what I am trying to accomplish, assuming it is possible at all.