Modified CSS of MediaWiki's default skin Vector used by me on Wikimedia Foundation projects (like Wikipedia, Commons, etc.) and possible other MediaWiki-based websites using Vector skin with inspiration in Material Design.
beta.css- support for the new Vectorglobal.css- global stylesheet used in all wikis with Vector skinmaterial-vector.user.css- to use with Stylus browser extensionmozilla-wiki.css- applies only to MozillaWikiwiktionary.css- applies only to Wiktionarywikidata.css- applies only to Wikidatawikimedia-commons.css- applies only to Wikimedia Commonswikipedia.css- invert the Wikipedia logo for the dark mode (the code can be reused with other wikis, but it can't get the same effect like it does on the Wikipedia logo)wikipedia-pt.css- applies only to Portuguese Wikipedia
- Sticky navbar with user actions, notifications, and search bar
- Page actions positioned at the left side
- Improved table of contents styles
- Content text justified with automatic hyphenation (hyphenation only works with Chromium-based browsers on macOS and Firefox)
- Dark mode (preliminary support)
- Use globally: Material Vector don't override other MediaWiki skins customized styles
Specific for the Portuguese Wikipedia
- Improved infobox styles
- Removes country flags icons (works with most, but no removes flags without
.flagicon) - Gadget: FastButtons are now "materialized" buttons
MediaWiki have built-in custom user stylesheets support. If this feature has been activated, you must create User:YourUsername/common.css (or User:YourUsername/vector.css) page with the contents of global.css. To enable it on all Wikimedia wikis, you must create a page at https://meta.wikimedia.org/wiki/Special:MyPage/global.css.
Install Stylus, available on Chrome Web Store for Google Chrome, Microsoft Edge (enable Allow extensions from other stores option) or other Chromium-based browser, on Mozilla Addons for Firefox and Opera Addons for Opera. Them, access material-vector.user.css from here and click on "Install style" button.
Stylus doesn't support @import CSS at-rule that Material Vector uses to get Roboto and Roboto Mono webfont (for the users that doesn't have these typefaces installed) from Google Fonts within @-moz-document Mozilla Format at-rule, used to specify the URLs that the stylesheets will be applied.
For best viewing the theme, you can add the below code on Stylus by clicking into the extension icon, option "Open style manager", then click on "Material Vector" and choose "Import" option on "Mozilla Format" section. After that, copy the code and click on "Append to style" button.
@import url("https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic|Roboto+Mono:400,100,100italic,300,300italic,500,400italic,500italic,700,700italic|Cabin:400,400italic,500,500italic,600,600italic,700,700italic&subset=latin,greek,cyrillic,greek-ext,vietnamese,cyrillic-ext,latin-ext");This stylesheet will be loaded on all pages that you visit, but not affects it. You also can manually specific URLs that will be used with these fonts.
Alternatively, you can download and install these typefaces from Google Fonts: Roboto / Roboto Mono.
- On Windows, unzip downloaded files and copy fonts to C:\Windows\Fonts folder or open Settings (Win+I), click on "Personalization", then "Fonts" and drag fonts files to the Settings window
If you don't care about this issue, your system default font will be displayed instead.
- Chrome: dark mode must be enabled on the OS settings (support page)
- Edge: open the menu "Settings and more" (Alt+F), choose "Settings", then "Appearance", and select "Dark" option on "Default theme" section (support page)
- Firefox: dark mode must be enabled on the OS settings or using
ui.systemUsesDarkThemeproperty ofabout:config, setting "1" (without quotes) number value (support page forabout:config)
To work correctly within Microsoft Edge, use "System default" option on the browser settings
- Windows 10 (version 1607 (Anniversary Update) or latter): open Settings (Win+I), then "Personalization" > "Colors", and select "Dark" option on "Choose your default Windows mode" section (support page)
- macOS (version 10.14 (Mojave) or latter): open Apple menu (
), then "System Preferences", click on "General" and select "Dark" on "Appearance options" section (support page)
- Linux: Chrome, Edge (Dev) and Firefox don't support dark mode on Linux by the OS settings
Material Vector works fine with these wikis, with less or none issues
| Wiki | URL |
|---|---|
| MediaWiki Wiki | mediawiki.org |
| Miraheze | *.miraheze.org |
| Wikibooks | *.wikibooks.org |
| Wikidata | wikidata.org |
| Wikimedia Foundation | *.wikimedia.org |
| Wikinews | *.wikinews.org |
| Wikipedia | *.wikipedia.org |
| Wikiquote | *.wikiquote.org |
| Wikisource | *.wikisource.org |
| Wikiversity | *.wikiversity.org |
| Wikivoyage | *.wikivoyage.org |
| Wiktionary | *.wiktionary.org |
| Wiki | URL |
|---|---|
| MozillaWiki | wiki.mozilla.org |
These wikis use Vector as their default skin or have an option to enable it, but uses an older/unsupported MediaWiki version (not added to material-vector.user.css)
| Wiki | URL |
|---|---|
| Portuguese Uncyclopedia (Desciclopédia em português) | desciclopedia.org |
| EverybodyWiki | *.everybodywiki.com |
| ICANNWiki | *.icannwiki.org |
| Infogov São Paulo | infogov.imprensaoficial.com.br |
| iPhone Development Wiki | iphonedev.wiki |
| The iPhone Wiki | theiphonewiki.com |
| Uncyclomedia Foundation | *.uncyclomedia.co |
| UnMeta-Wiki | *.uncyclomedia.org |
| Uncyclopedia (first fork) | *.uncyclopedia.co |
| Uncyclopedia (second fork) | uncyclopedia.com |
| Wiki Canção Nova | wiki.cancaonova.com |
| Creative Commons Wiki | wiki.creativecommons.org |
| The Document Foundation Wiki | wiki.documentfoundation.org |
| VideoLAN Wiki | wiki.videolan.org |
These wikis don't use Vector as their default skin and doesn't have an option to enable it
| Wiki | URL |
|---|---|
| Fandom | *.fandom.com |
| wikiHow | *.wikihow.com |
The wikis listed below are testing the new Vector skin by default. Logged users of these wikis can opt-out, and the users of the other wikis can opt-in for the new skin. See Reading/Web/Desktop Improvements page on MediaWiki wiki for aditional information.
| Wiki | URL | Group |
|---|---|---|
| Wikimedia Incubator | incubator.wikimedia.org |
Second group |
| Office Wiki | office.wikimedia.org |
First group |
| Bengali Wikipedia (বাংলা উইকিপিডিয়া) | bn.wikipedia.org |
Second group |
| Basque Wikipedia (Euskarazko Wikipedia) | eu.wikipedia.org |
First group |
| Persian Wikipedia (ویکیپدیای فارسی) | fa.wikipedia.org |
First group |
| French Wikipedia (Wikipédia en français) | fr.wikipedia.org |
First group |
| Hebrew Wikipedia (ויקיפדיה העברית) | he.wikipedia.org |
First group |
| Korean Wikipedia (한국어 위키백과) | ko.wikipedia.org |
Second group |
| Portuguese Wikipedia (Wikipédia em português) | pt.wikipedia.org |
Second group |
| Serbian Wikipedia (Википедија на српском језику) | sr.wikipedia.org |
Second group |
| Turkish Wikipedia (Türkçe Vikipedi) | tr.wikipedia.org |
Second group |
| Venetian Wikipedia (Wikipedia Vèneta) | vec.wikipedia.org |
Second group |
| French Wiktionary (Wiktionnaire en français) | fr.wiktionary.org |
First group |
| Portuguese Wikiversity (Wikiversidade em português) | pt.wikiversity.org |
First group |
| German Wikivoyage (Deutschsprachige Wikivoyage) | de.wikivoyage.org |
Second group |
Material Vector was been tested in the latest versions of the following desktop browsers (no mobile support, since Minerva is the default mobile skin for Wikimedia and possibility others MediaWiki-based wikis)
Material Vector:
Icons used:
bullet-icon.svg: public domainfile-pdf.svg: CC-BY 4.0OOjs_UI_icon_bell-invert.svg: MITOOjs_UI_icon_newWindow-ltr.svg: MITOOjs_UI_icon_newWindow-ltr-invert.svg: MITOOjs_UI_icon_tray-invert.svg: MITOOjs_UI_icon_userAvatar.svg: MITsort_both.svg: public domainsort_down.svg: public domainsort_up.svg: public domain
