User:Aron Manning/Skin themes

MediaWiki skins manual - category
OOjs UI icon layout-ltr.svg
Skin themes
Release status: experimental
MediaWiki dark theme - main-page-2 - Timeless skin.png
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 includedEdit

  • 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 wikisEdit

  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 extensionEdit

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:

AlternativesEdit

ScreenshotsEdit

Main pageEdit

Talk pageEdit

Mild themeEdit


Dark themeEdit


ComparisonsEdit

Responsive Vector skinEdit

Flat tablesEdit

GlitchesEdit

All images in Category of MediaWiki skin screenshots