User:Aron Manning/Skin themes

These CSS overlays add mild and dark mode 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 in dark mode (bright text on bright background). Rules for these are added on a case-by-case basis. Mild mode 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 as a userstyle with Stylish browser extension
Install the extension / addon, then the userstyle from this page:
 * Mild mode: https://userstyles.org/styles/178751/wikipedia-mild-mode-hand-picked-colours
 * Dark mode: https://userstyles.org/styles/178473/wikipedia-dark-mode-hand-picked-colours
 * Note: on quite a few pages there is non-skinned content - using hardcoded inline styles -, that become unreadable with Dark mode, 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.

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 mode, copy the following line to the top of the file, then publish:
 * 3) To use dark mode, copy the following line to the top of the file, then publish:
 * 1) To use dark mode, copy the following line to the top of the file, then publish:

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
In category