Bootstrap - Chế Độ Màu: Tạo Sáng cho Thiết kế Web của Bạn

Xin chào, những nhà thiết kế web đầy tham vọng! Hôm nay, chúng ta sẽ bắt đầu một hành trình đầy thú vị vào thế giới của các chế độ màu Bootstrap. Như một người giáo viên máy tính gần gũi, tôi rất vui mừng được hướng dẫn các bạn qua chuyến phiêu lưu đầy màu sắc này. Hãy cùng vẽ lên web bằng cả ánh sáng và màu tối!

Bootstrap - Color Modes

Chế độ Tối: niềm vui của Con Cò

什么是暗黑模式？

Nhớ lại khi bạn còn là một đứa trẻ, bạn thường ngủ muộn để đọc sách dưới chăn với đèn pin? Chế độ tối cũng giống như vậy, nhưng cho các trang web! Đây là một schema màu sử dụng văn bản màu sáng trên nền tối. Nó dễ chịu hơn cho mắt trong điều kiện ánh sáng yếu và, thẳng thắn mà nói, nó cũng trông rất cool.

Tại sao Chế độ Tối Quan trọng

Trong những năm dạy học của tôi, tôi đã nhận thấy rằng mắt của học sinh thường mệt mỏi sau những buổi code dài. Chế độ tối giống như một liều thuốc an ủi cho những cơn đau mắt số hóa. Ngoài ra, nó còn giúp tiết kiệm pin trên màn hình OLED. Win-win!

Tổng quan: chiếu sáng các Chế độ Màu

Bootstrap 5.3.0 đã giới thiệu một tính năng thay đổi游戏的规则: các chế độ màu tích hợp. Điều này có nghĩa là bạn có thể dễ dàng chuyển đổi giữa các theme sáng và tối mà không cần phải mất nhiều công sức. Đó như thể có một công tắc ngày/đêm cho trang web của bạn!

Sử dụng: Đảo chuyển công tắc

Hãy cùng làm việc với một chút mã. Đừng lo lắng nếu bạn mới bắt đầu; chúng ta sẽ cùng nhau từng bước.

Bước 1: Kích hoạt Chế độ Màu

Trước tiên, chúng ta cần cho Bootstrap biết rằng chúng ta muốn sử dụng các chế độ màu. Thêm dòng này vào phần <head> của HTML:

<meta name="color-scheme" content="light dark">

Dòng này như thể nói với trình duyệt của bạn, "Hey, hãy chuẩn bị cả hai这套衣服 của sáng và tối!"

Bước 2: Chọn Mặc định

Bây giờ, hãy đặt chế độ màu mặc định. Trong file CSS của bạn, thêm:

:root {
color-scheme: light dark;
}

[data-bs-theme="light"] {
color-scheme: light;
}

[data-bs-theme="dark"] {
color-scheme: dark;
}

Mã này như thể.setup tủ quần áo của trang web của bạn. Chúng ta đang nói với nó, "Bạn có cả hai bộ quần áo sáng và tối. Mặc sáng mặc định, nhưng hãy sẵn sàng thay đổi!"

Bước 3: Áp dụng Theme

Trong thẻ <html> hoặc <body> của HTML, thêm thuộc tính data-bs-theme:

<html data-bs-theme="light">

hoặc

<body data-bs-theme="light">

Điều này như thể mặc trang phục mặc định cho trang web của bạn.

Chế độ Màu Tùy chỉnh: Vẽ Ngoài Lề

Nhưng tại sao lại dừng lại ở sáng và tối? Hãy tạo một chế độ màu tùy chỉnh! Tôi từng có một học sinh rất yêu thích màu tím, cô ấy muốn toàn bộ dự án của mình trong các gam tím. Dưới đây là cách chúng ta có thể tạo chế độ màu " tím":

[data-bs-theme="purple"] {
--bs-body-color: #e0d8ff;
--bs-body-bg: #4a0e78;
--bs-primary: #9d4edd;
--bs-secondary: #c77dff;
}

Mã này như thể tạo một bộ trang phục mới cho trang web của bạn. Chúng ta đang xác định các màu tự定义 cho văn bản, nền và nút trong theme tím của chúng ta.

Chuyển đổi giửa các Chế độ Màu: Hiệu ứng Bích Transformation

Bây giờ, hãy thêm một chút tương tác! Chúng ta sẽ tạo một nút để chuyển đổi giữa các chế độ màu sáng, tối và theme tím của chúng ta.

<button id="colorModeToggle">Chuyển đổi Chế độ Màu</button>

<script>
const toggle = document.getElementById('colorModeToggle');
const html = document.documentElement;
const modes = ['light', 'dark', 'purple'];
let currentMode = 0;

toggle.addEventListener('click', () => {
currentMode = (currentMode + 1) % modes.length;
html.setAttribute('data-bs-theme', modes[currentMode]);
});
</script>

Mã này như thể tặng trang web của bạn một枝魔杖. Mỗi lần nhấp sẽ chuyển đổi qua các chế độ màu, thay đổi toàn bộ giao diện của trang!

Bảng Phương thức: Bộ Công Cụ Chế độ Màu của Bạn

Dưới đây là bảng các phương thức bạn có thể sử dụng để làm việc với các chế độ màu:

Phương thức	Mô tả
`setTheme(theme)`	Đặt chế độ màu thành theme chỉ định
`getTheme()`	Trả về chế độ màu hiện tại
`toggleTheme()`	Chuyển đổi giữa các chế độ màu sáng và tối
`isValidTheme(theme)`	Kiểm tra theme chỉ định có hợp lệ hay không
`getPreferredTheme()`	Lấy chế độ màu ưa thích của người dùng dựa trên cài đặt hệ thống

Nhớ rằng, các phương thức này như các cọ vẽ khác nhau trong bộ công cụ thiết kế web của bạn. Sử dụng chúng khôn ngoan để tạo ra các trang web đẹp và khả năng truy cập!

Kết luận: Đường dẫn Sáng

Và đây bạn đã có, những phù thủy web tương lai! Chúng ta đã cùng nhau hành trình qua thế giới của các chế độ màu Bootstrap, từ cơ bản của sáng và tối đến việc tạo theme tùy chỉnh. Nhớ rằng, thiết kế web là về sự sáng tạo và trải nghiệm người dùng. Các chế độ màu là một công cụ mạnh mẽ để làm cho các trang web của bạn không chỉ chức năng mà còn thú vị để sử dụng vào bất kỳ thời điểm nào trong ngày hoặc đêm.

Khi chúng ta kết thúc, tôi nhớ lại một câu nói của họa sĩ nổi tiếng Claude Monet: "Màu sắc là niềm đam mê cả ngày của tôi, niềm vui và nỗi đau." Trong thiết kế web, màu sắc thực sự có thể là tất cả những điều này, nhưng với các chế độ màu của Bootstrap, nó mang lại nhiều niềm vui hơn là nỗi đau!

Tiếp tục thử nghiệm, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ vẽ lên canvas số hóa của web. Đến gặp lại, chúc các bạn mã hóa vui vẻ!

Credits: Image by storyset