VnTips 9 tháng trước

Cách thêm Dark Mode cho WordPress không cần plugin

Mục lục

Chế độ tối (Dark Mode) đã trở nên phổ biến trong vài năm qua. Nhưng việc phát triển nó khá khó khăn đặc biệt nếu trang web không sử dụng CSS Variable. Trong bài viết này, chúng ta sẽ xem xét một cách nhanh chóng và dễ dàng thêm Dark Mod vào website WordPress mà không cần cài thêm bất kỳ plugin nào.

Cách Dark Mode hoạt động

CSS bên dưới sẽ thực hiện hầu hết các công việc:

body.is-dark {
filter: invert(100%) hue-rotate(180deg);
}

body.is-dark img {
filter: invert(100%) hue-rotate(180deg) brightness(1.2);
}

/* Images that you want to stay inverted, change it accordingly */
body.is-dark .site-logo,
body.is-dark .icon {
filter: none;
}

/* All wrapping elements need to have background color */
body,
.main-container {
background-color: white;
}

Về cơ bản chúng tôi đã đảo ngược mọi thứ. Vì vậy, nền trắng trở thành đen, văn bản màu đen trở thành màu trắng và nút màu xanh lam trở thành màu xanh đậm. Sau đó, chúng tôi hoàn nguyên các hình ảnh để chúng trông không giống phim âm bản đồng thời giảm độ sáng một chút.

Bây giờ chúng ta đã biết chế độ tối hoạt động như thế nào, chúng ta cần quyết định xem bạn muốn website phát hiện tự động hay chuyển đổi thủ công.

Phương pháp 1: Tự động phát hiện chế độ Dark Mode
_{(Không có JavaScript)}

Phương pháp này sử dụng media query để kiểm tra cài đặt Chế độ tối trên thiết bị của bạn. Đơn giản chỉ cần thay đổi CSS ở trên thành code bên dưới:

@media (prefers-color-scheme: dark) {
body {
filter: invert(100%) hue-rotate(180deg);
}

img {
filter: invert(100%) hue-rotate(180deg) brightness(1.2);
}

/* Images that you want to stay inverted, change it accordingly */
.site-logo,
.icon {
filter: none
}
}

/* All wrapping elements need to have background color */
body,
.main-container {
background-color: white;
}

Phương pháp 2: Chuyển đổi thủ công
_{(Với JavaScript)}

HTML

Đầu tiên, chúng ta cần một nút chuyển đổi. Cách đánh dấu đơn giản nhất cho nó là sử dụng Checkbox được gói trong Label như hiển thị bên dưới:

<label class="dark-toggle">
<span> Light </span>
<input type="checkbox">
<div class="dark-toggle__switch" tabindex="0"></div>
<span> Dark </span>
</label>

CSS

Dưới đây là CSS cho Chế độ tối

.dark-toggle__switch {
--width: 44px;
--height: 24px;
--padding: 4px;

display: block;
overflow: hidden;
position: relative;
background-color: black;
width: var(--width);
height: var(--height);
border: 1px solid white;
border-radius: 1rem;
}

.dark-toggle__switch:focus {
box-shadow: 0 0 0 2px white;
}

.dark-toggle__switch::before {
content: "";
position: absolute;
z-index: 3;
display: inline-block;
background-color: white;
width: calc(var(--height) - var(--padding) - var(--padding));
height: calc(var(--height) - var(--padding) - var(--padding));
top: 50%;
left: var(--padding);
border-radius: 50%;
transform: translateY(-50%);
transition: all 0.25s ease-in-out;
}

input:checked + .dark-toggle__switch::before {
transform: translateY(-50%) translateX(calc(var(--width) / 2 - var(--padding) / 2));
}

.dark-toggle__switch::after {
content: "";
position: absolute;
top: 50%;
left: 0;
z-index: 2;
display: inline-block;
background-color: black;
transition: all 0.25s ease-in-out;
transform: translateY(-50%);
width: 1px;
height: 1px;
border-radius: 50%;
}

