React: Tạo chế độ Dark Mode cực kỳ đơn giản... tất nhiên là nếu bạn thích hoặc quá rảnh hoặc sợ người dùng bị đau mắt

2020 rồi, đến Facebook còn có Dark Mode thì không có lý do gì bạn không thêm một chút dark vào trang web của mình để tăng trải nghiệm người dùng lên một chút

Càng tốt hơn nếu bạn là một dev React thì có thể áp dụng vài bước đơn giản dưới đây, thời gian bỏ ra là không quá nhiều nhưng hiệu quả có lẽ sẽ khá tốt đấy. Nếu bạn hiểu ý tưởng này thì có thể chuyển đổi nó về cho project Vuejs hoặc JQuery chẳng hạn .

CSS

Hãy bắt đầu một bước đơn giản với CSS trước, các bạn cần xác định Dark Mode cần làm được những gì, với mình thì chỉ cần nó chuyển các thành phần màu trắng sáng của trang web về màu tối ví dụ như background chẳng hạn và ngược lại các nội dung tối thành màu sáng sủa hơn để nổi bật hơn trên nền tối, ví dụ như: text, icon, border,... tùy vào cảm quan của bạn thôi

Và để làm được điều đó thì tôi sẽ tạo ra 2 file CSS với tương ứng với 2 theme là darklight

dark.css

html[data-theme="dark"]  {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
}

light.css

html[data-theme="light"]  {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
}

Ở đây tôi sử dụng 2 biến là --color--background-color, cho bạn nào chưa biết thì cách khai báo có 2 dấu gạch ngang ở đầu tiên trong CSS được coi là khai báo biến, và biến số này các bạn có thể sử dụng để style ở trong toàn bộ trang web.

Và như đã thấy thì tôi sẽ sử dụng 2 biến này để quy định cho background và các dòng text trong toàn bộ trang web, nếu theme là dark thì set background màu tối một chút, text sẽ là màu trắng sáng và ngược lại

App.css

.App-header {
  background-color:var(--background-color);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color:var(--color);
}

Thêm chiếc Component

Nào đoạn CSS chỉ có thế kia thôi, quá ez rồi. Giờ đến phần xử lý chính, các bạn tạo thêm một component tên ToggleDarkMode, chúng ta sẽ thêm một chút code vào index.js như sau:

ToggleDarkMode/index.js

const DarkModeToggle = () => {
  const [isDark, setIsDark] = useState(localStorage.getItem("theme") === "dark");
  useEffect(() => {
    document
    .getElementsByTagName("HTML")[0]
    .setAttribute("data-theme", localStorage.getItem("theme"));
  },[]);
  
  return (
      <input
        type="checkbox"
        defaultChecked={isDark}
      />
  )
}

Ở đây tôi sử dụng localStorage để lưu lại trạng thái của theme ngay trên trình duyệt của người dùng, mỗi lần tải lại trang web tôi sẽ kiểm tra trạng thái này để xem có phải người này đã bật dark mode hay không và đồng thời gán trạng thái này vào attribute data-theme.

Bạn nào không nhớ thì có thể lật lên xem phần CSS, attribute này sẽ được dùng làm selector để xác định xem chúng ta sẽ dùng style dark hay là light

Và tôi có một cái checkbox be bé sẽ được đặt trạng thái checked nếu người dùng đang sử dụng theme dark, bây giờ chúng ta sẽ thêm code xử lý để dùng checkbox này làm công tắc bật tắt dark mode đây

ToggleDarkMode/index.js

const toggleThemeChange = () => {
    if (isDark) {
      localStorage.setItem("theme", "light");
      document
        .getElementsByTagName("HTML")[0]
        .setAttribute("data-theme", "light");
        setIsDark(true);
    } else {
      localStorage.setItem("theme", "dark");
      document
        .getElementsByTagName("HTML")[0]
        .setAttribute("data-theme", "dark");
        setIsDark(false);
    }
}

//...
<input
    type="checkbox"
    defaultChecked={isDark}
    onChange={() => toggleThemeChange()}
/>

Phần này thì quá dễ rồi, thêm một sự kiện onChange và trong sự kiện này chúng ta sẽ kiểm tra theme hiện tại đang là gì, nếu nó là light thì ta sẽ đổi nó về dark, và ngược lại 😄

Và cuối cùng là thành quả:

Khá là đơn giản đúng không, nhưng hiệu quả bất ngờ. Các bạn có thể xác định thêm các thành phần màu khác tùy ý, chơi 7 màu RGB luôn cũng được

Cám ơn đã theo dõi bài viết!


All Rights Reserved