User:Aron Manning/Skin themes

These CSS overlays add mild and dark themes for Timeless and Vector skins (so far). Work in progress.
 * Easily customizable color palette through ca. 30 css variables bound to the elements of the skins and content.
 * Includes a few layout optimizations: full-width Timeless skin and thin (one-line) header bar for Vector and part of the  MediaViewer scroll-up fix (that needs javascript too to work).
 * Note: Custom background colors hardcoded in templates and wikitext make those areas unreadable with dark theme (bright text on bright background). Rules for these are added on a case-by-case basis. Mild theme is readable in such cases.

Color palettes included

 * Dark mode (` `) -- similar to Discord's colors
 * Mild mode (` `) -- light gray palette, less bright than the standard, easy on the eyes

Use on Wikimedia wikis

 * 1) Edit meta:Special:MyPage/global.css to use it on all wikis and skins or en:Special:MyPage/timeless.css or en:Special:MyPage/vector.css - or the same on your home wiki - to use it for a specific skin on one wiki.
 * 2) To use mild theme, copy the following line to the top of the file, then publish:
 * 3) To use dark theme, copy the following line to the top of the file, then publish:
 * 1) To use dark theme, copy the following line to the top of the file, then publish:

Add the import at the top of the file before any rules, otherwise it will be ignored.

Use as a userstyle with Stylus browser extension
UPDATE March 3, 2020: the userstyles.org channel will be abandoned in the coming month and replaced by a simple theme switcher gadget or extension or both. This will allow importing the webfonts, thus making the css file smaller. Reason: userstyles.org prohibits importing and it's also quite time-consuming to update. Just not practical.

Install the Stylus extension / addon: https://github.com/openstyles/stylus#Releases Install the userstyle from this page:
 * This fork of the Stylish addon has better UI and customizable styles.
 * Mild theme: https://userstyles.org/styles/178751/wikipedia-mild-theme-hand-picked-colours
 * Dark theme: https://userstyles.org/styles/178473/wikipedia-dark-theme-hand-picked-colours
 * Note: on quite a few pages there is non-skinned content - using hardcoded inline styles -, that becomes unreadable with Dark theme, therefore this is a developer preview, not a production version, yet. Mild mode is less affected and the styles can be easily turned off with the Stylish addon, without reloading the page.

Alternatives

 * WikimediaUI Dark mode user script -- Most up-to-date? color-inversion with many custom cases where simple inversion gives unsatisfactory results.
 * Extension:Theme
 * Skin:DarkVector
 * Skin:Darkvector is different, unmaintained
 * Skin:Vector-DarkCSS -- overlay css
 * Skin:Timeless-DarkCSS -- overlay css
 * Extension:DarkMode -- Color inversion using
 * User:BrandonXLF/Invert -- Color inversion

Glitches
All images in Category of MediaWiki skin screenshots