Skip to main content
Skins control the visual presentation of a MediaWiki wiki: the page layout, navigation, typography, colors, and overall user interface. Every page view is rendered through the active skin. Skins have access to the same registration and hook system as extensions but focus on presentation rather than functionality.

​
Bundled Skins

MediaWiki documents five bundled skins in its source tree (loaded from the skins/ directory):

Vector 2022

The current default skin since MediaWiki 1.37 (2022). A modernised version of Vector with improved accessibility and mobile support. Introduced in 1.36 (2021).

Vector (legacy)

The previous default from MediaWiki 1.17 (2011) until Vector 2022. Introduced in 1.16 (2010), it was designed to be more user-friendly than MonoBook.

MinervaNeue

A mobile-optimized skin introduced in 1.19 (2012). Designed primarily for mobile devices but usable on desktop. Used by default on Wikimedia mobile sites.

Timeless

A responsive skin for different screen sizes, equally focused on reading and editing interfaces. Introduced in 1.31 (2018).

MonoBook

Named after a black-and-white photo of a book used as the page background. The original default from 1.3 (2004) until replaced by Vector. The classic MediaWiki look.
The bundled skins (Vector, MinervaNeue, Timeless, MonoBook) are distributed separately from core and installed into the skins/ directory. The skins/ directory in the core repository contains only a README file.

​
How Skins Differ from Extensions

  • Registered with wfLoadSkin() in LocalSettings.php
  • Described by skin.json (same schema as extension.json)
  • Extend SkinTemplate (or Skin) as their base class
  • Control overall page layout and chrome
  • One skin is active per page view (the user’s preferred skin or the wiki default)
  • Listed separately under “Installed skins” in Special:Version

​
Loading a Skin

1

Install the skin files

Place the skin directory under skins/ in your MediaWiki installation:
mediawiki/
  skins/
    MySkin/
      skin.json
      MySkin.php
      resources/
        ...
Skins available from Wikimedia Git can be cloned directly:
cd skins/
git clone https://gerrit.wikimedia.org/g/mediawiki/skins/Vector
For development, a symlink works too:
cd mediawiki/skins
ln -s ../../skins-trunk/MySkin
2

Load the skin in LocalSettings.php

wfLoadSkin( 'MySkin' );
3

Set it as the default (optional)

$wgDefaultSkin = 'myskin';
Note: the value is the skin’s lowercase name, as declared in skin.json.
4

Disable a skin (optional)

Remove or comment out the wfLoadSkin() line. User preferences for that skin are preserved if it is re-enabled later.

​
skin.json Structure

skin.json uses the same schema as extension.json. The key difference is the "type": "skin" field and the SkinTemplateFactory or ValidSkinNames registration. 
{
    "manifest_version": 2,
    "name": "MySkin",
    "version": "1.0.0",
    "author": "Alice Smith",
    "url": "https://www.mediawiki.org/wiki/Skin:MySkin",
    "description": "A clean, minimal wiki skin.",
    "license-name": "GPL-2.0-or-later",
    "type": "skin",
    "requires": {
        "MediaWiki": ">= 1.39.0"
    },
    "ValidSkinNames": {
        "myskin": {
            "class": "SkinMySkin",
            "args": [ { "name": "myskin" } ]
        }
    },
    "AutoloadNamespaces": {
        "MediaWiki\\Skins\\MySkin\\": "includes/"
    },
    "MessagesDirs": {
        "MySkin": [ "i18n" ]
    },
    "ResourceFileModulePaths": {
        "localBasePath": "resources",
        "remoteSkinPath": "MySkin/resources"
    },
    "ResourceModules": {
        "skins.myskin": {
            "styles": [ "skin.less" ],
            "scripts": [ "skin.js" ]
        }
    }
}

​
The SkinTemplate Base Class

Most skins extend SkinTemplate, which provides the foundational logic for rendering page structure. The skin class sets the template class used to produce HTML output: 
use MediaWiki\Skin\SkinTemplate;

class SkinMySkin extends SkinTemplate {
    // The skin name — must match the key in ValidSkinNames
    public $skinname = 'myskin';

    // Template class that renders the HTML
    public $template = 'MySkinTemplate';
}
The template class extends BaseTemplate and implements a execute() method that outputs the full page HTML using data provided by SkinTemplate.
Modern skins (such as Vector 2022 and MinervaNeue) use Mustache templates via QuickTemplate rather than PHP-only templates, which provides cleaner separation of logic and markup.

​
Custom CSS and JavaScript

Wiki administrators and users can customize CSS and JavaScript without modifying skin files, by editing special pages on the wiki.

​
Site-Wide Customization

PageScope
MediaWiki:Common.cssCSS applied to all skins
MediaWiki:Common.jsJavaScript applied to all skins
MediaWiki:Vector.cssCSS applied only when the Vector skin is active
MediaWiki:Minerva.cssCSS applied only when the Minerva skin is active
MediaWiki:Vector.jsJavaScript applied only when Vector is active
The pattern is MediaWiki:<SkinName>.css / MediaWiki:<SkinName>.js for any installed skin.

​
Per-User Customization

Individual users can customize their own experience by editing:
  • User:<name>/vector.css
  • User:<name>/vector.js
  • User:<name>/common.css
  • etc.
/* Example: User:Alice/vector.css */
/* Hide the edit section links */
.mw-editsection {
    display: none;
}
These wiki pages are only editable by users with the editinterface right (typically administrators). Changes take effect immediately without any server-side deployment.

​
Hooks for Skins

Skins can register hooks just like extensions, using the same HookHandlers and Hooks fields in skin.json. Common hooks used by skins include: 
{
    "HookHandlers": {
        "main": {
            "class": "MediaWiki\\Skins\\MySkin\\HookHandler"
        }
    },
    "Hooks": {
        "BeforePageDisplay": "main",
        "OutputPageBodyAttributes": "main"
    }
}

​
Custom Skins

A large catalog of third-party skins is available. Installing a custom skin follows the same steps as any bundled skin: copy or clone the files into skins/, add wfLoadSkin() to LocalSettings.php, and optionally set it as the default. For an overview of writing a new skin from scratch, see the MediaWiki skinning manual.

Build docs developers (and LLMs) love

Get started for freeTalk to us