[Hướng dẫn] Tạo chế độ dark mode và light mode cho website không cần plugin

Tạo chế độ dark mode và light mode cho website không cần plugin

Chế độ dark mode và light mode là 2 chế độ hiển thị màu sắc giao diện tuỳ chỉnh giúp người dùng truy cập website có thể lựa chọn màu sắc phù hợp với nhu cầu của mình.

Có rất nhiều plugin hỗ trợ cài đặt chế độ này, điển hình là Plugin WP Dark Mode. Plugin này cũng khá nhẹ nhưng tuỳ biến cũng hơi phức tạp 1 chút nên nhiều người cũng thấy khó khăn trong việc cài đặt.

Hôm nay, flatsomea-z sẽ hướng dẫn các bạn cách tạo chế độ dark mode và light mode cho website không cần plugin

[Hướng dẫn] Tạo chế độ dark mode và light mode cho website không cần plugin

Demo: https://noithatxuong.vn/

Như mình đã chia sẻ ở các bài trước, bạn nên cài plugin Simple Custom CSS and JS để dễ dàng thêm html, css và js vào website mà không cần phải chỉnh sửa trực tiếp các file trong giao diện. Plugin này rất nhẹ và dễ sử dụng, khuyên bạn nên cài 1 lần dùng cho rất nhiều mục đích về sau ^^.

Plugin Simple Custom CSS and JS
Plugin Simple Custom CSS and JS

Sau khi bạn cài đặt và kích hoạt plugin, bạn làm theo các bước sau:

Bước 1: Tạo HTML cho nút Dark mode & Light mode

Truy cập: Custom CSS & JS > Add Custom HTML rồi xoá hết nội dung trong đó đi, copy và paste đoạn code sau vào nhé!

<div class="wpnm-button">
<div class="wpnm-button-inner-left"></div>
<div class="wpnm-button-inner"></div>
</div>

Bước 2: Tạo CSS cho nút Dark mode & Light mode

Truy cập: Custom CSS & JS > Add Custom CSS rồi xoá hết nội dung trong đó đi, copy và paste đoạn code sau vào nhé!

/* Dark mode switcher */
.wpnm-button {
font-size: 16px 
}
.wpnm-button-inner-left:before, .wpnm-button-inner-left:after {
box-sizing: border-box;
margin: 0;
padding: 0;
/*transition*/
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
outline: none 
}
.wpnm-button .wpnm-button-inner, .wpnm-button .wpnm-button-inner-left {
display: inline-block;
font-size: 0.875em;
position: relative;
padding: 0em;
line-height: 1em;
cursor: pointer;
color: rgba(149, 149, 149, 0.51);
font-weight: normal 
}
.wpnm-button .wpnm-button-inner-left:before {
content: '';
display: block;
position: absolute;
z-index: 1;
line-height: 2.125em;
text-indent: 2.5em;
height: 1em;
width: 1em;
margin: 0.25em;
/*border-radius*/
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
right: 1.625em;
bottom: 0em;
background: #FFB200;
transform: rotate(-45deg);
box-shadow: 0 0 0.625em white 
}
.wpnm-button .wpnm-button-inner-left:after {
content: "";
display: inline-block;
width: 2.5em;
height: 1.5em;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
background: rgba(255, 255, 255, 0.15);
vertical-align: middle;
margin: 0 0.625em;
border: 0.125em solid #FFB200 
}
.wpnm-button.active .wpnm-button-inner-left:before {
right: 1.0625em;
box-shadow: 0.3125em 0.3125em 0 0 #eee;
background: transparent 
}
.wpnm-button.active .wpnm-button-inner-left:after {
background: rgba(0, 0, 0, 0.15);
border: 0.125em solid white 
}
.wpnm-button .wpnm-button-inner-left {
color: rgba(250, 250, 250, 0.51);
font-weight: bold 
}
.wpnm-button.active .wpnm-button-inner-left {
color: rgba(149, 149, 149, 0.51);
font-weight: normal 
}
.wpnm-button.active .wpnm-button-inner-left + .wpnm-button-inner {
color: rgba(250, 250, 250, 0.51);
font-weight: bold 
}
body.dark-mode a {
color: #fff;
}
body.dark-mode .section-title a, body.dark-mode .entry-title a,body.dark-mode .entry-title a {
color: #f5f5f5;
}
body.dark-mode, body.dark-mode main *, .dark-mode #head, .dark-mode .navbar-default, .dark-mode .navbar-default .navbar-nav > li > a, .dark-mode .navbar-default .navbar-nav > li > a:hover, .dark-mode .navbar-default .navbar-nav > li > a:focus, .dark-mode .language-switcher a {
background: #2d2d2d;
color: #f5f5f5;
}

Bước 3: Tạo JS cho nút Dark mode & Light mode

Truy cập: Custom CSS & JS > Add Custom JS rồi xoá hết nội dung trong đó đi, copy và paste đoạn code sau vào nhé!

jQuery(function($) {
/*Click on dark mode icon. Add dark mode classes and wrappers. 
Store user preference through sessions*/
$('.wpnm-button').click(function() {
//Show either moon or sun
$('.wpnm-button').toggleClass('active');
//If dark mode is selected
if ($('.wpnm-button').hasClass('active')) {
//Add dark mode class to the body
$('body').addClass('dark-mode');
//Save user preference to Storage
localStorage.setItem('darkMode', true);
} else {
$('body').removeClass('dark-mode');
localStorage.removeItem('darkMode');
}
})
//Check Storage. Display user preference 
if (localStorage.getItem("darkMode")) {
$('body').addClass('dark-mode');
$('.wpnm-button').addClass('active');
}
})

Sau mỗi bước bạn lưu lại nhé. Vậy là xong, truy cập trang chủ, xoá cache đi và tận hưởng thành quả nha ^^.

Tạo chế độ dark mode và light mode cho website không cần plugin
Tạo chế độ dark mode và light mode cho website không cần plugin

Chế độ dark mode nếu bạn muốn màu nền khác thì sửa mục background trong CSS này thành màu bạn muốn

body.dark-mode, body.dark-mode main *, .dark-mode #head, .dark-mode .navbar-default, .dark-mode .navbar-default .navbar-nav > li > a, .dark-mode .navbar-default .navbar-nav > li > a:hover, .dark-mode .navbar-default .navbar-nav > li > a:focus, .dark-mode .language-switcher a { background: #2d2d2d; color: #f5f5f5; }

Chúc các bạn thành công ^^

Trả lời

Email của bạn sẽ không được hiển thị công khai.