[AwesomeBB] Mode sombre pour le chatbox

[Invité]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://jeuxvideo-club.forumactif.com/

Description du problème

Bonjour

Il y a quelques semaines, j'ai pu intégrer un mode clair/sombre grâce à l'aide précieuse de MlleAlys
Voir : https://forum.forumactif.com/t407710-un-mode-sombre-pour-awesomebb

J'ai décidé de mettre le module Chatbox.

Mais j'aimerais qu'il soit intégré dans le mode sombre aussi et j'aimerais savoir comment faire ?
A noter que je n'ai pas intégré la chatbox directement dans la page d'accueil mais via un lien qui emmène les membre vers la chatbox en plein écran : https://jeuxvideo-club.forumactif.com/chatbox/

Pour info voici le JS et le CSS du mode sombre de base :

JS :

Code:

$(function() {
  if (my_getcookie("cookiemode")) {
    $('body').addClass('darkmode');
  }
});
 
$(function() {
  $('body #main-menu').append('<div id="modeselect"> ☼ <label class="switch"><input type="checkbox"><span class="slider"></span></label> ☽ </div>');
  if (my_getcookie("cookiemode")) {
    $('#modeselect input').prop("checked", true );
  }
});
 
$(function() {
  $('#modeselect input').on('change', function() {
    $('body').toggleClass('darkmode');
    my_setcookie('cookiemode', $('body').attr('class') , { expires : 100 } );
  });
});

CSS :

Code:

/***************************** DEBUT INTERRUPTEUR DARKMODE **************/
#modeselect {
  color: white;
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}
 
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 20px;
  vertical-align: middle;
  margin: 0 5px;
}
 
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
 
/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}
 
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 2px;
  background-color: #C7C7C7;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}
 
input:checked + .slider {
  background-color: #3A474E;
  outline: 1pt solid white;
}
 
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
 
input:checked + .slider:before {
  background:white;
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
/************************************* FIN INTERRUPTEUR DARKMODE *************************/

/*************************** CSS DARKMODE *************************/
 
body.darkmode {
  background-color: #2c3e50;
  color: #f5f7fa;
}
  
.darkmode .forum-section, .darkmode .posts-section, .darkmode .notification-row {
  background-color: #34495E;
}

.darkmode .forum-section:hover, .darkmode .posts-section:hover, .darkmode .notification-row:hover {
  background-color: #2c3e50;
}
 
.darkmode .forum-header, .darkmode .posts-header {
  background-color: #1D2C33;
}
.darkmode #privmsgs-menu li, .darkmode .forum-lastpost-author, .darkmode .posts-lastpost-author, .darkmode .block-topics .block-topics-posts i, .darkmode .block-topics .block-topics-views i, .darkmode .forum-lastpost-header i, .darkmode .forum-statistics-header i, .darkmode .posts-lastpost-header i, .darkmode .posts-statistics-header i, .darkmode .posts-lastpost i, .darkmode .forum-lastpost-author i, .darkmode .forum-lastpost-location i, .darkmode .forum-lastpost-time i, .darkmode .posts-lastpost-author i, .darkmode .posts-lastpost-time i, .darkmode select, .darkmode .input, .darkmode input, .darkmode .sceditor-container iframe, .darkmode .sceditor-container textarea, .darkmode .inputbox, .darkmode a, .darkmode a:visited, .darkmode .forum-description h3, .darkmode .posts-description h3 {
  color: white;
}
.darkmode .forum-statistics-posts span, .darkmode .forum-statistics-topics span, .darkmode .posts-statistics-replies span, .darkmode .posts-statistics-views span, .darkmode .profile-advanced-stats dt span[style*="536482"] {
  color: white;
}
.darkmode .forum-description p, .darkmode .posts-description p, .darkmode span.notification-date, .darkmode div.post-details {
  color: #CCCCCC;
}
.darkmode #tabs ul, .darkmode .tabs ul, .darkmode .box-body, .darkmode .block .block-content, .darkmode .block-subtle, .darkmode .post, .darkmode .post-aside, .darkmode .panel, .darkmode .post-section, .darkmode .fb-or-text, .darkmode .mod-news, .darkmode .mod-news-footer, .darkmode .social_login_group .fb-or-text, .darkmode #chatbox_contextmenu, .darkmode #help-button, .darkmode .fontbutton, .darkmode #header-user img, .darkmode .avatar-big img, .darkmode .avatar-default img, .darkmode .avatar-mini img, .darkmode .cb-avatar img, .darkmode .mod-login-avatar img, .darkmode input, .darkmode .forumline tbody tr, .darkmode .table1 tbody tr, .darkmode .calendar-cell {
  background-color: #34495E;
}
.darkmode .select-wrap select:hover, .darkmode .jumpbox-wrap select:hover, .darkmode .quickmod-wrap select:hover {
  border-color: #1D2C33;
}
.darkmode .block-market .market-item-price, .darkmode .block .block-secondary-content, .darkmode .block .sub-head, .darkmode .block .block-footer, .darkmode .post-aside, .darkmode .attachbox, .darkmode .box-foot, .darkmode .post-footer, .darkmode .quick-reply .textarea, .darkmode .jumpbox-wrap select, .darkmode .quickmod-wrap select, .darkmode .select-wrap select, .darkmode #divcolor, .darkmode #divsmilies, .darkmode #help-button, .darkmode #submit_button, .darkmode .format-message+label, .darkmode #tabs li:hover, .darkmode .tabs li:hover {
  background-color: #2c3e50!important;
  border-color: #2c3e50;
  color: #fff;
}
.darkmode .fa_like_list, .darkmode .fa_dislike_list, .darkmode .option_voters_list, .darkmode blockquote cite {
  color: rgba(255,255,255,0.6);
}
.darkmode dl.post-author-details span.label span, .darkmode #block-online .headline a, .darkmode .cp-sidebar a:not(.btn) {
  color: white !important;
}
.darkmode blockquote {
  background: #2c3e50;
}
 
