[AwesomeBB] Mode sombre pour le chatbox

[Invité]

Rappel du premier message :

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 pour le sujet.

J'espère juste que chattigre n'a pas du mal à améliorer le script

[chattigre]

Coucou,

Je n'ai surtout pas eu le temps
Promis, je regarde ce soir ou demain !

Après, si quelqu'un d'autre a une idée, je n'ai pas l'exclusivité sur ce sujet
Bonne journée

[Invité]

Super.

Et pas de souci pour le temps Curieux de connaitre le résultat !

Merci encore

[chattigre]

Bonjour Zlork,

Ca y est, j'ai eu le temps de m'en occuper !

Je me suis débrouillé pour qu'il n'y ait, normalement, rien à changer dans le CSS.

En revanche, une modification de template semble nécessaire si on veut réduire le délai d'application à néant...  

Avez-vous personnalisé le template overall_header ?

Bonne journée

[Invité]

Bonjour Zlork,

Ca y est, j'ai eu le temps de m'en occuper !

Je me suis débrouillé pour qu'il n'y ait, normalement, rien à changer dans le CSS.

En revanche, une modification de template semble nécessaire si on veut réduire le délai d'application à néant...  

Avez-vous personnalisé le template overall_header ?

Bonne journée

Super

Oui pour ajouter le bouton inscrire quand on est invité. Je donne l'intégralité du template au cas où :

Code:

<!DOCTYPE HTML>
<html lang="{L_LANG_HTML}">
<head>
    <meta charset="{S_CONTENT_ENCODING}" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />

    <!-- BEGIN switch_canonical_url -->
    <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
    <!-- END switch_canonical_url -->

    {META_FAVICO}
    {META}
    {META_FB_LIKE}

    <title>{SITENAME_TITLE}{PAGE_TITLE}</title>

    {T_HEAD_STYLESHEET}
    {CSS}

    <meta name="theme-color" content="{GG_THEME_COLOR}" />

    <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
    <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />

    <script src="{JQUERY_PATH}" type="text/javascript"></script>
    <!-- BEGIN switch_recent_jquery -->
    <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
    <!-- END switch_recent_jquery -->

    <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

    <!-- BEGIN switch_fb_login -->
    <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
    <!-- END switch_fb_login -->

    <!-- BEGIN switch_ticker -->
    <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
    <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
    <!-- END switch_ticker -->

    <!-- BEGIN switch_ticker -->
    <script type="text/javascript">
        //<![CDATA[
        $(document).ready(function () {
            Ticker.start({
                height : {switch_ticker.HEIGHT},
                spacing : {switch_ticker.SPACING},
                speed : {switch_ticker.SPEED},
                direction : '{switch_ticker.DIRECTION}',
                pause : {switch_ticker.STOP_TIME}
            });
        });
        //]]>
    </script>
    <!-- END switch_ticker -->
    <script type="text/javascript">
        $(document).scroll(function() {
            var y = $(this).scrollTop();
            if (y > 164) {
                if($('.btn-fixed').find('.btn-fixed-txt').length !== 0){
                    $('.btn-fixed').addClass('btn-scrolled');
                }
            } else {
                if($('.btn-fixed').find('.btn-fixed-txt').length !== 0) {
                    $('.btn-fixed').removeClass('btn-scrolled');
                }
            }
        });
    </script>
    <!-- BEGIN switch_report_popup -->
    <script type="text/javascript">
        //<![CDATA[
        $(document).ready(function () {
            report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
            if (report != null) {
                report.focus();
            }
        });//]]>
    </script>
    <!-- END switch_report_popup -->
    <!-- BEGIN switch_enable_pm_popup -->
    <script type="text/javascript">
        //<![CDATA[
        $(document).ready(function () {
            pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
            if (pm != null) {
                pm.focus();
            }
        });
        //]]>
    </script>
    <!-- END switch_enable_pm_popup -->
    <!-- BEGIN switch_login_popup -->
    <script type="text/javascript">
        //<![CDATA[
    var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH},
    logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;

    $(document).ready(function () {
        $(window).resize(function () {
            var windowWidth = document.documentElement.clientWidth;
            var popupWidth = $("#login_popup").width();
            var mypopup = $("#login_popup");

            $("#login_popup").css({
                "left": windowWidth / 2 - popupWidth / 2
            });
        });
    });
        //]]>
    </script>
    <!-- END switch_login_popup -->

    {RICH_SNIPPET_GOOGLE}
    {HOSTING_JS}

    <!-- BEGIN google_analytics_code -->
    <script async src="https://www.googletagmanager.com/gtag/js?id={G_ANALYTICS_ID}"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', '{G_ANALYTICS_ID}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
        <!-- BEGIN google_analytics_code_bis -->
        gtag('config', '{G_ANALYTICS_ID_BIS}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
        <!-- END google_analytics_code_bis -->
    </script>
    <!-- END google_analytics_code -->

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <style>
        #logo-text {
            max-width: calc(100% - 150px);
        }

        .forum-description img {
            max-width: calc(100% - 15px);
        }
    </style>
