Scribd Logo
Upload

Welcome to Scribd!

  • Cara Buat Dark Mode

    Uploaded by

    huda
    16 views1 page
    The document provides code for implementing a dark mode toggle switch on a website. It includes CSS styling for dark mode themes for various page elements. It also includes JavaScript code to toggle the "Night" class on the body tag when the dark mode checkbox is clicked, allowing the dark mode styles to take effect. The code snippet can be added to allow users to enable or disable a dark mode theme with a toggle switch.

    Original Description:

    Original Title

    cara buat dark mode

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document provides code for implementing a dark mode toggle switch on a website. It includes CSS styling for dark mode themes for various page elements. It also includes JavaScript code to toggle the "Night" class on the body tag when the dark mode checkbox is clicked, allowing the dark mode styles to take effect. The code snippet can be added to allow users to enable or disable a dark mode theme with a toggle switch.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    16 views1 page

    Cara Buat Dark Mode

    Uploaded by

    huda
    The document provides code for implementing a dark mode toggle switch on a website. It includes CSS styling for dark mode themes for various page elements. It also includes JavaScript code to toggle the "Night" class on the body tag when the dark mode checkbox is clicked, allowing the dark mode styles to take effect. The code snippet can be added to allow users to enable or disable a dark mode theme with a toggle switch.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 1

    #copy ini dibawah ]]></b:skin>

    <style>
    /* DARK MODE [syamsalabim.blogspot.com]*/
    .switch {position:relative;display:inline-block;width:50px;height:15px}
    .switch input {display:none;}
    .slider {position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;background-
    color:#424450;-webkit-transition:.4s;transition:.4s}
    .slider:before
    {position:absolute;content:&quot;&quot;;height:15px;width:15px;background-
    color:white;-webkit-transition:.4s;transition:.4s}
    input:checked + .slider {background-color:#208296}
    input:focus + .slider {box-shadow: 0 0 1px #2196F3}
    input:checked + .slider:before {-webkit-transform: translateX(-45px);-ms-transform:
    translateX(-45px);transform: translateX(-45px)}
    .slider.round {border-radius:20px}
    .slider.round:before {border-radius:30%}
    .Night
    {background-color:#000!important}
    .Night #wrapper,
    .Night #post-wrapper article
    {background-color:#1d2129!important}
    .Night #header .title,
    .Night #header .title a,
    .Night #header .description,
    .Night #post-wrapper article
    {color:#E0E0E0!important}
    </style>

    #copy ini diatas </body>

    <script>//<![CDATA[
    $("#Night").click(function(){
    $("body").toggleClass('Night');
    });
    //]]></script>

    #buat css custom dengan ini

    <label class='switch' for='Night'>


    <input id='Night' type='checkbox'/>
    <div class='slider round'/></label>

    You might also like