Vector Colour Theme/Page 8
How to put it all together
For this demo site, the following lines (excluding bold headings) have been included in MediaWiki:Common.css.:-
Variables used for colours
:root { --clr-light-teal: #99ffff; } /* a lighter (80%) shade of Teal (#008080) */
:root { --clr-light-blue: #33ccff; } /* a lighter (60%) shade of Deep Sky Blue (#00BFFF) */
:root { --clr-darkgreen: #009900; }
:root { --clr-green: #00ff00; }
:root { --clr-light-green: #ccffcc; }
:root { --clr-yellow: #ffff66; } /* lighter than #FFFF00; */
:root { --clr-pale-yellow: #ffffcc; }
:root { --clr-light-orange: #ffd280; } /* a lighter shade of orange (#ffa500) } */
:root { --clr-light-pink: #ffccd5; }
:root { --clr-lightcoral: #F08080; }
:root { --clr-wheat: #F5DEB3; } /* wheat is #F5DEB3; */
:root { --clr-dark-wheat: #eaba61; } /* wheat is #F5DEB3; */
:root { --clr-darker-wheat: #cb8d1a; } /* wheat is #F5DEB3; */
:root { --clr-violet: #ac8ef0; }
:root { --clr-light-violet: #ded2f9; }
Values applied to change the Vector interface colour theme
/* Top of screen */
/* #mw-head { background-color: var(--clr-lightcoral); } */ /* un-used */
#mw-head-base { background-color: var(--clr-light-pink); }
/* Search bar */
#p-search { background-color: var(--clr-lightcoral); }
/* Below Head */
body { background-color: var(--clr-light-teal); }
/* Left Column */
#mw-panel { background-color: var(--clr-darkgreen); }
.mw-wiki-logo { background-color: var(--clr-yellow); }
#p-navigation { background-color: var(--clr-green); }
/* Tools Menu */
#p-tb { background-color: var(--clr-light-green); }
/* Tools Menu Label */
#p-tb-label { background-color: var(--clr-pale-yellow); }
#p-tb-list { background-color: var(--clr-light-orange); }
/* Content */
.mw-body { background-color: var(--clr-darker-wheat); }
.firstHeading { background-color: var(--clr-dark-wheat); }
.mw-body-content { background-color: var(--clr-wheat); }
/* Category Links */
.catlinks { background-color: var(--clr-violet); }
.mw-normal-catlinks { background-color: var(--clr-light-violet); }
/* Footer */
#footer { background-color: var(--clr-light-blue); }
A Vector interface styled with different background colours for each defined area.
Class or ID identified by colour
Conclusion
It is not necessary to develop a new skin for MediaWiki if the structure of an existing skin works for you and all you want to achieve is a customised colour theme.
To modify the Vector skin you can use the classes and IDs shown throughout this guide. But if you use a code inspector such as Firefox Developer Edition it becomes easy to identify an appropriate class or ID for any area and this process can be applied to other skins.
Variables have been over-used in this example because a separate colour has been used for each class. On a production site, however, you would define less colours and use the same colour variable for several classes. This has the added advantage that a a single change to the colour is automatically applied to each relevant instance. This is very useful when changing colour shades, testing complementary colours, etc.
The concepts illustrated here can be extended to other properties. For example, the background-color has been defined here but you could also define border-color, or use different border colours for top, bottom and sides to create shadow effects. And if text is hard to read against a chosen background-color you could also change the text properties, color, font-weight, font-style etc.
Another area to explore is the use of your own custom panels, buttons, page backgrounds etc. Because these classes would be defined in MediaWiki:Common.css you can also use variables for background and border colours. The end result could be awful (like this site!), or it could really enhance the user experience.