.darkmode .btn, .darkmode input[type="submit"], .darkmode input[type="button"] {
  background: white;
  color: black !important;
}
.darkmode .quick-reply .quick-reply-btn {
  background: none;
  color: white !important;
}
.darkmode .sceditor-container textarea {
  color: white !important;
}
.darkmode .quick-reply-textarea-wrap .sceditor-container {
  border: none !important;
}
.darkmode .quick-reply .sceditor-button {
  background: white;
}
.darkmode .quick-reply-textarea-wrap .sceditor-container iframe, .darkmode .quick-reply-textarea-wrap .sceditor-container textarea {
  background-color: unset !important;
  color: white;
}
.darkmode #profile-tab-field-profil dt span, .darkmode #profile-menu a, .darkmode .profile-field label span {
  color: white !important;
}
.darkmode .EV_List .EV_Item {
  background: #34495E;
}

.darkmode .date-block {
  background: white;
  color: #1D2C33;
}

.darkmode .block-faq .faq-answer {
  background: #2c3e50;
  border: none;
}

.darkmode select option {
  background: #2c3e50;
}

.darkmode .forumline th, .darkmode .forumline td, .darkmode .table1 th, .darkmode .table1 td {
  border-color: #1D2C33;
}

.darkmode .left-overview a {
  color: #1D2C33;
}

.darkmode a.btn.btn-flat[href*="/register"] {
  background: #DC143C;
  color: white !important;
}
  
@media (max-width: 750px) {
   .darkmode .forum-lastpost, .darkmode .posts-lastpost {
    background: #2c3e50;
    border : none ;
  }
}

.darkmode .dropdown-box li a {
  color: black !important;
}

.darkmode .dropdown-box li.btn-quickquote a, .dropdown-box li.btn-quote a, .darkmode .dropdown-box li.btn-edit a, .darkmode .dropdown-box li.btn-delete a, .darkmode .dropdown-box li.btn-report a, .darkmode .dropdown-box li.btn-report-lock a, .darkmode .dropdown-box li.btn-ip a {
  color: white !important;
}

/*** Couleurs ***/

.darkmode *[style*="rgb(102, 0, 0);"], .darkmode *[style*="#660000"], .darkmode *[color="#660000"] {
  color: #F30000 !important;
}

.darkmode *[style*="rgb(255, 0, 0);"], .darkmode *[style*="#FF0000"], .darkmode *[color="#FF0000"] {
  color: #ED3C3F !important;
}

.darkmode *[style*="rgb(102, 51, 0);"], .darkmode *[style*="#663300"], .darkmode *[color="#663300"] {
  color: #895555 !important;
}

.darkmode *[style*="rgb(0, 102, 0);"], .darkmode *[style*="#006600"], .darkmode *[color="#006600"] {
  color: #00b400 !important;
}

.darkmode *[style*="rgb(102, 102, 51);"], .darkmode *[style*="#666633"], .darkmode *[color="#666633"] {
  color: #a2a200 !important;
}

.darkmode *[style*="rgb(0, 0, 255);"], .darkmode *[style*="#0000FF"], .darkmode *[color="#0000FF"] {
  color: #1999ff !important;
}

.darkmode *[style*="rgb(0, 125, 224);"], .darkmode *[style*="#000099"], .darkmode *[color="#000099"] {
  color: #007de0  !important;
}

.darkmode *[style*="rgb(102, 0, 255);"], .darkmode *[style*="#6600FF"], .darkmode *[color="#6600FF"] {
  color: #805cee !important;
}