</head>

<body id="top">
<!-- BEGIN switch_login_popup -->
<div id="login_popup" class="block-subtle" style="z-index: 10001 !important;">
    <div class="headline">
        {SITENAME}
        <button title="{L_LOGIN_CLOSE}" id="login_popup_close"><i class="material-icons">close</i></button>
    </div>
    <div id="login_popup_content">
        <div id="login_popup_message">
            {LOGIN_POPUP_MSG}
        </div>
        <br />
        <div id="login_popup_buttons">
            <!-- BEGIN switch_quick_login -->
         <div class="mt10">
            <div class="social_btn">
               <!-- BEGIN fb_quick_connect -->
               <div class="fb-login-button"></div>
               <!-- END fb_quick_connect -->
               &nbsp;
               <!-- BEGIN topicit_quick_connect -->
               <div class="ti-connect"></div>
               <!-- END topicit_quick_connect -->
            </div>
         </div>
            <br/>
            <!-- END switch_quick_login -->
            <form action="{S_LOGIN_ACTION}" method="get">
                <input type="submit" value="{L_LOGIN}" class="btn btn-default" />
                <input type="button" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" class="btn btn-default" />
            </form>
        </div>
    </div>
</div>
<!-- END switch_login_popup -->

{GREETING_POPUP}

<!-- BEGIN inactive_users_modal -->
<div id="inactive_popup" class="block-subtle" style="z-index: 10000 !important;">
    <div class="headline">
        {inactive_users_modal.L_MODAL_TITLE}
        <button title="{inactive_users_modal.L_CLOSE}" id="inactive_popup_close"><i class="material-icons">close</i></button>
    </div>
    <div id="inactive_popup_message">
        {inactive_users_modal.L_MODAL_BODY}
    </div>
    <br />
    <div id="inactive_popup_buttons">
        <button id="inactive_popup_url" class="button1">{inactive_users_modal.L_MODAL_BUTTON}</button>
    </div>
</div>
<script type="text/javascript">
    $('#inactive_popup #inactive_popup_close').on('mouseup', function () {
        document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;";
        $('#inactive_popup').hide(50);
    });
    $('#inactive_popup #inactive_popup_url').on('mouseup', function () {
        document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;";
        location.href = '{inactive_users_modal.U_MODAL}'
    })
</script>
<!-- END inactive_users_modal -->

<!-- BEGIN switch_like_popup -->
<div id="like_popup" class="block-subtle" style="z-index: 10001 !important;">
    <div class="headline">
        {SITENAME}
        <button title="{L_LIKE_CLOSE}" id="like_popup_close"><i class="material-icons">close</i></button>
    </div>
    <div id="like_popup_message">
        {LIKE_POPUP_MSG}
    </div>
    <br />
    <div id="like_popup_buttons">
        <form action="{S_LOGIN_ACTION}" method="get">
            <input type="submit" value="{L_LOGIN}" class="btn btn-default" />
            <input type="button" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" class="btn btn-default" />
        </form>
    </div>
