Matawebsite Promo Lebaran 2022

Membuat Fitur Dark Mode Pada Website

date 02 Jan 2022
date Sulfikardi
date 1168
date Web Design
Membuat Fitur Dark Mode Pada Website

Jika dibandingkan dengan melihat layar dengan tampilan light mode atau dengan latar belakang putih, memang mata akan lebih nyaman dengan mode gelap. Itulah mengapa kini para UI/UX Designer lebih memilih menggunakan dark mode pada theme website agar bisa mengurangi ketegangan pada mata saat terlalu lama melihat layar. Secara sederhana, dark mode adalah skema warna pada interface yang menampilkan teks cerah di atas latar belakang yang gelap.

Pada kesempatan kali ini kita akan membuat fitur website dark mode.

Langkah pertama, membuat halaman HTML yang akan di buat fitur Dark Mode

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="./main.css">

    <title>Dark Mode</title>

</head>

<body>

   

    <div class="container">

        <h2>Light Mode Theme</h2>

   

        <label class="switch">

            <input type="checkbox">

            <span class="slider round"></span>

        </label>

    </div>

</body>

</html>

Selanjutnya, Membuat Styling CSS pada halaman

@import url(https://fonts.googleapis.com/css?family=Lato:400,400italic,700|Sansita+One);

:root {

    --primary-color: #302AE6;

    --secondary-color: #536390;

    --font-color: #424242;

    --bg-color: #fff;

    --heading-color: #292922;

}

[data-theme="dark"] {

    --primary-color: #9A97F3;

    --secondary-color: #818cab;

    --font-color: #e1e1ff;

    --bg-color: #161625;

    --heading-color: #818cab;

}

body{

    font-family: "Lato", sans-serif;

    width: 100%;

    height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0;

    background-color: var(--bg-color);

}

h2{

    font-family: "Sansita One", serif;

    font-size: 2rem;

    margin-bottom: 1vh;

    color: var(--font-color);

}

.container{

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}

.switch {

    position: relative;

    display: inline-block;

    width: 60px;

    height: 34px;

  }

  .switch input {

    opacity: 0;

    width: 0;

    height: 0;

  }

  .slider {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #ccc;

    -webkit-transition: .4s;

    transition: .4s;

  }

  .slider:before {

    position: absolute;

    content: "";

    height: 26px;

    width: 26px;

    left: 4px;

    bottom: 4px;

    background-color: #fff;

    -webkit-transition: .4s;

    transition: .4s;

  }

  input:checked + .slider {

    background-color: #3D2C8D;

  }

  input:focus + .slider {

    box-shadow: 0 0 1px #3D2C8D;

  }

  input:checked + .slider:before {

    -webkit-transform: translateX(26px);

    -ms-transform: translateX(26px);

    transform: translateX(26px);

  }

  .slider.round {

    border-radius: 34px;

  }

  .slider.round:before {

    border-radius: 50%;

  }

langkah selanjutnya, menambahkan javascript untuk memanipulasi class HTML

 <script>

        const toggleSwitch = document.querySelector('.switch input[type="checkbox"]');

        const titlePage = document.querySelector('.container h2')

        function switchTheme(e) {

            if (e.target.checked) {

                titlePage.innerHTML = 'Dark Mode Theme'

                document.documentElement.setAttribute('data-theme', 'dark');

            }

            else {

                titlePage.innerHTML = 'Light Mode Theme'

                document.documentElement.setAttribute('data-theme', 'light');

            }    

        }

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

    </script>

 

Matawebsite Promo Lebaran 2022
sul.png

Sulfikardi

Web Design & Web Programming

Halo, saya seorang Web Developer yang terbiasa mengembangkan website menggunakan HTML, CSS, Javascript, PHP, MYSQL, dan Laravel. Disini saya akan membagikan pengalaman saya dalam membangun dan mengembangan website yang responsif dan dinamis

Artikel Terkait

Halo, ada yang bisa kami bantu?
Daftar Sekarang