.darkmode *[style*="rgb(153, 0, 153);"], .darkmode *[style*="#990099"], .darkmode *[color="#990099"] {
  color: #d259b5 !important;
}
 
 
/***************************** FIN CSS DARKMODE ******************/

[Invité]

Je relance

[creange]

Bonjour Zlork
avez vous mis la tchatbox sur une page html
si c est le cas vous pouvez intégrer le code css qui permet de mettre le thème en sombre
tout en bas de la page html à la condition d'avoir activé le haut et le bas de la page
bonne journée

[Invité]

Bonjour Zlork
avez vous mis la tchatbox sur une page html
si c est le cas vous pouvez intégrer le code css qui permet de mettre le thème en sombre
tout en bas de la page html  à la condition d'avoir activé le haut et le bas de la page
bonne journée

J'ai juste activé le module dans le PA. Et pris le lien qui va vers le chatbox en plein écran car je ne veux pas le voir directement sur le forum.

J'ai rien touché au niveau CSS, JS ou HTML.

[creange]

vous pouvez créer une page html avec le lien de la box en page libre dans les pages html et ensuite après l'avoir enregistrer vous basculer en mode avancé html et tout en bas de la page
mettre le code pour avoir le thème foncé et ne pas oublier de faire une redirection de la box vers la page html

[Invité]

vous pouvez créer une page html avec le lien de la box en page libre dans les pages html et ensuite après l'avoir enregistrer vous basculer en mode avancé html et tout en bas de la page
mettre le code pour avoir le thème foncé et ne pas oublier de faire une redirection de la box vers la page html

Excuse moi mais pour moi, c'est du chinois

Le CSS, je me débrouille un tout petit peu mais vraiment un tout petit peu mais alors le reste....

Pouvez-vous m'indiquer la démarche à suivre s'il vous plait ? Merci d'avance.

[creange]

Pour créer votre page HTML il faut aller dans les Modules puis gestion des pages HTML
ensuite Création en Mode Avancé HTML

Avant  vous allez ouvrir votre page où se trouve votre box
et clic droit pour afficher le code source de la page
une fois la page de la source ouverte  faites un copier de tout le  code qui s'ouvrira
et vous collerez  ce code dans la page que la page HTML que vous ferez
vous pourrez visualiser la page avant de l'enregistrer

ensuite vous placerez le code pour mettre le thème sombre tout en bas de la page toujours en mode avancé

j'espère avoir été clair

[Invité]

Pour créer votre page HTML il faut aller dans les Modules puis gestion des pages HTML
ensuite Création en Mode Avancé HTML

Avant  vous allez ouvrir votre page où se trouve votre box
et clic droit pour afficher le code source de la page
une fois la page de la source ouverte  faites un copier de tout le  code qui s'ouvrira
et vous collerez  ce code dans la page que la page HTML que vous ferez
vous pourrez visualiser la page avant de l'enregistrer

ensuite vous placerez le code pour mettre le thème sombre tout en bas de la page toujours en mode avancé

j'espère avoir été clair

J'ai réussi à faire la page HTML, c'est déjà par mal.

Maintenant, je mets quel code ? Celui du JS ? Du CSS ? Ou les deux ?

Le CSS que j'ai mis. Il y a une partie pour le bouton. Et l'autre pour le forum.

[creange]

pour faire plus simple revenez sur la méthode en mode WYZYWYG et placer le bouton
normalement ça devrait marcher
si ça ne marche pas il faudra placer le code css en bas de la page en mode avance HTML

[Invité]

pour faire plus simple revenez sur la méthode en mode WYZYWYG et placer le bouton
normalement ça devrait marcher
si ça ne marche pas il faudra placer le code css en bas de la page en mode avance HTML

Ca ne marche pas du tout.

Mais il n'y a pas moyen de faire autrement que de créer une page HTML ? Mettre le CSS du chatbox dans le CSS du mode sombre par exemple ?

[creange]

Avez vous coché UTILISER LE HAUT ET LE BAS DU FORUM ?
si vous l'activez vous devez retrouver le bouton de théme sombre
sinon pour le Css il va falloir que Mlle Alys revienne nous aider

[Invité]

Avez vous coché UTILISER LE HAUT ET LE BAS DU FORUM ?
si vous l'activez vous devez retrouver le bouton de théme sombre
sinon pour le Css il va falloir que Mlle Alys revienne nous aider

En activant cet option, je trouve les menus et donc le bouton.

Par contre le chatbox n'est pas centré. Puis évidemment le CSS n'est pas bon.

[creange]

mettez ce code en début de la page 

Code:

<br /><br /><br />
<center>
  
 <div style="text-align: center;">


et celui là en fin de page 

Code:

</center>
</center>

 </style>

ça devrait centrer la box 

Pour le css désolée j'espère que quelqu'un pourra trouver la solution

