Selamat Membaca

Cover Membuat Dark Mode dan Light Mode di HTML Menggunakan CSS dan Javascript

Membuat Dark Mode dan Light Mode di HTML Menggunakan CSS dan Javascript

Cara bikin Website

Pada kesempatan ini saya ingin berbagi pengalaman tentang Membuat Dark Mode dan Light Mode di HTML Menggunakan CSS dan Javascript yang sudah saya terapkan pada website ini. Pada tutorial ini, saya menggunakan vanilla js dan pure css karena saya berharap website ini benar-benar bersih dari framework atau library css ataupun javascript.

 
Uwais Code @Saweria
 

Caranya cukup sederhana sih, dan bisa kamu sesuaikan dengan kebutuhan pada website atau aplikasi kamu sendiri. Baik kita langsung saja ya.

  1. Buat file html dengan contoh kode seperti berikut :
<nav class="navbar">
  <div class="container">
    <ul class="nav-links">
      <li class="nav-item active">home</li>
      <li class="nav-item">projects</li>
      <li class="nav-item">blog</li>
      <li class="nav-item" id="toggle">🌞</li>
    </ul>
  </div>
 </nav>

<section class="hero container">
  <div class="hero-info">
    <h2 class="hero-nm">Hi, I'm Vaishnav</h2>
    <p class="hero-tag">Design & Code</p>
    <p class="hero-abt">a just another guy who love working on new <span class="highlight">Projects</span>, and
    <span class="highlight">UI/UX Design</span> + <span class="highlight">Development</span></p>
    <a class="btn" href="#">About me</a>
  </div>
</section>

 

Uwais Code @Saweria
    2. Buat file css atau sisipkan kode css berikut pada kode html

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
/* Common Style */
/* switch color theme */
:root {
    --bg-color: #171923;
    --bg-light: #232535;
    --font-color: #c5cddb;
    --font-light: #ffffff;
}
.lightMode {
  --bg-color: #E8E6DC;
  --bg-light: #DCDACA;
  --font-color: #3D3D3D;
  --font-light: #202020;
}
/* end switch color theme */
.nav-links #toggle {
  pointer: cursor !important;
}
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
body {
    color: var(--font-light);
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bg-color);
    transition: all 500ms;
}
p {
    color: var(--font-color);
}
.container {
    max-width: 1200px;
    display: block;
    margin: auto;
    padding: 0 1rem;
}
.highlight {
    color: var(--font-light);
}
.btn {
    padding: 10px 30px;
    border: 3px solid var(--font-light);
    transition: all 250ms;
}
.btn:hover {
    color: var(--bg-color);
    background-color: var(--font-light);
}
/* End Common Styles */

/* Navbar */
nav {
    background-color: var(--primary);
}
nav .container {
    display: block;
    padding: 2rem 1.5rem;
    margin: 2rem auto;
    text-align: center;
}

nav .nav-links .nav-item {
    list-style: none;
    display: inline;
    border-radius: 0.25rem;
    line-height: 1.5rem;
    padding: 0.5rem 0.75rem;
    margin: 1rem;
    transition: all 250ms;
    cursor: pointer;
}
nav .nav-links .active {
    font-weight: 700;
    color: var(--link-btn);
}
nav .nav-links .nav-item:hover {
    background-color: var(--bg-light);
}
a {
    text-decoration: none;
    color: var(--link-btn);
}
/* End Navbar */
/* hero section */
.hero {
    max-width: 650px;
    margin: 3rem auto;
    padding-top: 1rem;
    padding-bottom: 3rem;
    text-align: center;
}
.hero-info h2{
    margin: 1rem 0;
    font-weight: 400;
}
.hero-tag {
    font-size: 5rem;
    font-weight: 600;
    margin: 1rem 0;
}
.hero-abt {
    line-height: 1.5rem;
    margin: 3rem auto;
    max-width: 500px;
}
/* end hero */

 

  1. Buat file javascript atau sisipkan kode javascript pada kode html
const toggle = document.querySelector("#toggle");
toggle.addEventListener("click", modeSwitch);

let isLight = true;

function modeSwitch() {
  isLight = !isLight;
  let root = document.body;
  
  isLight ? toggle.innerText = "🌞" : toggle.innerText = "🌚";
  
  root.classList.toggle("lightMode");
}

 

Jika semua sudah selesai, silahkan dicoba dan jika berhasil maka hasilnya akan seperti ini :

Baik itulah sedikit penjelasan tentang membuat toggle dark/light mode, semoga kita bisa mengambil ibroh dari postingan ini…

Barakallahufiikum…

 
Uwais Code @Saweria
 

Sumber : https://codepen.io/vaishnav21/full/YzGGZYe

WhatsApp
Telegram