</div>
<!-- END switch_like_popup -->
<header>
    <div id="main-menu-btn">
        <i class="material-icons">menu</i>
    </div>
    <a id="logo-link" href="{U_INDEX}">
        <div id="logo">
            <!-- BEGIN switch_logo_mob -->
            <img src="{switch_logo_mob.LOGO_MOB}" alt="{L_INDEX}" loading="lazy" />
            <!-- END switch_logo_mob -->
        </div>
        <!-- BEGIN switch_h1 -->
        <span id="logo-text">{switch_h1.MAIN_SITENAME}</span>
        <!-- END switch_h1 -->
    </a>
<!-- BEGIN switch_user_logged_out -->
    <a href="{S_LOGIN_ACTION}" class="button">{L_LOGIN}</a>
    <a href="/register" class="button">S'enregistrer</a>
    <!-- END switch_user_logged_out -->
    <!-- BEGIN switch_user_logged_in -->
    <a href="javascript:void(0)" id="header-user"></a>
    <a href="javascript:void(0)" id="header-notif"><i class="material-icons">notifications</i></a>
    <!-- END switch_user_logged_in -->
    <form method="get" action="{ACTION_SEARCH}" id="search-main">
        <input type="text" name="search_keywords" maxlength="128" placeholder="{L_SEARCH}" />
        <button type="submit"><i class="material-icons">search</i></button>
    </form>
    <ul id="header-navigation">
        <li><a id="navigation-home" href="{NAVIGATION_HOME}"><i class="material-icons">home</i>{L_FORUM}</a></li>
        <li><a id="navigation-recent" href="/latest"><i class="material-icons">comment</i>{L_TOPICS}</a></li>
    </ul>
</header>

<div id="main-menu" class="hidden">
    <div class="main-menu-headline">{SITENAME}</div>
</div>

<div id="main-user-menu" class="hidden">
</div>

<div id="notif-menu" class="hidden">
    <div class="main-menu-headline" data-text="_lang['Notifications']"></div>
    <ul id="notif_list">
        <li id="notif-view-all"><a href="/profile?mode=editprofile&page_profil=notifications" data-text="_lang['Notif_see_all']"></a></li>
    </ul>
</div>
<div id="live_notif">
</div>

<div id="header-banner">
    <div class="wrap">
        <!-- BEGIN switch_desc -->
        <h2 style="transition: none !important; opacity: 0;">{switch_desc.SITE_DESCRIPTION}</h2>
        <!-- END switch_desc -->
    </div>
</div>
<div id="wrap">

    <!-- BEGIN switch_ticker -->
    <div id="fa_ticker_block">
        <div class="module">
            <div class="inner">
                <div id="fa_ticker_container">
                    <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                        <div class="fa_ticker_content">
                            <!-- BEGIN ticker_row -->
                            <div>{switch_ticker.ticker_row.ELEMENT}</div>
                            <!-- END ticker_row -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END switch_ticker -->

    <!-- BEGIN html_validation -->
</div><!-- <div id="wrap" /> -->
</body>
</html>
<!-- END html_validation -->


[chattigre]

Bonjour,

Dans le template, après :

Code:

    <div class="main-menu-headline">{SITENAME}</div>

Ajoutez

Code:

<div id="modeselect"> ☼ <label class="switch"><input type="checkbox"/><span class="slider"></span></label> ☽ </div>

Enregistrez et publiez le template

Et voici le nouveau JS à placer sur Toutes les pages pour le mode sombre sur le forum.

Code:

const toggleSwitch = document.querySelector('#modeselect input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
    document.documentElement.classList.add(currentTheme);
 
    if (currentTheme === 'darkmode') {
        toggleSwitch.checked = true;
    }
}

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.classList.add("darkmode");
        document.documentElement.classList.remove("lightmode");
        localStorage.setItem('theme', 'darkmode');
    }
    else {
        document.documentElement.classList.add("lightmode");
        document.documentElement.classList.remove("darkmode");
        localStorage.setItem('theme', 'lightmode');
    }   
}

toggleSwitch.addEventListener('change', switchTheme, false);

On ne passe plus par aucune fonction de Forumactif ni par JQuery ni par cookies mais par du javascript pur et localStorage, donc normalement il n'y a plus de délai.