sur mon forum ça fonctionne sans que j'ai ajouté un code css dans la page 
mais je suis en version pph3 donc pour votre version peut être que c'est différent ...
faîtes quand même un essai c'est peut être ce code qui bloque .....!

bonne fin de soirée

[Invité]

Bon, ça ne fonctionne pas. En tout cas, ce n'est pas le résultat que je veux.

Je ne pensais pas que ça serait aussi compliqué. Je pensais qu'il suffisait intégrer le CSS de la chatbox dans le CSS du mode sombre mais non.


Merci en tout cas, j'espère que d'autres ont la solution

[chattigre]

Bonjour,

Mettre la Chatbox sur une page HTML ne changera rien pour avoir le mode sombre dessus, il s'agira toujours d'une iframe.

Il va falloir ajouter un script Javascript avec pour placement "Sur la chatbox" qui va ajouter une feuille CSS ou une classe dédiée.

Ajoutez ce script sur la Chatbox :

Code:

$(function() {
    if (my_getcookie("cookiemode")) {
        $("#chatbox").toggleClass("darkmode"));
    }
});

Par contre, votre script de base de mode sombre, il fonctionne bien pour le désactiver également ? Juste une question, comme ça, parce que j'ai un doute sur le test qui est fait dedans...


Bonne journée

[Invité]

Bonjour,

Mettre la Chatbox sur une page HTML ne changera rien pour avoir le mode sombre dessus, il s'agira toujours d'une iframe.

Il va falloir ajouter un script Javascript avec pour placement "Sur la chatbox" qui va ajouter une feuille CSS ou une classe dédiée.

Ajoutez ce script sur la Chatbox :

Code:

$(function() {
    if (my_getcookie("cookiemode")) {
        $("#chatbox").toggleClass("darkmode"));
    }
});

Par contre, votre script de base de mode sombre, il fonctionne bien pour le désactiver également ? Juste une question, comme ça, parce que j'ai un doute sur le test qui est fait dedans...


Bonne journée

Bonjour

Je suis content qu'on recommence à parler de JS et CSS

Si je comprend bien avec ce script, je vais pouvoir compléter le CSS du mode sombre que j'ai mis ? Cette partie là :

Code:

/*************************** CSS DARKMODE *************************/
 
body.darkmode {
  background-color: #2c3e50;
  color: #f5f7fa;
}
 
.darkmode .forum-section, .darkmode .posts-section, .darkmode .notification-row {
  background-color: #34495E;
}

.darkmode .forum-section:hover, .darkmode .posts-section:hover, .darkmode .notification-row:hover {
  background-color: #2c3e50;
}
 
.darkmode .forum-header, .darkmode .posts-header {
  background-color: #1D2C33;
}
.darkmode #privmsgs-menu li, .darkmode .forum-lastpost-author, .darkmode .posts-lastpost-author, .darkmode .block-topics .block-topics-posts i, .darkmode .block-topics .block-topics-views i, .darkmode .forum-lastpost-header i, .darkmode .forum-statistics-header i, .darkmode .posts-lastpost-header i, .darkmode .posts-statistics-header i, .darkmode .posts-lastpost i, .darkmode .forum-lastpost-author i, .darkmode .forum-lastpost-location i, .darkmode .forum-lastpost-time i, .darkmode .posts-lastpost-author i, .darkmode .posts-lastpost-time i, .darkmode select, .darkmode .input, .darkmode input, .darkmode .sceditor-container iframe, .darkmode .sceditor-container textarea, .darkmode .inputbox, .darkmode a, .darkmode a:visited, .darkmode .forum-description h3, .darkmode .posts-description h3 {
  color: white;
}
.darkmode .forum-statistics-posts span, .darkmode .forum-statistics-topics span, .darkmode .posts-statistics-replies span, .darkmode .posts-statistics-views span, .darkmode .profile-advanced-stats dt span[style*="536482"] {
  color: white;
}
.darkmode .forum-description p, .darkmode .posts-description p, .darkmode span.notification-date, .darkmode div.post-details {
  color: #CCCCCC;
}
.darkmode #tabs ul, .darkmode .tabs ul, .darkmode .box-body, .darkmode .block .block-content, .darkmode .block-subtle, .darkmode .post, .darkmode .post-aside, .darkmode .panel, .darkmode .post-section, .darkmode .fb-or-text, .darkmode .mod-news, .darkmode .mod-news-footer, .darkmode .social_login_group .fb-or-text, .darkmode #chatbox_contextmenu, .darkmode #help-button, .darkmode .fontbutton, .darkmode #header-user img, .darkmode .avatar-big img, .darkmode .avatar-default img, .darkmode .avatar-mini img, .darkmode .cb-avatar img, .darkmode .mod-login-avatar img, .darkmode input, .darkmode .forumline tbody tr, .darkmode .table1 tbody tr, .darkmode .calendar-cell {
  background-color: #34495E;
}
.darkmode .select-wrap select:hover, .darkmode .jumpbox-wrap select:hover, .darkmode .quickmod-wrap select:hover {
  border-color: #1D2C33;
}
.darkmode .block-market .market-item-price, .darkmode .block .block-secondary-content, .darkmode .block .sub-head, .darkmode .block .block-footer, .darkmode .post-aside, .darkmode .attachbox, .darkmode .box-foot, .darkmode .post-footer, .darkmode .quick-reply .textarea, .darkmode .jumpbox-wrap select, .darkmode .quickmod-wrap select, .darkmode .select-wrap select, .darkmode #divcolor, .darkmode #divsmilies, .darkmode #help-button, .darkmode #submit_button, .darkmode .format-message+label, .darkmode #tabs li:hover, .darkmode .tabs li:hover {
  background-color: #2c3e50!important;
  border-color: #2c3e50;
  color: #fff;
}
.darkmode .fa_like_list, .darkmode .fa_dislike_list, .darkmode .option_voters_list, .darkmode blockquote cite {
  color: rgba(255,255,255,0.6);
}
.darkmode dl.post-author-details span.label span, .darkmode #block-online .headline a, .darkmode .cp-sidebar a:not(.btn) {
  color: white !important;
}
.darkmode blockquote {
  background: #2c3e50;
}
 
