Apply a Custom Colour Scheme

How to Apply a Custom Colour Scheme

The steps covered so far include:-

Identify the CSS Classes for screen elements; standard MediaWiki Classes and skin Classes
Design a colour scheme; choose the colour palette, create colour variables

Custom CSS is applied to MediaWiki:Common.css and to the skin CSS, for example MediaWiki:Vector.css used here.

The table below shows the colours used on this website. This can be verified by matching a colour to part of the interface.

Color Variable	Color Hex Code	Class and Color
--SteelBlue-80	#B6CEE2	#mw-head
--SteelBlue-70	#91B6D4	.mw-body
--SteelBlue-60	#6C9DC6	.mw-footer
--SteelBlue-50	#4785B8	#mw-panel.vector-legacy-sidebar.collapsible-nav
--SteelBlue-40	#396A93	body
	#F2F2F2	.mw-body-content
	#BDCCDB	.catlinks
	#CED8E4	.mw-normal-catlinks
--Tan-80	#E2CFB6	.vector-menu-content
--Tan-70	#D4B791	.vector-menu-heading-label
--Tan-60	#C69F6C	.vector-menu-heading
--Tan-50	#B88747	.vector-menu-portal
--Tan-40	#936C39	#p-tb

Colours in Common.css

The following CSS has been added to Common.css for this website:-

/* Items sorted with lightest color shade first, approximating a Z order */

#mw-head { background-color: var(--SteelBlue-80); } /* full width at top of screen, behind logo */

/* mw-body-content is in front of mw-body */
.mw-body-content { background-color: #F2F2F2; border-radius: 1em; padding-top:2em; padding-bottom:2em; padding-left:2.5em; padding-right:2.5em; } 

.mw-body { background-color: var(--SteelBlue-70); } /* is background for everything below header and right of left panel and down to footer */

.mw-footer { background-color: var(--SteelBlue-60); } /* does not extend to bottom of the screen */

#mw-panel.vector-legacy-sidebar.collapsible-nav { background-color: var(--SteelBlue-50); } /* background for menu but extends to top of screen and behind logo and in front of header */

body { background-color: var(--SteelBlue-40); } /* everything below mw-head, full width of screen, to bottom of screen */

.catlinks { background-color: #bdccdb; } /* border on category row */
.mw-normal-catlinks { background-color: #ced8e4; padding-left:20px; }

Colours in Vector.css

The following CSS has been added to Vector.css for this website:-

/* Items arranged with lightest color shades first, also approximating a Z order */

#mw-panel.collapsible-nav .vector-menu-content { background-color: var(--Tan-80); }  /* background color on drop down sub menu */

.vector-menu-heading-label { background-color: var(--Tan-70); }  /* this is the background for the text only, not full width */

/* menu headings - define for expanded and collapsed - container for the label text, full width of sidebar */
#mw-panel.collapsible-nav .portal.collapsed .vector-menu-heading { background-color: var(--Tan-60); } 
#mw-panel.collapsible-nav .portal.expanded .vector-menu-heading { background-color: var(--Tan-60); }

.vector-menu-portal { background-color: var(--Tan-50); } /* background for the menu */

#p-tb { background-color: var(--Tan-40); } /* Tools Menu */