User:Aron Manning/Skin themes

MediaWiki skins manual - category

Skin themes Release status: experimental
Description	Mild and dark mode css overlays, easily customizable color palette for the skins Timeless and Vector
Author(s)	{{{author}}}
Latest version	0.1 (2019-12-31)
MediaWiki	1.24+
License	GNU General Public License 3.0
Download	meta:User:Aron_Manning/skin-theming.css Raw: Mild, Dark, common part
Example	N/A
For Timeless, Vector skins. Upcoming: Minerva (mobile), MonoBook, Modern.
Translate the Aron Manning skin if it is available at translatewiki.net

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 (`.dark`) -- similar to Discord's colors
• Mild mode (`.mild`) -- 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 or - 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:
   • @import url(//meta.wikimedia.org/wiki/User:Aron_Manning/mild-theme.css?action=raw&ctype=text/css);
3. To use dark theme, copy the following line to the top of the file, then publish:
   • @import url(//meta.wikimedia.org/wiki/User:Aron_Manning/dark-theme.css?action=raw&ctype=text/css);

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

Install the Stylus extension / addon: https://github.com/openstyles/stylus#Releases

• This fork of the Stylish addon has better UI and customizable styles.

Install the userstyle from this page:

• 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

• User:Volker E. (WMF)/dark-mode 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 filter: invert( 1 ) hue-rotate( 180deg )
• User:BrandonXLF/Invert — Color inversion
• MediaWiki:Gadget-Blackskin — Enabled via Wikipedia gadget preference

Screenshots

Main page

• 
  Mild, Timeless skin, Commons mainpage
• 
  Dark, Timeless skin, Commons mainpage
• 
  Mild, Timeless skin, English mainpage
• 
  Dark, Timeless skin, English mainpage

• 
  Mild, Vector skin, English mainpage
• 
  Dark, Vector skin, English mainpage
• 
  Alternative header color
• 
  Alternative header color

Talk page

• 
  Mild, Talk page with warning
• 
  Dark, Talk page with warning
• 
  Dark, Entire talk page

Mild theme

• 
  MediaWiki mild theme russian-1 - Timeless skin
• 
  MediaWiki mild theme article-1 - Timeless skin
• 
  MediaWiki mild theme article-1 - Vector skin
• 
  MediaWiki mild theme search-1 - Timeless skin
• 
  MediaWiki mild theme search-1 - Vector skin

Dark theme

• 
  MediaWiki dark theme russian-1 - Timeless skin
• 
  MediaWiki dark theme article-4 - Timeless skin
• 
  MediaWiki dark theme article-4 - Vector skin
• 
  MediaWiki dark theme talk-1 - Timeless skin
• 
  MediaWiki dark theme talk-1 - Vector skin

Comparisons

• 
  NavWiki article - standard Timeless
• 
  NavWiki article - mild Timeless
• 
  NavWiki article - dark Timeless
• 
  Big thumbnails - standard Timeless
• 
  Big thumbnails - mild Timeless
• 
  Big thumbnails - dark Timeless

• 
  Gallery - standard Timeless
• 
  Gallery - mild Timeless
• 
  Gallery - dark Timeless
• 
  Gallery - standard Vector
• 
  Gallery - mild Vector
• 
  Gallery - dark Vector

Responsive Vector skin

• 
  MediaWiki dark theme vector-responsive-3
• 
  MediaWiki dark theme vector-responsive-2
• 
  MediaWiki dark theme vector-responsive-1

Flat tables

• 
  MediaWiki dark theme table-3 - Timeless skin
• 
  MediaWiki dark theme tables - Vector skin
• 
  MediaWiki dark theme table-1 - Timeless skin
• 
  MediaWiki dark theme table-2 - Timeless skin
• 
  MediaWiki dark theme search-calendar - Timeless skin

Glitches

• 
  MediaWiki dark theme golden-catholic-1 - Vector skin
• 
  MediaWiki dark theme golden-catholic-2 - Vector skin

All images in Category of MediaWiki skin screenshots