.darkmode .btn, .darkmode input[type="submit"], .darkmode input[type="button"] {
  background: white;
  color: black !important;
}
.darkmode .quick-reply .quick-reply-btn {
  background: none;
  color: white !important;
}
.darkmode .sceditor-container textarea {
  color: white !important;
}
.darkmode .quick-reply-textarea-wrap .sceditor-container {
  border: none !important;
}
.darkmode .quick-reply .sceditor-button {
  background: white;
}
.darkmode .quick-reply-textarea-wrap .sceditor-container iframe, .darkmode .quick-reply-textarea-wrap .sceditor-container textarea {
  background-color: unset !important;
  color: white;
}
.darkmode #profile-tab-field-profil dt span, .darkmode #profile-menu a, .darkmode .profile-field label span {
  color: white !important;
}
.darkmode .EV_List .EV_Item {
  background: #34495E;
}

.darkmode .date-block {
  background: white;
  color: #1D2C33;
}

.darkmode .block-faq .faq-answer {
  background: #2c3e50;
  border: none;
}

.darkmode select option {
  background: #2c3e50;
}

.darkmode .forumline th, .darkmode .forumline td, .darkmode .table1 th, .darkmode .table1 td {
  border-color: #1D2C33;
}

.darkmode .left-overview a {
  color: #1D2C33;
}

.darkmode a.btn.btn-flat[href*="/register"] {
  background: #DC143C;
  color: white !important;
}
 
@media (max-width: 750px) {
  .darkmode .forum-lastpost, .darkmode .posts-lastpost {
    background: #2c3e50;
    border : none ;
  }
}

.darkmode .dropdown-box li a {
  color: black !important;
}

.darkmode .dropdown-box li.btn-quickquote a, .dropdown-box li.btn-quote a, .darkmode .dropdown-box li.btn-edit a, .darkmode .dropdown-box li.btn-delete a, .darkmode .dropdown-box li.btn-report a, .darkmode .dropdown-box li.btn-report-lock a, .darkmode .dropdown-box li.btn-ip a {
  color: white !important;
}

/*** Couleurs ***/

.darkmode *[style*="rgb(102, 0, 0);"], .darkmode *[style*="#660000"], .darkmode *[color="#660000"] {
  color: #F30000 !important;
}

.darkmode *[style*="rgb(255, 0, 0);"], .darkmode *[style*="#FF0000"], .darkmode *[color="#FF0000"] {
  color: #ED3C3F !important;
}

.darkmode *[style*="rgb(102, 51, 0);"], .darkmode *[style*="#663300"], .darkmode *[color="#663300"] {
  color: #895555 !important;
}

.darkmode *[style*="rgb(0, 102, 0);"], .darkmode *[style*="#006600"], .darkmode *[color="#006600"] {
  color: #00b400 !important;
}

.darkmode *[style*="rgb(102, 102, 51);"], .darkmode *[style*="#666633"], .darkmode *[color="#666633"] {
  color: #a2a200 !important;
}

.darkmode *[style*="rgb(0, 0, 255);"], .darkmode *[style*="#0000FF"], .darkmode *[color="#0000FF"] {
  color: #1999ff !important;
}

.darkmode *[style*="rgb(0, 125, 224);"], .darkmode *[style*="#000099"], .darkmode *[color="#000099"] {
  color: #007de0  !important;
}

