dark mode code Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
2 posters

    dark mode code

    avatar
    staranime
    New Member


    Posts : 8
    Reputation : 1
    Language : arab

    In progress dark mode code

    Post by staranime September 23rd 2019, 7:58 pm

    Hi
      I want code for the dark mode of both mobile and PC versions
    Note that I use the wesomebb version
    +
      Installation method please
    my forum
    https://staranime.123.st/ Embarassed  Embarassed
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15192
    Reputation : 1696
    Language : English,Greek
    Location : Greece

    In progress Re: dark mode code

    Post by skouliki September 24th 2019, 8:26 am

    hello

    try this
    Admin panel..modules ..... HTML & JAVASCRIPT...Javascript codes management...Create a new Javascript
    to All the pages

    Code:

    // ZONA EDITABLE
    var versionForo = 'ModernBB';
    var posicionBotonModoNoche = 'toolbar'; // admite toolbar y flotando
    var css = '.conteneur_minwidth_IE,
    #wrap {
        background-color: #121212;
      color: grey;
    }
    .inner,
    .icon,
    .module,
    .content,
    .post,
    .row {
        background-color: #1c1c1c;
      color: grey; }
     
      .block-footer {
        background-color: #1d262c;
    }
    a {
        color: grey !important;
    }
    p {
        color: grey;
    }
    .block {
        background-color: #1d262c;
        color: grey;
    }
     
    #picture_legend, #privmsgs-menu {
        background-color: #1d262c;
    }
     .inner, .icon, .module, .content, .post, .row:hover {background-color:#1c1c1c !important;}
     
    li.row {
        border-color: grey !important;
    }
     
    .panel {
        background-color: #1c1c1c;
    }
    .row3 {
        background-color: #1c1c1c;
    }
     
    #cp-main .panel.sig {
        background-color: #1c1c1c;
    }
     
    .h3, h3 {
        border-color: #1c1c1c;
    }
     
    .button, .button1, .button2, input[type="submit"] {
        background-color: #1d262c;
    }';
    // FIN ZONA EDITABLE
     
    // eventos
    if (modoNocturnoActivado() == true) {
        $('head').append('<style>' + css + '</style>');
    }
    document.addEventListener("DOMContentLoaded", function(event) {
     
        if (posicionBotonModoNoche == 'toolbar' && _userdata["session_logged_in"] == 1) {
            document.getElementById('fa_menulist').innerHTML += '<li class="fa_separator"></li><li><a href="#" id="activar-modo-nocturno">' + textos() + '</a></li>';
        } else if (posicionBotonModoNoche == 'flotando' || _userdata["session_logged_in"] == 0) {
            versionForo = versionForo.toUpperCase();
            var contenedor_boton;
            if (versionForo == 'PHPBB3' || versionForo == 'MODERNBB') {
                contenedor_boton = document.getElementById('wrap');
            } else if (versionForo == 'PUNBB' || versionForo == 'INVISION') {
                contenedor_boton = document.getElementsByClassName('container_IE')[0];
            } else if (versionForo == 'PHPBB2') {
                contenedor_boton = document.getElementsByClassName('bodylinewidth')[0];
            } else {
                console.log('Versión de foro incorrecta. Solo se admiten: phpBB3, phpBB2, punBB, Invision y ModernBB');
            }
            contenedor_boton.innerHTML += '<div id="boton-flotante"><a href="#" id="activar-modo-nocturno">' + textos() + '</a></div>';
            var boton_flotante_element = document.getElementById('boton-flotante');
            boton_flotante_element.style.bottom = '0';
            boton_flotante_element.style.position = 'fixed';
            boton_flotante_element.style.backgroundColor = 'white';
            boton_flotante_element.style.padding = '4px';
            boton_flotante_element.style.fontSize = '14px';
            boton_flotante_element.style.border = '1px dotted #3a9bca';
        } else {
            console.error('Valor erroneo para la variable posicionBotonModoNoche');
        }
        document.getElementById('activar-modo-nocturno').addEventListener("click", function(event) {
            if (modoNocturnoActivado() == true) {
                document.cookie = "modoNoche=0; expires=Thu, 01 Jan 1970 00:00:00 UTC";
            } else {
                document.cookie = "modoNoche=1";
            }
            location.reload();
        });
    });
     
    // funciones
     
    function modoNocturnoActivado() {
        var name = 'modoNoche' + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1);
            if (c.indexOf(name) == 0) {
                return true;
            }
        }
        return false;
    }
     
    function textos() {
        if (modoNocturnoActivado() == false) {
            return 'Turn on night mode';
        } else {
            return 'Turn off night mode';
        }
    }

    avatar
    staranime
    New Member


    Posts : 8
    Reputation : 1
    Language : arab

    In progress Re: dark mode code

    Post by staranime September 24th 2019, 8:52 am

    skouliki wrote:hello

    try this
    Admin panel..modules ..... HTML & JAVASCRIPT...Javascript codes management...Create a new Javascript
    to All the pages

    Code:

    // ZONA EDITABLE
    var versionForo = 'ModernBB';
    var posicionBotonModoNoche = 'toolbar'; // admite toolbar y flotando
    var css = '.conteneur_minwidth_IE,
    #wrap {
        background-color: #121212;
      color: grey;
    }
    .inner,
    .icon,
    .module,
    .content,
    .post,
    .row {
        background-color: #1c1c1c;
      color: grey; }
     
      .block-footer {
        background-color: #1d262c;
    }
    a {
        color: grey !important;
    }
    p {
        color: grey;
    }
    .block {
        background-color: #1d262c;
        color: grey;
    }
     
    #picture_legend, #privmsgs-menu {
        background-color: #1d262c;
    }
     .inner, .icon, .module, .content, .post, .row:hover {background-color:#1c1c1c !important;}
     
    li.row {
        border-color: grey !important;
    }
     
    .panel {
        background-color: #1c1c1c;
    }
    .row3 {
        background-color: #1c1c1c;
    }
     
    #cp-main .panel.sig {
        background-color: #1c1c1c;
    }
     
    .h3, h3 {
        border-color: #1c1c1c;
    }
     
    .button, .button1, .button2, input[type="submit"] {
        background-color: #1d262c;
    }';
    // FIN ZONA EDITABLE
     
    // eventos
    if (modoNocturnoActivado() == true) {
        $('head').append('<style>' + css + '</style>');
    }
    document.addEventListener("DOMContentLoaded", function(event) {
     
        if (posicionBotonModoNoche == 'toolbar' && _userdata["session_logged_in"] == 1) {
            document.getElementById('fa_menulist').innerHTML += '<li class="fa_separator"></li><li><a href="#" id="activar-modo-nocturno">' + textos() + '</a></li>';
        } else if (posicionBotonModoNoche == 'flotando' || _userdata["session_logged_in"] == 0) {
            versionForo = versionForo.toUpperCase();
            var contenedor_boton;
            if (versionForo == 'PHPBB3' || versionForo == 'MODERNBB') {
                contenedor_boton = document.getElementById('wrap');
            } else if (versionForo == 'PUNBB' || versionForo == 'INVISION') {
                contenedor_boton = document.getElementsByClassName('container_IE')[0];
            } else if (versionForo == 'PHPBB2') {
                contenedor_boton = document.getElementsByClassName('bodylinewidth')[0];
            } else {
                console.log('Versión de foro incorrecta. Solo se admiten: phpBB3, phpBB2, punBB, Invision y ModernBB');
            }
            contenedor_boton.innerHTML += '<div id="boton-flotante"><a href="#" id="activar-modo-nocturno">' + textos() + '</a></div>';
            var boton_flotante_element = document.getElementById('boton-flotante');
            boton_flotante_element.style.bottom = '0';
            boton_flotante_element.style.position = 'fixed';
            boton_flotante_element.style.backgroundColor = 'white';
            boton_flotante_element.style.padding = '4px';
            boton_flotante_element.style.fontSize = '14px';
            boton_flotante_element.style.border = '1px dotted #3a9bca';
        } else {
            console.error('Valor erroneo para la variable posicionBotonModoNoche');
        }
        document.getElementById('activar-modo-nocturno').addEventListener("click", function(event) {
            if (modoNocturnoActivado() == true) {
                document.cookie = "modoNoche=0; expires=Thu, 01 Jan 1970 00:00:00 UTC";
            } else {
                document.cookie = "modoNoche=1";
            }
            location.reload();
        });
    });
     
    // funciones
     
    function modoNocturnoActivado() {
        var name = 'modoNoche' + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1);
            if (c.indexOf(name) == 0) {
                return true;
            }
        }
        return false;
    }
     
    function textos() {
        if (modoNocturnoActivado() == false) {
            return 'Turn on night mode';
        } else {
            return 'Turn off night mode';
        }
    }
    SORRY  but  i  am using wesomebb version
    and this code   does not  work  in my  forum
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15192
    Reputation : 1696
    Language : English,Greek
    Location : Greece

    In progress Re: dark mode code

    Post by skouliki September 24th 2019, 9:11 am


    CDDIVA likes this post