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>
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
02 Jan 2022
Sulfikardi
1168
Web Design