.darkmode *[style*="rgb(102, 0, 255);"], .darkmode *[style*="#6600FF"], .darkmode *[color="#6600FF"] {
  color: #805cee !important;
}

.darkmode *[style*="rgb(153, 0, 153);"], .darkmode *[style*="#990099"], .darkmode *[color="#990099"] {
  color: #d259b5 !important;
}
 
/***************************** FIN CSS DARKMODE ******************/

Sinon je n'ai pas compris votre dernière question ?

Le script permet de permuter entre le mode clair (le css de base) et le mode sombre (CSS que j'ai ajouté) avec un bouton qui se trouve dans le menu burger (vous pouvez aller sur mon forum pour tester, n'hésitez pas). Par contre, en mode sombre, il y a un petit flash à chaque changement de page.... C'est peut être de ça vous voulez parler ? Si vous pensez améliorer le script, je suis preneur

Merci pour votre patience et votre aide.

[MlleAlys]

Par contre, votre script de base de mode sombre, il fonctionne bien pour le désactiver également ? Juste une question, comme ça, parce que j'ai un doute sur le test qui est fait dedans...

Hello, ce code semble fonctionnel, mais étant assez vieux et il me semble un bon patchwork de bidouillages déjà à l'époque, s'il y a moyen d'avoir une version plus "propre" je suis tout à fait preneuse aussi !

[chattigre]

Coucou,

Je suis allé voir sur le forum et j'ai donc ma réponse : Oui, ça marche ^^
En fait, c'est cette condition qui me dérangeait :

Code:

  if (my_getcookie("cookiemode")) {

Parce que quand le mode sombre a été désactivé puis est réactivé, ben le cookie est toujours là, mais vide... Mais bon, une chaine vide, ça vaut false, donc ça va

Par contre, est-ce que ça suffit comme ça ? :

Code:

if (my_getcookie("cookiemode")) {
  $('body').addClass('darkmode');
}
 
$(function() {
  $('body #main-menu').append('<div id="modeselect"> ☼ <label class="switch"><input type="checkbox"><span class="slider"></span></label> ☽ </div>');
  if (my_getcookie("cookiemode")) {
    $('#modeselect input').prop("checked", true );
  }
});
 
$(function() {
  $('#modeselect input').on('change', function() {
    $('body').toggleClass('darkmode');
    my_setcookie('cookiemode', $('body').attr('class') , { expires : 100 } );
  });
});

Normalement, body étant le 1er élément généré, il y a des chances que ça suffise et que ça réduise voire supprime le délai.
Je vous laisse tester et voir...

Sinon le script ne me choque pas ne t'inquiètes pas MlleAlys ^^
Je regarderai plus en détail demain si toutefois...

D'ailleurs, même chose pour la Chatbox, si ce script fonctionne il serait préférable je pense par rapport à ma 1ère proposition... :

Code:

if (my_getcookie("cookiemode")) {    $("#chatbox").toggleClass("darkmode"));}

Bonne soirée !

[MlleAlys]

Par contre, est-ce que ça suffit comme ça ? :

Code:

if (my_getcookie("cookiemode")) {
  $('body').addClass('darkmode');
}
 
$(function() {
  $('body #main-menu').append('<div id="modeselect"> ☼ <label class="switch"><input type="checkbox"><span class="slider"></span></label> ☽ </div>');
  if (my_getcookie("cookiemode")) {
    $('#modeselect input').prop("checked", true );
  }
});
 
$(function() {
  $('#modeselect input').on('change', function() {
    $('body').toggleClass('darkmode');
    my_setcookie('cookiemode', $('body').attr('class') , { expires : 100 } );
  });
});

Normalement, body étant le 1er élément généré, il y a des chances que ça suffise et que ça réduise voire supprime le délai.
Je vous laisse tester et voir...

Non, ça n'a pas l'air de fonctionner malheureusement.
Je me souviens que j'avais tenté de mettre la première partie du code sans la fonction directement entre balises script juste après la balise body, pour voir si ça limitait le délai, mais sans vraiment de différence significative...
J'ai pourtant des souvenirs de l'époque où sur certains forums le basculement au thème sombre était particulièrement imperceptible, mais peut être que c'était une technique totalement différente

[Invité]

Coucou,

Je suis allé voir sur le forum et j'ai donc ma réponse : Oui, ça marche ^^
En fait, c'est cette condition qui me dérangeait :

