User:Aron Manning/Skin themes

From mediawiki.org
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[edit]

  • 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[edit]

  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[edit]

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:

Alternatives[edit]

Screenshots[edit]

Main page[edit]

Talk page[edit]

Mild theme[edit]


Dark theme[edit]


Comparisons[edit]

Responsive Vector skin[edit]

Flat tables[edit]

Glitches[edit]

All images in Category of MediaWiki skin screenshots