body.is-dark .dark-toggle__switch::after {
z-index: 4;
width: calc(var(--width) * 0.7);
height: calc(var(--width) * 0.7);
}

CSS này khá dài nên chúng tôi đã liên kết tới Gist. Chúng tôi cũng cung cấp phiên bản Sass nếu bạn thích phiên bản đó.

JavaScript

Có 3 việc chúng ta cần làm:

Thay đổi Listener trên Hộp kiểm để chuyển chế độ tối.
Nhập Key Listener vào Hộp kiểm để biết khả năng truy cập.
Lưu trữ trong bộ nhớ đệm để có thể tự động chuyển sang Chế độ tối khi tải.

Dưới đây là mã JS

const myDarkMode = {
init() {
this.changeListener();
this.tabindexListener();
},

/**
* Change listener for dark mode toggle
*/
changeListener() {
const $darkToggles = document.querySelectorAll('.dark-toggle input[type="checkbox"]');
if ($darkToggles.length <= 0) { return; }

$darkToggles.forEach(($t) => {
$t.addEventListener('change', (e) => {
this.toggle(e.currentTarget.checked);
});
});
},

/**
* Keyboard listener for dark mode toggle
*/
tabindexListener() {
const $darkSwitches = document.querySelectorAll('.dark-toggle__switch');

$darkSwitches.forEach(($s) => {
$s.addEventListener('keyup', (e) => {
if (e.key === 'Enter' || e.keyCode === 13) {
const $checkbox = e.currentTarget.closest('.dark-toggle').querySelector('input[type="checkbox"]');
$checkbox.checked = !$checkbox.checked;
this.toggle($checkbox.checked);
}
});
});
},

/**
* Toggle the body class and cache the variable
*/
toggle(isChecked) {
document.querySelector('body').classList.toggle('is-dark', isChecked);
localStorage.setItem('darkMode', isChecked);
},
};

document.addEventListener('DOMContentLoaded', () => {
myDarkMode.init();
});

Đoạn mã trên được lưu trữ biến darkMode trong localStorage mỗi khi chúng ta chuyển đổi nó. Nhưng mã để kiểm tra tải ở đâu?

Có, chúng tôi đã bỏ cái đó đi vì nó cần phải là thứ đầu tiên chạy. Vì vậy chúng ta phải đặt nó ngay sau khi mở <body> bằng hook như thế này:

add_action('wp_body_open', 'my_add_dark_mode_checker', 5);

function my_add_dark_mode_checker() { ?>
<script>
(function() {
const darkMode = localStorage.darkMode === 'true';
if (darkMode) {
document.querySelector('body').classList.add('is-dark');

// activate the toggle
document.addEventListener('DOMContentLoaded', () => {
const $toggles = document.querySelectorAll('.dark-toggle input[type="checkbox"]');
$toggles.forEach(($t) => {
$t.checked = true;
});
});
}
})();
</script>
<?php }

Lưu ý : Theme của bạn có thể chưa móc hàm wp_body_open().

Sửa lỗi Admin bar

Khi website bạn có bộ lọc, Thanh quản trị WordPress được đặt không chính xác bạn chỉ cần thêm CSS này để sửa nó:

html[lang]
{
margin-top: 0 !important
}

#wpadminbar {
position: sticky
;
}

/* Revert back the adminbar so it doesn't become White */
body.is-dark #wpadminbar {
filter: invert(100%) hue-rotate(180deg);
}

Phần kết luận

Phương pháp số 1 thực hiện nhanh hơn nhiều. Nhưng khách truy cập của bạn sẽ không biết rằng bạn có Chế độ tối nếu thiết bị của họ không được đặt ở chế độ Tối ngay từ đầu.

Phương pháp số 2 rõ ràng hơn đối với khách truy cập nhưng phức tạp hơn khi thực hiện.

76 lượt xem | 0 bình luận

Bình luận

Chia sẻ

Đề xuất cho bạn