Code:

  if (my_getcookie("cookiemode")) {

Parce que quand le mode sombre a été désactivé puis est réactivé, ben le cookie est toujours là, mais vide... Mais bon, une chaine vide, ça vaut false, donc ça va

Par contre, est-ce que ça suffit comme ça ? :

Code:

if (my_getcookie("cookiemode")) {
  $('body').addClass('darkmode');
}
 
$(function() {
  $('body #main-menu').append('<div id="modeselect"> ☼ <label class="switch"><input type="checkbox"><span class="slider"></span></label> ☽ </div>');
  if (my_getcookie("cookiemode")) {
    $('#modeselect input').prop("checked", true );
  }
});
 
$(function() {
  $('#modeselect input').on('change', function() {
    $('body').toggleClass('darkmode');
    my_setcookie('cookiemode', $('body').attr('class') , { expires : 100 } );
  });
});

Normalement, body étant le 1er élément généré, il y a des chances que ça suffise et que ça réduise voire supprime le délai.
Je vous laisse tester et voir...

Sinon le script ne me choque pas ne t'inquiètes pas MlleAlys ^^
Je regarderai plus en détail demain si toutefois...

D'ailleurs, même chose pour la Chatbox, si ce script fonctionne il serait préférable je pense par rapport à ma 1ère proposition... :

Code:

if (my_getcookie("cookiemode")) {    $("#chatbox").toggleClass("darkmode"));}

Bonne soirée !

Malheureusement, ça ne marche pas. Le flash est toujours présent.... Pire, parfois la page reste en mode clair après changement.

J'ai testé aussi votre script pour la chatbox avec un élément CSS (body.chatbox) dans le CSS du mode sombre, ça ne marche pas non plus....

[Invité]

Je viens juste aux nouvelles

chattigre, tu as pu faire quelque chose ? Si besoin, on peut tester

[MlleAlys]

Coucou,
J'ai trouvé l'erreur, il y a une parenthèse en trop dans le js à appliquer sur la chatbox :

Code:

$(function() {
    if (my_getcookie("cookiemode")) {
        $("body.chatbox").toggleClass("darkmode");
    }
});

Pour le css, vous pouvez tester ça :

Code:

/* darkmode chatbox*/

.darkmode #cb_connect_option {
  background: unset !important;
}
.darkmode input#message {
  filter: hue-rotate(180deg) invert(1);
  background: #c9d8df;
}
.darkmode .chat-editor-inner button {
  color: white;
}
.darkmode .chat-editor-inner button:hover {
  color: black;
}
.darkmode .chat-row:nth-child(even), .darlmode #chatbox > :nth-child(even) {
  background: #1d2c33;
}
.darkmode #chatbox>p {
  border-color: black;
}
.darkmode span.msg, .darkmode #divcolor-preview {
  filter: invert(1) hue-rotate(180deg);
}

La difficulté va être la gestion des couleurs.... Ici j'ai mis juste une inversion en attendant, mais je ne suis pas certaine que ce soit la meilleure solution ! ^^"

[Invité]

Coucou,
J'ai trouvé l'erreur, il y a une parenthèse en trop dans le js à appliquer sur la chatbox :

Code:

$(function() {
    if (my_getcookie("cookiemode")) {
        $("body.chatbox").toggleClass("darkmode");
    }
});

Pour le css, vous pouvez tester ça :

Code:

/* darkmode chatbox*/

.darkmode #cb_connect_option {
  background: unset !important;
}
.darkmode input#message {
  filter: hue-rotate(180deg) invert(1);
  background: #c9d8df;
}
.darkmode .chat-editor-inner button {
  color: white;
}
.darkmode .chat-editor-inner button:hover {
  color: black;
}
.darkmode .chat-row:nth-child(even), .darlmode #chatbox > :nth-child(even) {
  background: #1d2c33;
}
.darkmode #chatbox>p {
  border-color: black;
}
.darkmode span.msg, .darkmode #divcolor-preview {
  filter: invert(1) hue-rotate(180deg);
}

La difficulté va être la gestion des couleurs.... Ici j'ai mis juste une inversion en attendant, mais je ne suis pas certaine que ce soit la meilleure solution ! ^^"

D'abord merci beaucoup, le JS pour le chatbox marche bien !

Je n'ai pas utilisé ton CSS. J'ai, pour le moment, juste mis ça :

Code:

.darkmode #cb_connect_option {
  background-color: #34495E !important;
}

.darkmode #chatbox > :nth-child(2n) {
  background-color: #2C3E50;
}

.darkmode #chatbox > p {
  border-color: #1D2C33;
}

.darkmode #chatbox_footer #divcolor, .darkmode #chatbox_footer #divsmilies, .darkmode #chatbox_footer #help-button, .darkmode #chatbox_footer #submit_button, .darkmode #chatbox_footer .format-message + label {
  background-color: #34495E !important;
}

Le chatbox est quelque chose qu'on va utiliser de manière occasionnel. Alors pour les couleurs, je ne vais pas me prendre la tête, vu le choix qu'il y a. Je souhaite juste inverser l'écriture noir en blanc si c'est possible

---

