MediaWiki/Vector Colour Theme

From Grants Website

< MediaWiki

How to customise Vector Colours

One of the Skins pre-packaged with MediaWiki is called Vector. Vector has been a default skin for Wikipedia and many other sites, so it is widely used. However, the default colour scheme for Vector is very conservative, so it is worth the effort to customise the interface with your own colour theme. Particularly because Vector is perhaps unique in that an extension reliably enables a collapsible menu in the left column or Sidebar.

My project involved another MediaWiki installation using Vector and to make something special out of the Vector interface initially took quite an effort. It literally took days to discover what each class was and how to customise it; to develop a colour scheme that worked and test it - each change takes a while before an update is visible on a live site, cached pages had to be purged; and repeat the process many times.

So I decided to document what I learned and created a 'demo site' using Vector with a wild colour scheme that demonstrates where each area of the interface lies, and the class or ID used to change the background-color. I learnt how to use CSS variables and I'm hooked - they make it so easy to change one colour and see the effect everywhere that colour was used.

This 'demo site' has it's own MediaWiki installation in a sub-folder of this 'main' site. The URL is and I eventually figured out how to get .htaccess configured so the demo site can be accessed, substituting /wiki for /w as recommended (mostly by trial and error!). But that is a separate topic.

So, for anyone who wants a thorough, visual, description of how to customise a color scheme for Vector, with an explanation of the CSS to use in MediaWiki:Common.css; or wants to do something similar to a different MediaWiki skin, this multi-page article may be helpful. The panel below is a descriptor for the demo site:-

This MediaWiki site has been created specifically to demonstrate how to assign background colours to each part of the Vector skin interface.

The weird colour theme therefore has a purpose, and is developed through a series of articles beginning here: Vector Colour Theme

The series ends with a list of Resources including links to a few sites offering guides on how to select a pleasant colour scheme. The Vector Colour Theme series, however, is designed to show how to make the CSS changes to a MediaWiki skin, which is pre-requisite to implementing an effective colour theme.

I hope it is useful,