تركيب صندوق أكواد يحتوي زر النسخ و زر الوضع الليلي

<script>

  /*<![CDATA[*/

  /* Codebox by House Of Blogger */

  (() => {

    /* config */

    var config = {

      copyText: 'Copy to Clipboard',

      copiedText: 'Copied to Clipboard',

      lightText: 'Switch to Light',

      darkText: 'Switch to Dark',

      copiedToast: 'تــــم نســـخ الأكـــواد!'

    }

    /* main scripts */

    var cBox = document.querySelectorAll(".cBx");

    var dBdy = document.getElementsByTagName('body')[0];

    localStorage.getItem('CODE_MODE') === 'dark' ? dBdy.classList.add('cDrk') : dBdy.classList.remove('cDrk');

    for (var i = 0; i < cBox.length; i++){

      let c = cBox[i];

      c.setAttribute('data-code', i);

      c.insertAdjacentHTML("afterbegin", "<div class='cBxT'><button onclick='codeDark()'><svg class='line sun' viewBox='0 0 24 24'><circle cx='12' cy='12' r='5'></circle><line x1='12' y1='1' x2='12' y2='3'></line><line x1='12' y1='21' x2='12' y2='23'></line><line x1='4.22' y1='4.22' x2='5.64' y2='5.64'></line><line x1='18.36' y1='18.36' x2='19.78' y2='19.78'></line><line x1='1' y1='12' x2='3' y2='12'></line><line x1='21' y1='12' x2='23' y2='12'></line><line x1='4.22' y1='19.78' x2='5.64' y2='18.36'></line><line x1='18.36' y1='5.64' x2='19.78' y2='4.22'></line></svg><svg class='line moon' viewBox='0 0 24 24'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'></path></svg><span class='moon'>" + (config.darkText ? config.darkText : 'Dark Theme') + "</span><span class='sun'>" + (config.lightText ? config.lightText : 'Light Theme') + "</span></button><button onclick='codeCopy(" + i + ")'><svg class='line copy' viewBox='0 0 24 24'><rect x='9' y='9' width='13' height='13' rx='2' ry='2'></rect><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'></path></svg><svg class='line check' viewBox='0 0 24 24'><polyline points='9 11 12 14 22 4'></polyline><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'></path></svg><span class='copy'>" + (config.copyText ? config.copyText : 'Copy') + "</span><span class='check'>" + (config.copiedText ? config.copiedText : 'Copied') + "</span></button></div>");

    }

    window.codeDark = () => {

      localStorage.setItem("CODE_MODE", "dark" === localStorage.getItem("CODE_MODE") ? "light" : "dark");

      localStorage.getItem("CODE_MODE") === "dark" ? dBdy.classList.add("cDrk") : dBdy.classList.remove("cDrk");

    }

    window.codeCopy = (index) => {

      if (index !== undefined) {

        let el = document.querySelector(".cBx[data-code='" + index + "']");

        if (el !== null){

          let pre = el.querySelector('pre');

          if (pre !== null){

            var e = getSelection(),

                t = document.createRange();

            e.removeAllRanges();

            t.selectNodeContents(pre);

            e.addRange(t);

            document.execCommand("copy");

            e.removeAllRanges();

            el.classList.add('copied');

            toast(config.copiedToast ? config.copiedToast : 'Copied to clipboard');

            setTimeout(() => {

              el.classList.remove('copied');

            }, 2000)

          }

        }

      }

    }

  })()

  /*]]>*/

</script>