Bonjour,
Comme vous le savez, le Core dispose maintenant de trois thèmes, Light/Dark/Legacy.
Quand un plugin utilise un template dédié (pour le dashboard, design, mobile etc) et inclut des images, se pose le problème d’avoir des images blanches par exemple, qui se verront en dark mais pas en light.
Se pose également le problème d’adapter ces images lors d’une bascule de thème, que ce soit en bascule automatique (horaire) ou par le menu Réglages.
Le problèmes ne se pose pas avec des textes et/ou icônes, puisque si celles-ci ont les bonnes class css elles s’adapteront automatiquement aux couleurs du thème.
Voici donc comment faire:
• Le principe:
Le thème actuel de la page est disponible dans l’attribut data-theme sur le body.
Mais il faut aussi s’adapter lors d’une bascule. Pour çà, nous venons d’ajouter en alpha un event envoyé sur le body lors de la bascule. Cet event envoi également un argument, Dark (Pour le Dark et le Legacy) ou Light.
Il faut donc dans le template du plugin, vérifier le theme actuel, et écouter cet event pour s’adapter en cas de bascule. Il faudra donc deux jeux de vos images, en png 24bit (fond transparent) correspondant au fond clair ou foncé.
• Exemple avec le plugin Qivivo:
A gauche, les icônes atour de la consigne sont bien noires, et à droite elles passent en blanc.
Leurs couleurs sont en fait les couleurs de police par default soit:
En Light: rgb(90,90,90)
En Dark : rgb(195, 195, 195)
Pour chaque icône, j’ai donc deux fichiers, ici icon_up_Light.png et icon_up_Dark.png
Ensuite, dans le code du template :
</center>
</div>
<script type="text/javascript">
//change theme event handler for images:
$('body').on('changeThemeEvent', function (event, theme) {
var eqlogic = $('.eqLogic[data-eqLogic_uid=#uid#]')
if (theme == 'Light') {
eqlogic.find('.qivivo_temperature_order_down > img').attr('src', '/plugins/qivivo/core/img/icon_down_light.png')
eqlogic.find('.qivivo_temperature_order_up > img').attr('src', '/plugins/qivivo/core/img/icon_up_light.png')
eqlogic.find('.qivivo_temperature_order_cancel > img').attr('src', '/plugins/qivivo/core/img/icon_cross_light.png')
} else {
eqlogic.find('.qivivo_temperature_order_down > img').attr('src', '/plugins/qivivo/core/img/icon_down_dark.png')
eqlogic.find('.qivivo_temperature_order_up > img').attr('src', '/plugins/qivivo/core/img/icon_up_dark.png')
eqlogic.find('.qivivo_temperature_order_cancel > img').attr('src', '/plugins/qivivo/core/img/icon_cross_dark.png')
}
})
//set icons to light:
$(function() {
if ($('body').attr('data-theme').endsWith('Light')) {
var eqlogic = $('.eqLogic[data-eqLogic_uid=#uid#]')
eqlogic.find('.qivivo_temperature_order_down > img').attr('src', '/plugins/qivivo/core/img/icon_down_light.png')
eqlogic.find('.qivivo_temperature_order_up > img').attr('src', '/plugins/qivivo/core/img/icon_up_light.png')
eqlogic.find('.qivivo_temperature_order_cancel > img').attr('src', '/plugins/qivivo/core/img/icon_cross_light.png')
}
})
$('.eqLogic[data-eqLogic_uid=#uid#] .refresh').on('click', function () {
etc ...
Le 1er bloc écoute l’event envoyé en cas de bascule du theme.
Suivant l’argument theme il change les images pour les bonnes versions.
Le second bloc, éxécuté une fois au chargement du template, vérifie si on est Light et met les images Light, car les images Dark sont déjà dans le code du template. En effet, en theme dark ou legacy, ce sont les mêmes.
• Attention :
Afin d’éviter tout conflit entre différents templates de différents plugins, le changement d’icone peu se faire par id ou par class, mais contenant obligatoirement l’id du plugin ! Ici, « .qivivo_etc… »
