Dark Mode hay còn gọi là chế độ tối là thuật ngữ đang trở nên phổ biến hơn hiện nay. Các ứng dụng di động, trình duyệt, các website lớn đang dần cập nhật thêm chức năng Dark Mode, hôm nay tôi chia sẻ đến bạn cách tạo nó trên website với Css và Javascript nhanh chóng và dễ dàng như thế nào?
Dark Mode website là gì?
Website có hỗ trợ chế độ Dark Mode khi người dùng có thể chuyển đổi nền website từ sáng sang tối và ngược lại.
Với chức năng này khi ở chế độ tối với bản thân tôi đọc nội dung trên website dễ dàng hơn và đặc biệt là đỡ bị nhức mắt khi đọc thời gian dài.
Rất có thể vì điều này mà chức năng Dark Mode trở nên được ưa chuộng và phổ biến như vậy. Không để bản đợi lâu, phần tiếp theo chúng ta sẽ cùng nhau học cách tạo nó trên website của chính mình.
Hướng dẫn tạo Dark Mode website với css và Javascript
Tư duy quan trọng ở đây là ở trên webiste có một biểu tượng, một cái công tắc mà khi ta nhấp vào website được chuyển đổi từ sáng thành tối và ngược lại.
Có 2 câu hỏi quan trọng cần trả lời:
- Tạo công tắc bằng cách nào?
- Và làm thế nào để chuyển đổi giao diện sáng tối?
Đầu tiên ta hãy hình dung giao diện website có 2 phiên bản sáng và tối vậy chắc chắn ta cần dùng css để tạo ra 2 lớp giao diện khác nhau phải không?
Ở giao diện sáng ta css như thông thường nhưng khi đến giao diện tối ta cần add cho body class dark và dựa vào class này để điều chỉnh các thành phần trên website ở giao diện tối.
Tiếp theo, bạn cần sử dụng js để khi nhấp vào công tắc thì sẽ chuyển đổi trạng thái và thực hiện động tác add và remove class dark cho body. Khi đó cả website sẽ được thay đổi theo chế độ đã chọn tương ứng.
Cuối cùng, sau khi đã thực hiện được các chức năng trên ta đã có sơ bộ website với chức năng Dark Mode nhưng có một điều xảy ra là khi reload lại trình duyệt thì giao diện trở lại với trạng thái ban đầu.
Vậy làm thế nào để có thể lưu lại chế độ đã chọn cho những lần truy cập sau?
LocalStorage chính là công cụ của Js mà chúng ta sẽ dùng để thực thi chức năng này.
Trên đây là sơ bộ ý tưởng chính, để bạn hiểu sâu và rõ bạn xem ngay video hướng dẫn chi tiết, bài bản ở bên dưới.
Và đừng quên tham khảo code ở đây
<!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">
<title>Dark Mode</title>
</head>
<body class="">
<style>
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");
body{
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.container{
max-width: 960px;
margin: 0 auto;
}
.d-flex{
display: flex;
}
.justify-content-between{
justify-content: space-between;
}
.align-items-center{
align-items: center;
}
#header{
background: #f5f5f5;
padding: 15px 0px;
}
#header #logo{
color: #333;
text-decoration: none;
font-size: 21px;
font-weight: 600;
}
#header #switch-mode{
outline: none;
border: none;
background: none;
cursor: pointer;
}
#header #switch-mode i{
font-size: 21px;
}
#content h1{
text-align: center;
font-size: 45px;
}
/* // Css Dark mode */
body.dark{
background: #000;
color: #fff;
}
body.dark #header{
background: #3f3e3e;
}
body.dark #header #logo{
color: #fff;
}
body.dark #header #switch-mode{
color: #fff;
}
</style>
<div id="wrapper">
<div id="header">
<div class="container d-flex justify-content-between align-items-center">
<a href="" id="logo">Unitop.vn</a>
<button id="switch-mode">
<i class="bi bi-moon-stars-fill"></i>
</button>
</div>
</div>
<div id="content" class="container">
<h1>Dark Mode website Html, Css and Javascript Unitop.vn</h1>
<h2>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id nihil dolore ex modi ab cum assumenda, velit cupiditate voluptatibus nisi doloremque fuga perspiciatis officia ipsa recusandae libero, dolores blanditiis atque!</p>
<p>Expedita, nobis aperiam nam eveniet mollitia libero voluptates sapiente ab ipsa velit maxime qui est id obcaecati sed quasi atque? Laboriosam eaque aliquid suscipit non et, harum excepturi voluptates fugiat.</p>
<h2>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id nihil dolore ex modi ab cum assumenda, velit cupiditate voluptatibus nisi doloremque fuga perspiciatis officia ipsa recusandae libero, dolores blanditiis atque!</p>
<p>Expedita, nobis aperiam nam eveniet mollitia libero voluptates sapiente ab ipsa velit maxime qui est id obcaecati sed quasi atque? Laboriosam eaque aliquid suscipit non et, harum excepturi voluptates fugiat.</p>
</div>
</div>
</body>
<script>
const body = document.body;
const switch_mode = document.querySelector('#switch-mode i');
// Load mode
let mode = localStorage.getItem('darkmode');
if(mode=='true'){
body.classList.add('dark');
switch_mode.className = "bi bi-brightness-high-fill";
}
switch_mode.addEventListener('click', () =>{
switch_mode.classList.toggle('bi-moon-stars-fill');
switch_mode.classList.toggle('bi-brightness-high-fill');
let mode = body.classList.toggle('dark');
// save mode
localStorage.setItem('darkmode', mode);
});
</script>
</html>
Kết luận
Vậy là bài viết này tôi đã giúp bạn cách tạo chế độ dark mode website với html, css và javascript. Tôi hi vọng bài hướng dẫn này hữu ích cho bạn.
Để nắm chắc hơn về các nội dung này để đi làm bạn có thể tham khảo thêm Html Css 21 Ngày và Js Beginner. Đây là 2 chương trình tôi đã giúp hàng ngàn người học và hoàn thiện kỹ năng html, css và Js của mình.
Trong chương trình tôi là người trực tiếp kèm cặp bạn qua nhóm kín để học và hoàn thiện kỹ năng tới khi đi làm. Mong sớm được gặp và hỗ trợ bạn!