Adapter le mode sombre du PA sur nos forums

[jpb-admin]

Je ne sais pas si je poste au bon endroit et donc les modérateurs peuvent annuler ou déplacer ou supprimer mon message à leur guise.

En fait ceci n'est pas une question sur un problème mais un genre de requête qui pourrait plaire à bon nombre d'entre nous si elle est réalisable car d'après mes recherches je me suis rendu compte que de nombreuses questions sont posées concernant ce sujet.

Sur la page PA (panneau d'administration) en haut à droite, il existe sur le menu déroulant une petite case à cliquer qui passe automatiquement et avec un résultat vraiment sympa la page du mode sombre au mode clair de façon hyper pratique et sans prise de tête.

La question est donc de savoir s'il serait facile aux développeurs de chez Forumactif de proposer cette fonction sur nos forums. L'ayant développé pour la PA, il me semble (avec mes faibles connaissances) qu'ils pourraient sans doute aisément l'adapter, mais je me trompe peut-être.

Merci en tout cas pour tous vos développements.

[MlleAlys]

Bonjour,

J'ai si vous souhaitez sous la main un sélecteur de style partiel inspiré de celui de l'astuce, qui peut vous permettre à l'aide de css de modifier certaines couleurs de votre forum, ou plus directement (mais peut être moins esthétiquement) d'inverser toute la luminosité d'un coup, et laisser l'utilisateur choisir (avec système de cookie pour mémoire du choix) ?


Dans module > javascript, créez un nouveau javascript sur toutes les pages :

Code:

$(function() {
 
  /*appliquer au forum le style en mémoire dans le cookie s'il existe*/
  if ($.cookie("sstyle")) {
    $("html").attr("class", $.cookie("sstyle"));
  }
 
  /*intégrer le sélecteur à la page du forum*/
  $("#page-header").after('<select id="sstyle" onChange="changestyle(this.value);"><option value="">Style clair</option></select>');
  
  /*liste des styles à ajouter au sélecteur*/
  addstyle("Style sombre", "sombre");
  addstyle("Style 3", "style3");
 
  /*affichage du style déjà choisi sur le sélecteur en fonction du cookie s'il existe*/
  if ($.cookie("sstyle")) {
    $('#sstyle option[value="' + $.cookie("sstyle") + '"]').attr("selected", "selected");
  }

});


/*fonction qui ajoute les styles au sélecteur*/
function addstyle(nom, styleclass) {
  $("#sstyle").append('<option value="' + styleclass + '">' + nom + '</option>');
};
 
/*fonction qui change la class du body et le cookie lors de l'utilisation du sélecteur*/
function changestyle(styleclass) {
  $("html").attr("class", styleclass);
  $.cookie("sstyle", styleclass, {expires:365});
};

Normalement le sélecteur devrait apparaitre à côté de celui que vous avez déjà.

Puis dans votre feuille de style css, pour un effet comme sur l'image précédente pour le mode sombre :

Code:

html.sombre, html.sombre img {
  filter: invert(1) hue-rotate(180deg);
}

J'ai laissé une ligne "style 3", mais vous pouvez la supprimer dans le javascript (ou en ajouter d'autres) à la ligne 13.
Il est possible de personnaliser l'affichage du sélecteur, en fonction de ce que vous souhaitez.
Il est possible de modifier ou d'ajouter des codes css pour modifier le mode sombre à partir de la class ".sombre" appliquée à la page. Il serait compliqué de changer toutes les couleurs de chaque élément, mais pour quelque uns c'est faisable ^^

[jpb-admin]

Bonjour MlleAlys,

Merci pour ton aide couronnée de succès car j'ai aussi implémenté ton astuce pour le mode sombre en complément du sélecteur de thème.
Je doit dire que je suis satisfait car les deux systèmes se complètent à merveille et permettent aux visiteurs de choisir la solution graphique la plus adaptée à leurs gouts personnels.

Cordialement