Skin:Vector/2022 - MediaWiki
Jump to content
From mediawiki.org
Skin:Vector
Translate this page
Languages:
Bahasa Indonesia
Nederlands
Tiếng Việt
polski
português do Brasil
suomi
svenska
čeština
русский
українська
العربية
हिन्दी
বাংলা
ગુજરાતી
中文
한국어
This code base is maintained by the
Reader Experience team
MediaWiki skins manual
category
Vector 2022
Release status:
stable
Compatibility policy
Snapshots releases along with MediaWiki. Master is not backwards compatible.
Composer
mediawiki/vector-skin
License
GNU General Public License 2.0 or later
Download skin
Git
Download Git master
browse repository
Phabricator
GitHub
commit history
repository contributors (GitHub)
code review
Example
enwiki
viwiki
testwiki
Parameters
$wgVectorDefaultSkinVersionForExistingAccounts
$wgVectorDefaultSkinVersionForNewAccounts
$wgVectorFontSizeConfigurableOptions
$wgVectorLanguageInHeader
$wgVectorLanguageInMainPageHeader
$wgVectorMaxWidthOptions
$wgVectorNightModeOptions
$wgVectorPromoteAddTopic
$wgVectorResponsive
$wgVectorTableOfContentsCollapseAtCount
$wgVectorTypeahead
$wgVectorUseIconWatch
$wgVectorWebABTestEnrollment
$wgVectorWrapTablesTemporary
Hooks used
GetPreferences
LocalUserCreated
SkinPageReadyConfig
Quarterly downloads
Public wikis using
14,010 (Ranked 2
nd
Public wikis using as default skin
5,943
Translate the Vector skin
if it is available at translatewiki.net
Vagrant role
vector
Issues
Open tasks
Report a bug
Vector 2022
is a MediaWiki skin that is the second evolution of the
Vector
skin. It was developed as part of the
Desktop improvements
project.
It has been bundled in MediaWiki since
MediaWiki 1.38
It is the default skin for various Wikimedia projects.
Vector 2022 differs from most skins in that it does not have its own code base; rather, its code is part of the Vector skin's, and the two are downloaded together.
Version MediaWiki 1.38 of this skin marked official 3rd party support. Note that sites running MediaWiki 1.36 or 1.37 that use Vector 2022 will hit challenges when upgrading to the 1.38 release. See
T299104
and
Extension:WikimediaMaintenance
for more details.
Installation
edit
This skin
comes with MediaWiki 1.38
and later, so you do not need to download it. The remaining configuration instructions must still be followed.
and place the file(s) in a directory called
Vector
in your
skins/
folder.
Add the following code at the bottom of your
LocalSettings.php
file:
wfLoadSkin
'Vector'
);
Configure as required.
Done
- Navigate to
Special:Version
on your wiki to verify that the skin is successfully installed.
Optional dependencies
edit
Vector 2022 can make use of the following extensions if they are installed, though none are required:
UniversalLanguageSelector
– for the language switch button
PageImages
– to include an image for each page (if available) in the search bar
ShortDescription
– to include a description for each page in the search bar (Wikimedia projects have similar functionality, but not using this extension)
Configuration
edit
Making Vector 2022 the default skin
edit
For MediaWiki 1.38 and higher, add the following to LocalSettings.php to make this the default skin:
$wgDefaultSkin
'vector-2022'
Features
edit
Dark mode
edit
MediaWiki version:
1.43
Vector 2022 features a night mode (aka dark mode), which has three possible states:
day
– also known as light mode
night
– also known as dark mode
os
– also known as automatic. This mode will automatically adapt to the state of the operating system or browser
Night mode is gated by a feature flag.
To enable it, set
$wgVectorNightMode
as follows:
$wgVectorNightMode
'beta'
true
$wgVectorNightMode
'logged_out'
true
$wgVectorNightMode
'logged_in'
true
When enabled, the default theme mode is day.
To change the default theme for all users to automatic mode or night mode, you set the default for the user option with either:
$wgDefaultUserOptions
'vector-theme'
'os'
// or
$wgDefaultUserOptions
'vector-theme'
'night'
Please note that your content has to be night mode compatible.
You might want to read the
recommendations for Wikimedia wikis
Configurability
edit
Note that Vector 2022 has several unstable feature flags, which may disappear at any time.
Most of these feature flags relate to incomplete features.
It is not recommended to change any feature flag from its default value unless listed here.
$wgVectorMaxWidthOptions
- Can be used to configure whether the max-width applies. Relatively stable at this point.
$wgVectorLanguageInMainPageHeader
- Controls whether the language button is shown on the main page in the header.
$wgVectorTypeahead
- Associative array with configuration keys for API URLs and options such as
showDescription
and
showThumbnail
(both booleans).
Pinning
edit
Vector 2022 allows control over whether various menus appear pinned in the sidebar or collapsed into the header.
These options can be configured both by users in their preferences and by administrators as default settings.
The following pinning options are available:
vector
main
pinned
– Controls the main navigation menu position
1 (default) – Menu is pinned in the left sidebar
0 – Menu is collapsed into header hamburger icon
vector
page
tools
pinned
– Controls the page tools menu position
1 (default) – Tools are pinned in the right sidebar
0 – Tools are collapsed into header icon
vector
toc
pinned
– Controls the table of contents position
1 (default) – Table of contents is pinned in the left sidebar
0 – Table of contents is collapsed into a floating button
vector
appearance
pinned
– Controls the appearance menu position
1 (default) – Appearance options are pinned in the sidebar
0 – Appearance options are collapsed into header icon
To change any of these defaults for logged in users, add the corresponding lines to LocalSettings.php:
Note this will not work for anonymous users due until
T366999
is worked on.
// Example: Collapse all menus
$wgDefaultUserOptions
'vector-main-menu-pinned'
$wgDefaultUserOptions
'vector-page-tools-pinned'
$wgDefaultUserOptions
'vector-toc-pinned'
$wgDefaultUserOptions
'vector-appearance-pinned'
Workarounds
edit
Warning:
This code should never be run on Wikimedia production sites as it causes the page to be re-rendered which can impact SEO as well as user experience.
To pin the sidebar for anonymous users by default, this code can be added at the beginning of MediaWiki:Common.js (see
live example
):
if
mw
config
get
'wgUserName'
))
const
observer
new
MutationObserver
((
mutationsList
observer
=>
for
const
mutation
of
mutationsList
if
mutation
target
classList
contains
'vector-animations-ready'
))
document
querySelector
'[data-event-name="pinnable-header.vector-main-menu.pin"]'
).
click
()
observer
disconnect
();
break
});
observer
observe
document
documentElement
attributes
true
attributeFilter
'class'
});
If you also want to pin the tools for anonymous users by default, you can add the following line of code (after line 5):
document
querySelector
'[data-event-name="pinnable-header.vector-page-tools.pin"]'
).
click
()
See also
edit
Design documentation
This skin is being used on one or more
Wikimedia projects
. This probably means that the skin is stable and works well enough to be used by such high-traffic websites. Look for this skin's name in Wikimedia's
CommonSettings.php
and
InitialiseSettings.php
configuration files to see where it's installed. A full list of the skins installed on a particular wiki can be seen on the wiki's
Special:Version
page.
This skin is included in the following wiki farms/hosts and/or packages:
Canasta
Debian
Miraheze
MyWikis
ProWiki
semantic::core
ShoutWiki
Telepedia
wiki.gg
Retrieved from "
Categories
GPL licensed skins
Stable skins
Skins with release branches compatibility policy
Skins supporting Composer
Skins in Wikimedia version control
GetPreferences extensions
LocalUserCreated extensions
SkinPageReadyConfig extensions
All skins
Skins bundled with MediaWiki 1.38
Skins used on Wikimedia
Skins included in Canasta
Skins available as Debian packages
Skins included in Miraheze
Skins included in MyWikis
Skins included in ProWiki
Skins included in semantic::core
Skins included in ShoutWiki
Skins included in Telepedia
Skins included in wiki.gg
Vector skin
Skins with dark mode
Skin
Vector/2022
Add topic