Skip to main content

​
Overview

SkinCitizen is the main skin class for Citizen, extending MediaWiki’s SkinMustache to provide a modern, customizable skin with support for themes, client preferences, and component-based rendering. Namespace: MediaWiki\Skins\Citizen Location: includes/SkinCitizen.php

​
Constructor

The SkinCitizen class uses dependency injection to receive all required services. 
public function __construct(
    UserFactory $userFactory,
    GenderCache $genderCache,
    UserIdentityLookup $userIdentityLookup,
    LanguageConverterFactory $languageConverterFactory,
    LanguageNameUtils $languageNameUtils,
    PermissionManager $permissionManager,
    ExtensionRegistry $extensionRegistry,
    UserGroupManager $userGroupManager,
    UrlUtils $urlUtils,
    ?MobileContext $mfContext,
    array $options = []
)
​
userFactory
UserFactory
required
Factory for creating User objects
​
genderCache
GenderCache
required
Cache for user gender information
​
userIdentityLookup
UserIdentityLookup
required
Service for looking up user identities
​
languageConverterFactory
LanguageConverterFactory
required
Factory for language variant conversion
​
languageNameUtils
LanguageNameUtils
required
Utilities for language name handling
​
permissionManager
PermissionManager
required
Manager for user permissions
​
extensionRegistry
ExtensionRegistry
required
Registry for checking loaded extensions
​
userGroupManager
UserGroupManager
required
Manager for user group information
​
urlUtils
UrlUtils
required
Utilities for URL manipulation
​
mfContext
MobileContext|null
required
MobileFrontend context (optional dependency)
​
options
array
default:"[]"
Skin configuration options. If not set, defaults to ['name' => 'citizen']

​
Key Methods

​
initPage

Initializes the skin for the current page, adding metadata like theme colors and web app manifest. 
public function initPage( OutputPage $out ): void
​
out
OutputPage
required
The OutputPage object to initialize
Usage Example: 
$skin = new SkinCitizen(
    $userFactory,
    $genderCache,
    $userIdentityLookup,
    $languageConverterFactory,
    $languageNameUtils,
    $permissionManager,
    $extensionRegistry,
    $userGroupManager,
    $urlUtils,
    $mfContext
);
$skin->initPage( $out );

​
getHtmlElementAttributes

Gets HTML element attributes for the <html> tag, including theme and client preference classes. 
public function getHtmlElementAttributes(): array
​
return
array
Associative array of HTML attributes including CSS classes for theme, header position, and client preferences
Usage Example: 
$attrs = $skin->getHtmlElementAttributes();
// Returns array with 'class' key containing theme and preference classes
// e.g., ['class' => 'skin-theme-clientpref-os citizen-header-position-left ...']

​
getTemplateData

Builds the complete template data array for Mustache rendering, including all components. 
public function getTemplateData(): array
​
return
array
Complete template data including component data for footer, main menu, page heading, page tools, search box, site stats, user info, sticky header, body content, and table of contents
Returns Data Structure:
  • data-footer: Footer component data
  • data-main-menu: Main menu component data
  • data-page-footer: Page footer component data
  • data-page-heading: Page heading component data
  • data-page-sidebar: Page sidebar component data
  • data-page-tools: Page tools component data
  • data-search-box: Search box component data
  • data-site-stats: Site statistics component data
  • data-user-info: User info component data
  • data-sticky-header: Sticky header component data
  • data-body-content: Body content component data
  • data-toc: Table of contents component data
  • toc-enabled: Boolean indicating if TOC is enabled
Usage Example: 
$templateData = $skin->getTemplateData();
// Use this data to render the Mustache template

​
Configuration Constants

​
CLIENTPREFS_THEME_MAP

Maps theme preference values to CSS class suffixes. 
private const CLIENTPREFS_THEME_MAP = [
    'auto' => 'os',
    'light' => 'day',
    'dark' => 'night'
];

​
DEFAULT_CLIENT_PREFS

Default client preference values applied to the HTML element. 
private const DEFAULT_CLIENT_PREFS = [
    'citizen-feature-autohide-navigation' => '1',
    'citizen-feature-image-dimming' => '0',
    'citizen-feature-pure-black' => '0',
    'citizen-feature-custom-font-size' => 'standard',
    'citizen-feature-custom-width' => 'standard',
    'citizen-feature-performance-mode' => '1',
];

​
OPTIONAL_FONT_MODULES

Maps configuration keys to optional font module names. 
private const OPTIONAL_FONT_MODULES = [
    'CitizenEnableCJKFonts' => 'skins.citizen.styles.fonts.cjk',
    'CitizenEnableARFonts' => 'skins.citizen.styles.fonts.ar',
];

​
Protected Methods

​
runOnSkinTemplateNavigationHooks

Ensures the onSkinTemplateNavigation hook runs after all other SkinTemplateNavigation hooks. 
protected function runOnSkinTemplateNavigationHooks(
    SkinTemplate $skin,
    array &$content_navigation
): void
​
skin
SkinTemplate
required
The skin template instance
​
content_navigation
array
required
Reference to content navigation array that will be modified

Build docs developers (and LLMs) love

Get started for freeTalk to us