Dark mode (c&ograve;n gọi l&agrave; <a href="https://en.wikipedia.org/wiki/Light-on-dark_color_scheme">bảng phối m&agrave;u s&aacute;ng-tối</a>) đang dần trở n&ecirc;n phổ biến trong v&agrave;i năm gần đ&acirc;y. Chế độ n&agrave;y <a href="https://www.popsci.com/night-dark-mode-design/">tiết kiệm pin v&agrave; tốt cho mắt của người d&ugrave;ng</a> v&agrave; được hỗ trợ bởi tất cả c&aacute;c hệ điều h&agrave;nh lớn tr&ecirc;n m&aacute;y t&iacute;nh b&agrave;n v&agrave; thiết bị di động.
B&agrave;i viết sẽ hướng dẫn c&aacute;ch tạo tr&igrave;nh chuyển đổi giao diện web để người d&ugrave;ng c&oacute; thể tự do lựa chọn chế độ m&agrave;u trong hệ điều h&agrave;nh v&agrave; ghi nhớ lựa chọn thay đổi giao diện của người d&ugrave;ng trong kho lưu trữ cục bộ của tr&igrave;nh duyệt.
<h2 style="text-align: justify;">&nbsp;</h2>
<h2 style="text-align: justify;">Chọn bảng m&agrave;u ưa th&iacute;ch</h2>
Cũng giống như khi d&ugrave;ng <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">truy vấn phương tiện CSS</a> để ứng dụng web phản hồi với <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/width">c&aacute;c k&iacute;ch thước m&agrave;n h&igrave;nh kh&aacute;c nhau</a>, ta c&oacute; thể d&ugrave;ng truy vấn phương tiện để web phản hồi đối với <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme">giao diện m&agrave;u t&ugrave;y chọn của người d&ugrave;ng</a>.
<pre class="language-python"><code>body {
 background: white; color: black;
}

@media (prefers-color-scheme: light) {
 body {
 background: white; color: black;
 }
}