Petite question si demain je décide d'avoir la possibilité de créer des salons , il y aura aussi des choses à modifier sur le CSS ?

[chattigre]

Bonjour,

Pour la Chatbox, j'ai développé un CSS de mode sombre (version phpBB3) ...
Pour les messages, je me suis contenté d'une inversion de base. Après, il faut gérer les différents cas de couleurs de groupes si on veut par exemple.

Petit extrait comme ça :

Code:

#chatbox_members ul li[style="color:#1763A6"], #chatbox_members ul li a[style="color:#1763A6"], #chatbox_members ul li span[style="color:#1763A6"], #chatbox_members ul li span a[style="color:#1763A6"] {
    color: #22B7E8 !important;
}

#chatbox .user {
    color: white !important;
}

.chatbox-username .chatbox-user-username {
   color: inherit !important;
}

span[style="color:green"] {
    color: lightgreen !important;
}

span[style="color:red"] {
    color: #ff4a4a !important;
}

li.person[style*="--color_channel:#800080"] {
    --color_channel: #e44ef0 !important;
}


Ici :
- On gère la coloration des pseudos pour une couleur, qu'on remplace par une autre
- Les utilisateurs "normaux" passent en blanc
- On force l'héritage des couleurs de pseudos (pour les span imbriquées...)
- On passe les messages système en lightgreen
- ... et en lightred
- un salon avec couleur 800080 récupère une couleur e44ef0

Il y a un paquet de !important et surcharges de sélecteurs, vu que le principe est d'écraser des trucs déjà très précis que normalement on aurait retiré du CSS, mais là on ne peut pas, il faut passer par dessus...

Après, il faut faire des tests et voir ce qui vous correspond...

Pour le délai de transition, je suis tombé sur un code où il était quasiment absent en effet, il faut que je le retrouve et que je vois pour l'adapter... J'essayerai de voir ça dans les prochains jours...

J'ai bien reçu également votre MP, je reviens vers vous dès que j'ai pu tester

Bonne journée
Cordialement

[Invité]

Merci pour les couleurs, cela va peut-être me servir plus tard

Mon souci actuellement, c'est l'écriture et la couleur du texte dans la conversation. J'aimerais que le noir soit blanc en mode sombre. Les autres couleurs, comme je disais, je laisserai par défaut. J'ai essayé ce code mais sans succès (mais c'est normal, il doit avoir un truc que je n'ai pas compris )

EDIT :

Code:

.darkmode input#message {
  background: white;
}
.darkmode .msg span[style*="#000000"] {
      color: #FFFFFF !important;
}

Ça marche comme ça, j'ai fais au plus simple. S'il y a mieux je suis preneur

Pour le délai de transition, je suis tombé sur un code où il était quasiment absent en effet, il faut que je le retrouve et que je vois pour l'adapter... J'essayerai de voir ça dans les prochains jours...

Super.

Je relancerai si besoin ce week-end au moins pour éviter que le sujet tombe dans l'oubli

J'ai bien reçu également votre MP, je reviens vers vous dès que j'ai pu tester

Merci beaucoup pour votre aide

Bonne journée également

[Invité]

Je relance pour savoir si chattigre a pu trouver une solution pour améliorer le mode sombre et pour éviter que le sujet tombe dans l'oubli

[chattigre]

Bonjour,
Je ne vous ai pas oublié, désolé, j'étais absent ce week-end

J'ai repéré ce code notamment, qui je crois est utilisé sur certains forums, et passe par une approche différente : Javascript pur et localStorage ...


Je ne sais pas si j'aurai la possibilité de m'attarder sur du JS aujourd'hui, mais je pense à vous au plus vite !!

Merci de votre patience
Cordialement

[Invité]

Bonjour,
Je ne vous ai pas oublié, désolé, j'étais absent ce week-end

J'ai repéré ce code notamment, qui je crois est utilisé sur certains forums, et passe par une approche différente : Javascript pur et localStorage ...


Je ne sais pas si j'aurai la possibilité de m'attarder sur du JS aujourd'hui, mais je pense à vous au plus vite !!

Merci de votre patience
Cordialement

J'ai hâte de voir ça J'espère juste que ce nouveau code ne compliquera pas trop les modifications du CSS si on a besoin de modifier les couleurs ou autres  

[chattigre]

Re,

Ca fait partie de ce que je vais essayer d'adapter pour ajouter une classe au body au lieu d'un attribut comme actuellement dans le code en question

Normalement au niveau CSS ça devrait être pareil.
Bonne soirée

[Invité]

Re,

Ca fait partie de ce que je vais essayer d'adapter pour ajouter une classe au body au lieu d'un attribut comme actuellement dans le code en question

Normalement au niveau CSS ça devrait être pareil.
Bonne soirée

D'accord

Merci encore pour l'aide