A noter que la classe darkmode n'est plus sur body mais sur html, puisque cet élément est le premier à être généré alors que pour body il faudrait envisager de temporiser
Si vous avez dans votre css des body.darkmode en sélecteur il faut les remplacer par html.darkmode .

Par ailleurs le mode clair ajoute une classe lightmode, si jamais ça vous intéresse ^^

Je vous laisse déjà me faire un retour et on verra après pour la Chatbox

Bonne journée

[Invité]

Bonjour,

Dans le template, après :

Code:

    <div class="main-menu-headline">{SITENAME}</div>

Ajoutez

Code:

<div id="modeselect"> ☼ <label class="switch"><input type="checkbox"/><span class="slider"></span></label> ☽ </div>

Enregistrez et publiez le template

Et voici le nouveau JS à placer sur Toutes les pages pour le mode sombre sur le forum.

Code:

const toggleSwitch = document.querySelector('#modeselect input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
 Â   document.documentElement.classList.add(currentTheme);
 Â 
 Â   if (currentTheme === 'darkmode') {
 Â       toggleSwitch.checked = true;
 Â   }
}

function switchTheme(e) {
 Â   if (e.target.checked) {
 Â       document.documentElement.classList.add("darkmode");
 Â       document.documentElement.classList.remove("lightmode");
 Â       localStorage.setItem('theme', 'darkmode');
 Â   }
 Â   else {
 Â       document.documentElement.classList.add("lightmode");
 Â       document.documentElement.classList.remove("darkmode");
 Â       localStorage.setItem('theme', 'lightmode');
 Â   }    
}

toggleSwitch.addEventListener('change', switchTheme, false);

On ne passe plus par aucune fonction de Forumactif ni par JQuery ni par cookies mais par du javascript pur et localStorage, donc normalement il n'y a plus de délai.

A noter que la classe darkmode n'est plus sur body mais sur html, puisque cet élément est le premier à être généré alors que pour body il faudrait envisager de temporiser
Si vous avez dans votre css des body.darkmode en sélecteur il faut les remplacer par html.darkmode .

Par ailleurs le mode clair ajoute une classe lightmode, si jamais ça vous intéresse ^^

Je vous laisse déjà me faire un retour et on verra après pour la Chatbox

Bonne journée

Cela ne fonctionne pas

Juste pour récapituler, j'avais :

Le JS pour le mode sombre :

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 } );
  });
});

Le CSS pour le bouton :

Code:

/* DEBUT INTERRUPTEUR DARKMODE */
#modeselect {
  color: white;
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}

.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: #15161A;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}
 
input:checked + .slider {
  background-color: #E84F1F;
}
 
input:focus + .slider {
  box-shadow: 0 0 1px #E84F1F;
}
 