@media (prefers-color-scheme: dark) {
 body {
 background: black; color: white;
 }
}
</code></pre>
Xem bản mẫu trong đoạn code <a href="https://codesandbox.io/s/dark-mode-m9fkn?from-embed=&amp;file=/index.html">sandbox</a> dưới đ&acirc;y:
<a href="https://codesandbox.io/s/dark-mode-m9fkn?from-embed=&amp;file=/index.html"><img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/8172e0b6-e001-47ad-b189-f56c9abd4c0f" alt="Bản mẫu chế độ dark mode" /></a>
<h2 style="text-align: justify;">&nbsp;</h2>
<h2 style="text-align: justify;">Tip n&acirc;ng cao</h2>
Để thử nghiệm, bạn c&oacute; thể chỉ định gi&aacute; trị th&agrave;nh <code>light</code> hoặc <code>dark</code> trong c&ocirc;ng cụ d&agrave;nh nh&agrave; ph&aacute;t triển của Chrome.
Mở DevTools (F12), nhấn shift+cmd/ ctrl+P để chạy c&acirc;u lệnh, nhập chế độ m&agrave;u ưa th&iacute;ch v&agrave; chọn một t&ugrave;y chọn:
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/c23382a9-8204-469e-bd5a-eb50d7eaefa5" alt="Tip n&acirc;ng cao chuyển chế độ dark mode" />
Bạn cũng c&oacute; thể t&igrave;m c&aacute;c t&ugrave;y chọn n&agrave;y bằng c&aacute;ch nhấp v&agrave;o k&yacute; hiệu 3 dấu chấm dọc ở b&ecirc;n phải, sau đ&oacute; chọn More Tools &gt; Rendering.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/e94222a6-5fdb-4e57-b512-59f0a3d40b31" alt="Tip n&acirc;ng cao chuyển chế độ dark mode" />
<h2 style="text-align: justify;">&nbsp;</h2>
<h2 style="text-align: justify;">Tr&igrave;nh chuyển đổi chế độ tối</h2>
Để người d&ugrave;ng c&oacute; thể tự do bật tắt chế độ tối bất kể <a href="https://web.dev/prefers-color-scheme/#activating-dark-mode-in-the-operating-system">t&ugrave;y chọn mặc định của hệ điều h&agrave;nh</a> l&agrave; g&igrave;, ch&uacute;ng ta cần nhập code JavaScript.&nbsp;
Đầu ti&ecirc;n th&ecirc;m <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">data attribute </a><code>data-color-scheme</code> v&agrave;o <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement">phần tử gốc</a>. Khi trang web tải lần đầu, gi&aacute; trị sẽ được khởi tạo dựa tr&ecirc;n t&ugrave;y chọn của hệ thống.
<pre class="language-python"><code>const getPreferredColorScheme = () =&gt; {
 const darkQuery = "(prefers-color-scheme: dark)";
 const darkMQL = window.matchMedia ? window.matchMedia(darkQuery) : {};
 if (darkMQL.media === darkQuery &amp;&amp; darkMQL.matches) {
 return "dark";
 }
 return "default";
};
document.documentElement.setAttribute("data-color-scheme", getPreferredColorScheme());</code></pre>
Tiếp theo, th&ecirc;m c&aacute;c biến c&oacute; thể thay đổi gi&aacute; trị dựa tr&ecirc;n data attribute n&agrave;y.
<pre class="language-python"><code>:root {
 --color-text: #191924;
 --color-background: #fff;
}
:root[data-color-scheme="dark"] {
 --color-text: #fff;
 --color-background: #0d202d;
}
body {
 color: var(--color-text);
 background-color: var(--color-background);
}</code></pre>
Cuối c&ugrave;ng, để th&ecirc;m tr&igrave;nh chuyển đổi giao diện, ta th&ecirc;m n&uacute;t chuyển đổi v&agrave;o HTML:
<pre class="language-python"><code>&lt;button id="button"&gt;Toggle Dark Mode&lt;/button&gt;</code></pre>
v&agrave; tr&igrave;nh xử l&yacute; sự kiện nhấp chuột v&agrave;o JavaScript:
<pre class="language-python"><code>document.getElementById("button").onclick = () =&gt; {
 const colorScheme = document.documentElement.getAttribute("data-color-scheme");
 document.documentElement.setAttribute("data-color-scheme", colorScheme === "default" ? "dark" : "default");
};</code></pre>
Bản demo trực tiếp từ code <a href="https://codesandbox.io/s/dark-mode-toggle-seche?from-embed">sandbox</a>:
<a href="https://codesandbox.io/s/dark-mode-toggle-seche?from-embed"><img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/19910f00-efa0-4ca7-943d-dd1f1bea61de" alt="Bản demo trực tiếp từ code sandbox" /></a>
<h2 style="text-align: justify;">&nbsp;</h2>
<h2 style="text-align: justify;">Ghi nhớ lựa chọn của người d&ugrave;ng</h2>
Bạn sẽ thấy khi trang web được tải lại, gi&aacute; trị của data attribute cũng được đặt lại. Để ghi nhớ t&ugrave;y chọn giao diện m&agrave;u của người d&ugrave;ng, ta sẽ lưu trữ gi&aacute; trị của data attribute trong <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage">kho lưu trữ cục bộ</a>.
Khi trang web tải lại, h&atilde;y kiểm tra xem c&oacute; gi&aacute; trị n&agrave;o m&agrave; ta c&oacute; thể sử dụng hay kh&ocirc;ng:
<pre class="language-python"><code>const colorScheme = localStorage.getItem("color-scheme") || getPreferredColorScheme();
document.documentElement.setAttribute("data-color-scheme", colorScheme);</code></pre>
V&agrave; ta cần lưu lại gi&aacute; trị mới mỗi khi sử dụng tr&igrave;nh chuyển đổi giao diện:
<pre class="language-python"><code>document.getElementById("button").onclick = () =&gt; {
 const colorScheme = document.documentElement.getAttribute("data-color-scheme");
 const newColorScheme = colorScheme === "default" ? "dark" : "default";
 document.documentElement.setAttribute("data-color-scheme", newColorScheme);
 localStorage.setItem("color-scheme", newColorScheme);
};</code></pre>
Bản demo từ code <a href="https://codesandbox.io/s/dark-mode-toggle-local-storage-7vyc90?from-embed">sandbox</a>:
<a href="https://codesandbox.io/s/dark-mode-toggle-local-storage-7vyc90?from-embed"><img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/81562999-9a15-46ae-a34e-bddded84c011" alt="Bản demo từ code sandbox" /></a>
&nbsp;
<h2 style="text-align: justify;">Kết luận</h2>
Một website cung cấp đ&acirc;y đủ c&aacute;c chế độ hiển thị bao gồm dark mode sẽ gi&uacute;p n&acirc;ng cao trải nghiệm của người d&ugrave;ng hơn.
Hi vọng b&agrave;i viết n&agrave;y sẽ gi&uacute;p &iacute;ch cho bạn trong qu&aacute; tr&igrave;nh ho&agrave;n thiện website. Ch&uacute;c bạn th&agrave;nh c&ocirc;ng!

Admin

Cách triển khai chuyển đổi chế độ Dark Mode trong ứng dụng Web

Cùng tác giả

Admin

Có liên quan