Cách triển khai chế độ tối bằng CSS và JS

Kandy parfume

Chế độ tối đã trở nên phổ biến trong thời gian gần đây, vì thế thêm nó vào trang và app web là lựa chọn cần thiết. Dưới đây là hướng dẫn thêm Dark Mode bằng CSS và JS.

Lập trình chế độ tối

Dark Mode là một bảng màu thay thế cho web mà nó đổi background sáng truyền thống sang chế độ tối. Nó khiến trang của bạn “thân thiện “ với mắt người dùng hơn, đặc biệt ở trong điều kiện ánh sáng kém. Vì thế, chế độ tối đã trở thành một tính năng tiêu chuẩn trên nhiều trang web và ứng dụng.

Thiết lập dự án của bạn

Trước khi triển khai điều này, đảm bảo bạn đã thiết lập dự án và nó sẵn sàng hoạt động. Bạn nên sắp xếp file HTML, CSS và JavaScript theo cách có tổ chức và gọn gàng.

Code HTML

Bắt đầu bằng cách đánh dấu nội dung của trang web. Một khách có thể dùng thành phần theme_switcher để chuyển đổi giữa chế độ tối và sáng.

<body>
    <nav class="navbar">
        <span class="logo">Company Logo</span>

        <ul class="nav__lists">
            <li>About</li>
            <li>Blog</li>
            <li>Contact</li>
        </ul>

        <div id="theme__switcher">
            <img id="theme__image" src="./toggle.svg" alt="" />
        </div>
    </nav>

    <main>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Odit deserunt sit neque in labore quis quisquam expedita minus
    perferendis.
    </main>

    <script src="./script.js"></script>
</body>

Code CSS

Thêm CSS sau để tạo kiểu cho ví dụ. Điều này sẽ hoạt động như chế độ sáng mặc định mà sau này bạn sẽ bổ sung thêm kiểu mới cho chế độ tối.

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { font-size: 62.5%; }

body { font-family: "Quicksand", sans-serif; }

.navbar {
    display: flex;
    padding: 2rem;
    font-size: 1.6rem;
    align-items: center;
    color: rgb(176, 58, 46);
    background-color: #fdedec;
}

.navbar span { margin-right: auto; }

.logo { font-weight: 700; }

.nav__lists {
    display: flex;
    list-style: none;
    column-gap: 2rem;
    margin: 0 2rem;
}

#theme__switcher { cursor: pointer; }

main {
    width: 300px;
    margin: 5rem auto;
    font-size: 2rem;
    line-height: 2;
    padding: 1rem 2rem;
    border-radius: 10px;
    box-shadow: 2px 3.5px 5px rgba(242, 215, 213, 0.4);
}

Hiện tại, giao diện trông sẽ như thế này:

Giao diện CSS mới

Triển khai chế độ tối bằng CSS và JavaScript

Để triển khai chế độ tối, bạn sẽ xác định thiết kế của nó bằng CSS. Sau đó, bạn dùng JavaScript để chuyển giữa chế độ tối và sáng.

Tạo class theme

Dùng một class cho mỗi theme để bạn có thể dễ dàng chuyển giữa 2 chế độ.

.dark {
    background: #1f1f1f;
    color: #fff;
}

.light {
    background: #fff;
    color: #333;
}

Chọn các thành phần tương tác

Thêm JavaScript sau vào file script.js. Một chút code đầu tiên chỉ chọn các thành phần mà bạn sẽ dùng để xử lý việc chuyển đổi.

// Tham chiếu tới thành phần chuyển đổi theme và nội dung tài liệu

const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;

Thêm chức năng chuyển đổi

Tiếp theo, dùng JavaScript sau để chuyển đổi giữa class chế độ sáng (light) và tối (dark). Lưu ý rằng đây cũng là ý tưởng hay để thay đổi nút chuyển cho biết chế độ hiện tại.

// Hàm thiết lập theme

function setTheme(theme) {
    // Nếu nền tối, thêm class "dark", xóa class "light",
    //và điều chỉnh kiểu lọc
    bodyEl.classList.toggle("dark", theme === "dark");

    // Nếu nền sáng, thêm class "light", xóa class "dark",
    bodyEl.classList.toggle("light", theme !== "dark");

    // điều chỉnh bộ lọc của nút chuyển
    themeToggle.style.filter = theme === "dark" ? "invert(75%)" : "none";
}


// Hàm chuyển đổi theme giữa sáng và tối

function toggleTheme() {
    setTheme(bodyEl.classList.contains("dark") ? "light" : "dark");
}

themeToggle.addEventListener("click", toggleTheme);

Điều này khiến trang của bạn thay đổi theme bằng một click của container nút bấm.

Chế độ tối tạo bằng CSS và JS