input:checked + .slider:before {
  background:white;
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
/* FIN INTERRUPTEUR DARKMODE */

Et le CSS du forum que j'ai envoyé en MP

Là j'ai,

- Supprimé le JS + le CSS pour le bouton
- Ajouté une ligne comme indiqué dans la template en question (j'ai bien sur validé à la fin)
- Mis le nouveau JS
- Remplacé body.darkmode par html.darkmode

Déjà, le bouton slide a disparu, c'est juste une case à cocher. Et si je remet le CSS du bouton, le bouton est revenu mais j'en ai deux

Ensuite malheureusement, quand je clique sur le "bouton", rien ne se passe

[chattigre]

Re,

Effectivement... On va tout passer dans le template, ça devrait suffire. (C'est comme ça que j'avais testé...)
Quant au CSS, il fallait le laisser ^^

Je dois m'absenter jusqu'à ce soir, je vous redétaille tout cela dans quelques heures

[Invité]

Re,

Effectivement... On va tout passer dans le template, ça devrait suffire. (C'est comme ça que j'avais testé...)
Quant au CSS, il fallait le laisser ^^

Je dois m'absenter jusqu'à ce soir, je vous redétaille tout cela dans quelques heures

Oui, je m'en doutais pour le CSS du bouton

A tout à l'heure.

[chattigre]

Re,

Alors...
C'est pas forcément le meilleur endroit "officiel" pour mettre un script, mais le seul moyen de réduire au maximum le délai d'application, c'est de placer le code juste après le checkbox lui-même.

On ne va pas le placer DANS le menu, parce qu'avec tous les JS qui agissent dessus, ce serait casse-pipe... mais juste après.

Dans votre template overall_header, recherchez :

Code:

<div id="wrap">

Et juste avant ajoutez :

Code:

<script>
  const toggleSwitch = document.querySelector('#modeselect input[type="checkbox"]');
  const currentTheme = localStorage.getItem('theme');
 
  if (currentTheme) {
      document.documentElement.classList.add(currentTheme);
   
      if (currentTheme === 'darkmode') {
          toggleSwitch.checked = true;
      }
  }
 
  function switchTheme(e) {
      if (e.target.checked) {
          document.documentElement.classList.add("darkmode");
          document.documentElement.classList.remove("lightmode");
          localStorage.setItem('theme', 'darkmode');
      }
      else {
          document.documentElement.classList.add("lightmode");
          document.documentElement.classList.remove("darkmode");
          localStorage.setItem('theme', 'lightmode');
      }   
  }
 
  toggleSwitch.addEventListener('change', switchTheme, false);
</script>

- La 1ère version du script doit être supprimée, ce script seul gère tout le mode sombre pour le forum
- Conservez le CSS précédent, j'ai repris les classes

Le tout est testé et fonctionnel de mon côté

Bonne journée

[Invité]

Re,

Alors...
C'est pas forcément le meilleur endroit "officiel" pour mettre un script, mais le seul moyen de réduire au maximum le délai d'application, c'est de placer le code juste après le checkbox lui-même.

On ne va pas le placer DANS le menu, parce qu'avec tous les JS qui agissent dessus, ce serait casse-pipe... mais juste après.

Dans votre template overall_header, recherchez :

Code:

<div id="wrap">

Et juste avant ajoutez :

Code:

<script>
 Â const toggleSwitch = document.querySelector('#modeselect input[type="checkbox"]');
 Â const currentTheme = localStorage.getItem('theme');
 Â 
 Â if (currentTheme) {
 Â     document.documentElement.classList.add(currentTheme);
 Â   
 Â     if (currentTheme === 'darkmode') {
 Â         toggleSwitch.checked = true;
 Â     }
 Â }
 Â 
 Â function switchTheme(e) {
 Â     if (e.target.checked) {
 Â         document.documentElement.classList.add("darkmode");
 Â         document.documentElement.classList.remove("lightmode");
 Â         localStorage.setItem('theme', 'darkmode');
 Â     }
 Â     else {
 Â         document.documentElement.classList.add("lightmode");
 Â         document.documentElement.classList.remove("darkmode");
 Â         localStorage.setItem('theme', 'lightmode');
 Â     }    
 Â }
 Â 
 Â toggleSwitch.addEventListener('change', switchTheme, false);
</script>

- La 1ère version du script doit être supprimée, ce script seul gère tout le mode sombre pour le forum
- Conservez le CSS précédent, j'ai repris les classes

Le tout est testé et fonctionnel de mon côté

Bonne journée

Ca marche mieux ! Sauf pour les pages HTML qui mettent un certain temps à afficher mais ce n'est pas trop grave.

Par contre, je précise, que j'ai du remplacer body.darkmode par .darkmode body.

Du coup, il faut peut-être changer le JS de la ChatBox ?

Code:

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

[chattigre]

Re,

Par contre, je précise, que j'ai du remplacer body.darkmode par .darkmode body.

Pour quelle règle ?
Pour la règle du body exactement, oui, c'est comme ça qu'il faut faire ^^

Pour n'importe quelle autre règle, par exemple sur .row1 , pas besoin de laisser body dans le sélecteur hein
Possible d'avoir un exemple de page HTML où c'est long ?

Pour la chatbox, oui il va falloir changer :

Code:

$(function() {
    if (localStorage.getItem('theme') == 'darkmode') {
        $('body.chatbox').toggleClass('darkmode');
    }
});

Je vous laisse tester

[Invité]

Re,

Pour quelle règle ?
Pour la règle du body exactement, oui, c'est comme ça qu'il faut faire ^^

Pour n'importe quelle autre règle, par exemple sur .row1 , pas besoin de laisser body dans le sélecteur hein

Oui, pour le body. Pour tout le reste, je n'ai rien touché

Pour la chatbox, oui il va falloir changer :

Code:

$(function() {
 Â   if (localStorage.getItem('theme') == 'darkmode') {
 Â       $('body.chatbox').toggleClass('darkmode');
 Â   }
});

Je vous laisse tester

Il faut bien mettre sur le JS et non dans la template ? Si oui, ça n'a rien changé, le body n'est pas pris en compte :/

[chattigre]

Re,

Il faut bien mettre sur le JS et non dans la template ? Si oui, ça n'a rien changé, le body n'est pas pris en compte :/

JS sur la ChatBox oui

Cela fonctionne de mon côté pourtant...

[Invité]

Re,

Il faut bien mettre sur le JS et non dans la template ? Si oui, ça n'a rien changé, le body n'est pas pris en compte :/

JS sur la ChatBox oui

Cela fonctionne de mon côté pourtant...

> https://www.gemurama.com/chatbox/

Le fond est toujours blanc avec l'écriture en noir

Et c'est normal, le script comprend : body.chatbox.darkmode alors qu'il faut mettre .darkmode body.chatbox mais je ne sais pas comment traduire ça en JS....

[chattigre]

Ah, la classe sur la Chatbox était aussi sur le html...
Il me semblait l'avoir mise sur le body
Bien, pour vous éviter de réécrire le CSS, on peut tester comme ça :

Code:

$(function() {
    if (localStorage.getItem('theme') == 'darkmode') {
        $('body.chatbox').parent('html').toggleClass('darkmode');
    }
});

Bonne soirée

[Invité]

Ah, la classe sur la Chatbox était aussi sur le html...
Il me semblait l'avoir mise sur le body
Bien, pour vous éviter de réécrire le CSS, on peut tester comme ça :

Code:

$(function() {
 Â   if (localStorage.getItem('theme') == 'darkmode') {
 Â       $('body.chatbox').parent('html').toggleClass('darkmode');
 Â   }
});

Bonne soirée

Nickel, tout fonctionne.

Vraiment, merci beaucoup pour ton aide et ta patience.

Je passe le sujet en résolu.

[chattigre]

Re,

De rien, merci de votre patience également
N'hésitez pas à rouvrir un sujet si il y a un souci ou quelque chose qui manque.

Au fait, je n'ai pas regardé pour la lenteur d'application sur les pages HTML, est-ce que c'est bon ?

Bonne soirée

[Invité]

Re,

De rien, merci de votre patience également
N'hésitez pas à rouvrir un sujet si il y a un souci ou quelque chose qui manque.

Au fait, je n'ai pas regardé pour la lenteur d'application sur les pages HTML, est-ce que c'est bon ?

Bonne soirée

Bonjour

Pour les pages HTML, ce n'est pas le mode sombre qui est lent mais les pages elle-même qui mettent un tout petit peu de temps à charger mais je pense qu'on peut rien y faire ?

Le lien si vous voulez voir (naviguez dans le sommaire pour voir l'effet) : https://www.gemurama.com/h2-sommaire

[Lutins]

Bonjour @Zlork,

Pour les pages HTML, ce n'est pas le mode sombre qui est lent mais les pages elle-même qui mettent un tout petit peu de temps à charger mais je pense qu'on peut rien y faire ?

Globalement, votre site affiche de bonnes performances :

voir résultat:

Vous pouvez consulter le rapport complet sur ce lien. Vous pouvez améliorer son chargement en corrigeant les erreurs constatées.

Lutins

[Invité]

Bonjour @Zlork,

Vous pouvez consulter le rapport complet sur ce lien. Vous pouvez améliorer son chargement en corrigeant les erreurs constatées.

Lutins

Sympa, ce site, je ne connaissais pas.

Merci encore pour l'aide.

Je passe en résolu