Colors as Variables
A Guide to Using MediaWiki in a Hosted Environment
An instructional website by the developer of mh370wiki.net - a MediaWiki site about Malaysia Airlines Flight MH370.
On the mh370wiki.net many colors are defined in MediaWiki:Common.css using variable names which are then used by CSS classes within MediaWiki:Common.css and MediaWiki:Vector.css.
These variables cannot be used in normal pages, but are applied if the page contains CSS classes from Common.css.
The advantages are at least two-fold:-
- Code is more readable. Instead of hex codes for colors the assigned name is more meaningful.
- If multiple elements have the same color written as a hex code (or other format like hsl) and a change is made, it is easy to change the value of the color variable and then wherever that variable is used the new color will be applied.
For example, the mh370wiki.net has several colors used for text. In Common.css these are defined like this:-
/* Simple text colours */
:root { --clr-black-text: #0D0D0D; } /* not actually black, but used for normal black text */
:root { --clr-white-text: #FFFFFF; }
:root { --clr-green-text: #00CC00; }
:root { --clr-yellow-text: #FFFF00; }
:root { --clr-amber-text: #FFA500 } /* I've called it amber but #ffa500 is actually orange. */
/* Amber is a bright, warm color that is midway between yellow and orange. On the hex chart used by web designers and developers, the amber color code is #FFBF00. */
These colors are used in other classes. For example a navigation button .nav-btn has a purple default color which changes on mouse-over or hover:-
.nav-btn:hover { color: var(--clr-yellow-text); text-decoration: underline; cursor: pointer; }
Although the double dash -- is required, the clr is not. And the section could be simplifed like this:-
/* Text Colors */
:root { --black-text: #0D0D0D;
--white-text: #FFFFFF;
--green-text: #00CC00;
--yellow-text: #FFFF00;
--amber-text: #FFA500;
}
Color Shades
The color theme for the mh370wiki.net website is based on the colors captured from an image of the instrument panel on the Boeing 777 used for Malaysia Airlines flight MH370 which went missing on 8 March 2014. This is illustrated in the article Apply a Custom Colour Scheme. There are many shades of brown. One shade of brown #A4998E is my 'base' colour. Applying that hex code in the w3Schools Color Picker produces a range of colors from light to dark:-
The #A4998E is at 60%. I then named brown colors using the percentage to indicate the shade.
:root { --clr-brown-base-95: #F4F2F1; }
:root { --clr-brown-base-90: #E8E6E3; }
:root { --clr-brown-base-85: #DDD9D5; }
:root { --clr-brown-base-80: #D2CCC6; } /* lighter brown as background to menu */
:root { --clr-brown-base-70: #BBB3AA; }
:root { --clr-brown-base-65: #B0A69C; }
:root { --clr-brown-base-60: #A4998E; } /* surround to panels on flight deck. */
:root { --clr-brown-mix-top: #9A8C7E; } /* variants for content border - a mix of #b0a69c; */
:root { --clr-brown-mix-side: #B9B3B0; } /* a mix of #b0a69c; */
:root { --clr-brown-mix-bottom: #DDD9D4; } /* a mix of #b0a69c; */
:root { --clr-brown-base-50: #8E8071; } /* darker brown for footer */
Reading these color names anywhere in MediaWiki:Common.css or MediaWiki:Vector.css it would be obvious that a brown color was being used, and the numeric value indicates the shade - low numbers mean darker and higher numbers mean lighter.
The mix variants are colours which have been mixed to produce shades used on the screen border which is styled to look like a bevelled edge. Assuming a light source from behind and above, the darker shade is used for the top border, the two side borders are slightly lighter and the bottom edge would receive the most light so the mix is the lightest shade.
Shades for colors on buttons which have a border to create a 3D effect are the opposite; the darkest mix is at the bottom and lightest at the top.
Links
Resources from w3Schools
- HTML Color Names
- https://www.w3schools.com/tags/ref_colornames.asp
- HTML Color Picker
- https://www.w3schools.com/colors/colors_picker.asp
- HTML Color Mixer
- https://www.w3schools.com/colors/colors_mixer.asp
- Colors Tutorial
- https://www.w3schools.com/colors/default.asp
- CSS Variables - The (var) Function
- https://www.w3schools.com/css/css3_variables.asp
Note: This list is transcluded and used on other pages. The source is Snippets:Resources from w3Schools.