Citizen

Citizen is a beautiful, usable, responsive MediaWiki skin that makes extensions part of the cohesive experience. It was initially created for the Star Citizen Wiki but is flexible to run on various MediaWiki configurations.

Live demo: English, German, Chinese

For the old design, click here for the last release.

Notable features

• Responsive layout: Responsive and able to adapt to different screen sizes. 📱💻🖥️
• Light/dark mode: Switch between light and dark mode. ☀️🌙
• Cohesive extension styles: Supported extensions blend with the rest of the UI. 🤝🔗
• Reading preferences: Adjust page width, font size, and line height. 👀📃
• Collapsible sections: Collapse and expand article sections. 📖📕
• Persistent ToC: Access ToC anywhere in the article. 🔍📖
• Rich search suggestions: More helpful search suggestions with images and descriptions. 🔍👀
• Progressive Web App: Give a more app-like experience when user add your wiki to their home screen. 📱

Extension styles

Citizen overrides some extension styles through skinStyles that applies custom styling to extensions and core libraries.

• Grade A - Overhaul - Major adjustments to UI, plus Grade B.
• Grade B - Dynamic - Colors are converted into CSS variables, little to none style adjustments.
• Grade E - Legacy - Dark mode colors are hardcored as LESS variables. These should be updated to at least Grade B support.

Please feel free to submit PRs if you want to add support for more extensions!

Core

Name	Grade	Version	Last updated
MediaWiki UI	B	1.35.3	2021-07-27
OOUI	B	0.39.3 086b4f1	2021-07-26

Extensions

Name	Grade	Version	Last updated
AdvancedSearch	B	REL1_35 fae6250	2021-08-26
AJAXPoll	A	REL1_39 8429d8d	2022-10-25
ApprovedRevs	B	N/A	N/A
Babel	B	MLEB 2021.07	2021-07-29
Capiunto	B	REL1_35 30049a7	2021-08-26
Cargo	B	REL1_35 df13273	2021-08-31
CategoryTree	B	N/A	N/A
CentralNotice	B	REL1_35 4aa2a8f	2022-06-16
Cite	A	N/A	N/A
CleanChanges	B	MLEB 2021.07	2021-07-29
CodeMirror	A	REL1_35 a326407	2021-08-25
CookieWarning	A	REL1_35 3c2ae6a	2022-04-29
DiscussionTools	A	REL1_35 7aa0a9b	2022-05-06
DismissableSiteNotice	A	N/A	N/A
Echo	A	REL1_35 347c30e	2021-08-11
Flow (StructuredDiscussions)	B	REL1_35 e3379f0	2022-04-27
Graph	B	N/A	N/A
Interwiki	B	REL1_35 a65a18e	2022-05-15
Lingo	B	REL1_35 e948775	2022-04-29
Math	B	REL1_35 b7a7939	2022-08-16
ManageWiki	B	master 60a2f51	2022-06-16
MsUpload	A	REL1_35 32eb420	2021-08-25
MultimediaViewer	A	N/A	N/A
OAuth	B	REL1_35 451ed95	2021-08-31
Popups	A	REL1_35 dccd607	2021-09-02
PortableInfobox	B	0.6 16a77dc	2022-04-14
RelatedArticles	A	REL1_35 0f27333	2021-08-31
RevisionSlider	B	REL1_35 4c4e368	2022-06-02
Semantic MediaWiki	A	4.0.2 0fcdfce	2022-10-21
Semantic Result Formats	E	N/A	N/A
SimpleTooltip	B	N/A	2022-02-19
SyntaxHighlight	A	REL1_35 05598b3	2021-08-26
Tabber	A	N/A	N/A
TabberNeue	A	1.3.1 656f396	2022-10-23
TimedMediaHandler	B	N/A	N/A
Translate	B	MLEB 2021.07	2021-07-29
UniversalLanguageSelector	B	MLEB 2021.12	2022-05-17
UploadWizard	A	N/A	N/A
VisualEditor	A	REL1_35 cc3466a	2021-08-04
Wikibase	B	REL1_35 7bb503b	2022-05-11
WikiEditor	A	REL1_39 02e1c70	2022-11-08
WSSearchFront	B	3.5.4 c27ebcb5	2021-11-23

Some of the field are tagged as N/A because the information was not tracked before. If you are interested in adding skinstyles, please check out this page on the wiki!

Installation

1. Download place the file(s) in a directory called Citizen in your skins/ folder.
2. Add the following code at the bottom of your LocalSettings.php:

wfLoadSkin( 'Citizen' );

3. ✔️Done - Navigate to Special:Version on your wiki to verify that the skin is successfully installed.

Configurations

The skin works out of the box without any configurations. The config flags allow more customization on the specific features in the skin. Check out this wiki page on how to adapt Citizen styles on your wiki.

Appearance

Name	Description	Values	Default
$wgCitizenThemeDefault	The default theme of the skin	auto - switch between light and dark according to OS/browser settings; light; dark	auto
$wgCitizenEnableCollapsibleSections	Enables or disable collapsible sections on content pages	true - enable; false - disable	true
$wgCitizenShowPageTools	The condition of page tools visibility	true - always visible; login - visible to logged-in users; permission - visible to users with the right permissions	true
$wgCitizenGlobalToolsPortlet	ID of the portlet to attach the global tools	string
$wgCitizenEnableDrawerSiteStats	Enables the site statistics in drawer menu	true - enable; false - disable	true
$wgCitizenUseNumberFormatter	Use NumberFormatter for site statistics, which allows formatting number in a localized way	true - enable; false - disable	true
$wgCitizenThemeColor	The color defined in the theme-color meta tag	Hex color code	#131a21
$wgCitizenEnableCJKFonts	Enable included Noto Sans CJK for wikis that serves CJK languages	true - enable; false - disable	false

Search suggestions

Name	Description	Values	Default
$wgCitizenEnableSearch	Enable or disable rich search suggestions	true - enable; false - disable	true
$wgCitizenSearchGateway	Which gateway to use for fetching search suggestion	mwActionApi; mwRestApi	mwActionApi
$wgCitizenSearchDescriptionSource	Source of description text on search suggestions (only takes effect if $wgCitizenSearchGateway is mwActionApi)	wikidata - Use description provided by WikibaseLib or ShortDescription; textextracts - Use description provided by TextExtracts; pagedescription - Use description provided by Description2 or any other extension that sets the description page property	textextracts
$wgCitizenMaxSearchResults	Max number of search suggestions	Integer > 0	6

Webapp manifest

Name	Description	Values	Default
$wgCitizenEnableManifest	Enable or disable web app manifest	true - enable; false - disable	true
$wgCitizenManifestThemeColor	Theme color of the web app manifest	Hex color code	#131a21
$wgCitizenManifestBackgroundColor	Background color of the web app manifest	Hex color code	#131a21

Miscellaneous

Name	Description	Values	Default
$wgCitizenThemeColor	The color defined in the theme-color meta tag	Hex color code	#11151d

Requirements

• MediaWiki 1.39.0 or later
• For the legacy versions, check the other release branches.