Themes specify how OOUI interfaces look and feel. Skin authors can create additional themes and use them in MediaWiki.
Themes primarily provide the CSS, but they can also provide some JS code (in practice this is only used to implement icon variants) and custom icon images (not currently used in practice).
Two themes are provided out of the box.
- “WikimediaUI” theme conforming to Wikimedia Foundation's design style guide. This is the default theme and in active development.
- “Apex” theme inspired by the skin of the same name. It receives maintenance updates only.
We do not plan to have more than two built-in themes due to the additional effort that would be required to maintain them.
It is possible to create custom OOUI themes. Note that this requires a lot of initial work and a lot of continuing effort to keep your theme up-to-date with OOUI changes.
OOUI themes currently must live in the same repository as the main OOUI source code (T76632), due to limitations of the build process.
To create a new OOUI theme:
- Fork the OOUI repository, e.g. from https://github.com/wikimedia/oojs-ui.
- Navigate to the
oojs-uifolder and run
- Make sure you can build the library with
grunt buildand view the demo. To initialise the demo, run
npm run-script demosand open
/resources/lib/oojs-ui/demos/index.htmlin your browser.
grunt add-theme --name=FooBar --template=Blank, substituting your theme's name for FooBar. Rather than use the Blank theme, you can also start with Apex or WikimediaUI.
- This will create a copy of the template theme under a new name, and tweak the build process and demos to include your new theme.
- Your theme's styles are now in src/themes/foobar/.
- Write the styles for your theme!
grunt quick-build) to build it, use the demo to test your changes.
- Regularly merge back the changes from the OOUI repository into your fork. We release OOUI weekly on Tuesdays. You should probably do it at least for new MediaWiki versions (roughly every 6 months).
- Although we don't usually make gratuitous changes that would require fixes to theme styles, they sometimes happen, and there probably won't be any warnings. Sorry. You can watch for changes in the Apex theme to spot things that are likely to affect your theme too (Apex is not in active development).
- Even if there were no such breaking changes, you should still occasionally rebuild your version to include any changes to the base styles.
Using themes in MediaWikiEdit
Every widget will use the theme defined by the current skin using
SkinOOUIThemes in extension.json.
To use a built-in theme, this is all you need to do.
To use a custom theme in your MediaWiki skin:
- Copy-paste the generated files from dist/ (you will need
oojs-ui-...-foobar.css, ignore the others) into a subdirectory in your skin. Also copy
- If you have custom images, also copy-paste contents of dist/themes/foobar/ and the .json files from src/themes/foobar/.
- Define the theme using
OOUIThemePathsin the skin.json file, and make your skin use the new theme with
Example change using a custom theme in a skin: https://gerrit.wikimedia.org/r/c/mediawiki/skins/Example/+/343240