OOUI/Thèmes

Les thèmes spécifient l'aspect et le comportement des interfaces OOUI. Les auteurs d'habillages peuvent créer des thèmes supplémentaires et les utiliser dans MediaWiki.

Les thèmes fournissent principalement le CSS, mais ils peuvent également apporter du code JavaScript (en pratique uniquement pour l'implémentation des variantes d'icônes) et des images d'icônes personnalisées (pas utilisé en pratique actuellement).

Thèmes prédéfinis

Deux thèmes vous sont proposés prêts à l'emploi :

• le thème WikimediaUI – conformément au guide de style de conception de la Fondation Wikimedia. C'est le thème par défaut; il est en phase active de développement.
• le thème Special:MyLanguage/Skin:Apex inspiré de l'habillage du même nom. Il reçoit uniquement les mises à jour de maintenance.

Nous n'avons pas l'intention d'avoir plus de deux thèmes prédéfinis à cause de l'effort supplémentaire qui serait demandé pour les maintenir.

Thèmes personnalisés

Il est possible de créer des thèmes OOUI personnalisés. Notez que cela demande beaucoup de travail préparatoire ainsi qu'un effort continu pour que votre thème soit toujours compatible avec les modifications de OOUI.

Les thèmes OOUI doivent actuellement être dans le même dépôt que le code source principal de OOUI (T76632), ceci à cause des limitations imposées par le processus de construction.

Pour créer un nouveau thème OOUI :

1. faites un fork du répertoire OOUI par exemple à partir de https://github.com/wikimedia/oojs-ui .
2. allez jusqu'au répertoire oojs-ui et exécutez npm install
3. vérifiez que vous pouvez construire la bibliothèque avec grunt build et regardez la démonstration. Pour initialiser la démonstration, exécutez npm run-script demos et ouvrez /resources/lib/oojs-ui/demos/index.html dans votre navigateur.
4. exécutez grunt add-theme --name=FooBar --template=Blank, en substituant le nom de votre thème par FooBar. Plutôt que d'utiliser le thème Blank, vous pouvez aussi commencer avec Apex ou WikimediaUI.
   • ceci va créer sous un nouveau nom, une copie du thème du modèle et modifier le processus de construction ainsi que les démonstrations, pour prendre en compte votre nouveau thème. Ensuite exécutez grunt build pour que la construction prenne en compte le nouveau thème.
   • les styles de votre thème sont maintenant dans src/themes/foobar/ .
   • le nom des thèmes est sensible à la casse; si vous entrez le nom du thème du modèle en minuscules vous obtiendrez des erreurs perturbantes. Vous pouvez aussi nommer votre thème en commençant son nom par une lettre majuscule pour éviter les erreurs de lint.
5. écrivez les styles pour votre thème !
   • exécutez grunt build (ou grunt quick-build) pour le construire; utilisez la démonstration pour tester vos modifications.
6. pensez à fusionner régulièrement dans votre fork, les modifications venant du dépôt OOUI. Nous fournissons une version de OOUI toutes les deux semaines. Vous devriez probablement le faire au moins pour les nouvelles versions de MediaWiki (en gros tous les six mois).
   • bien que nous ne fassions pas habituellement de modifications gratuites qui nécessitent de corriger les styles des thèmes, nous le faisons quelques fois et sans préavis. Désolé. Vous pouvez suivre les modifications du thème Apex et détecter les éléments qui pourraient aussi impacter votre thème (Apex n'est pas dans une phase active de développement).
   • même s'il y a des modifications qui ne cassent pas l'existant, vous devez néanmoins reconstruire périodiquement votre version pour y inclure les modifications apportées aux styles de base.

Utiliser les thèmes dans MediaWiki

Chaque widget va utiliser le thème défini par l'habillage actuel en utilisant SkinOOUIThemes de extension.json. Pour utiliser un thème prédéfini, c'est tout ce que vous avez à faire.

Pour utiliser un thème personnalisé dans votre habillage MediaWiki :

1. exécutez grunt build.
2. copiez-collez les fichiers générés de dist/ (il vous faudra oojs-ui-foobar.js et tous les oojs-ui-...-foobar.css, ignorez les autres) vers un sous-répertoire de votre habillage. Copier aussi FooBarTheme.php de php/.
3. si vous avez des images personnalisées, copiez et collez les contenus des fichiers dist/themes/foobar/ et .json de src/themes/foobar/.
4. définir le thème en utilisant OOUIThemePaths dans le fichier skin.json, et faites que votre habillage utilise le nouveau thème avec SkinOOUIThemes comme auparavant.

Exemple de modification utilisant un thème personnalisé dans un habillage : https://gerrit.wikimedia.org/r/c/mediawiki/skins/Example/+/343240