Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Dark Mode Với Framework Halfmoon

Tạo Dark Mode Với Framework Halfmoon


Ngày 3 Tháng 10 Năm 2020

Tạo Dark Mode Với Framework Halfmoon

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo dark mode cho trang web bằng framework Halfmoon nhé!

Giới Thiệu Về FrameWork Halfmoon

Halfmoon là một framework dành cho thiết kế web với nhiều tính năng và component hữu ích. Tính năng qua trọng và nổi bật nhất là tạo dark mode(chế độ tối) cho trang web của bạn bằng cách thêm class dark-mode vào phần tử. Và framework này thường chủ yếu được sử dụng để xây dựng các trang admin, dashboard.
Theo mình thấy nó khá giống với Bootstrap từ hệ thống lưới đến các component cơ bản. Tuy nhiên nó cũng có các phần tử khác khá thú vị mà mình sẽ giới thiệu ở bên dưới nhé!

Cách Tải Về FrameWork Halfmoon

Nó có rất nhiều cách thiết lập cho trang web bằng việc download file thủ công, npm... Tuy nhiên ở đây mình sẽ sử dụng halfmoon thông qua CDN để dễ dàng cài đặt cũng như giúp bạn dễ dàng theo dõi hơn. Bạn chỉ cần gắn mã CDN bên dưới vào file HTML là có thể sử dụng được rồi nhé:

CSS:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon-variables.min.css" rel="stylesheet" / >

Javascript:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/halfmoon.min.js"></script>

Nếu bạn muốn tìm hiểu các cách cài đặt halfmoon khác thì có thể truy cập ở đây nhé.

Hiển Thị Table Darkmode Bằng HalfMoon

Sau khi bạn thiết lập xong halfmoon vào cho trang web thì bước tiếp theo chúng ta sẽ đi vào tìm hiểu cách tạo table dark mode bằng framework này nhé!

HTML:

<!--Class dark-mode để hiển thị chế độ tối cho bảng-->
<div class="dark-mode">
<table class="table ">
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th class="text-right">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>John</td>
      <td>Doe</td>
      <td class="text-right">25</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jane</td>
      <td>Violet</td>
      <td class="text-right">27</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Jack</td>
      <td>Gates</td>
      <td class="text-right">33</td>
    </tr>
  </tbody>
</table>
</div>

Và kết quả bạn xem ở bên dưới nhé:

See the Pen table darkmode with halfmoon framwork by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn bỏ div có class dark-mode thì bảng này sẽ tự động chuyển sang chế độ light mode nhé!

Nguồn

Tạo Nút Chuyển Đổi Darkmode Sang Lightmode

Đôi khi nhiều người dùng không muốn sử dụng chế darkmode thì chúng ta có thể tạo nút để chuyển đổi trạng thái cho component từ dark mode sang light mode bằng tính năng có sẵn trong framework halfmoon. Để giúp bạn dễ dàng theo dõi thì mình sẽ thử áp dụng tính năng này với bảng ở phía trên nhé!

HTML:


<p>
  <button class="btn btn-primary" type="button" onclick="toggleDemo()">Chuyển Dark mode sang Light mode!</button>
</p>
<table class="table ">
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th class="text-right">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>John</td>
      <td>Doe</td>
      <td class="text-right">25</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jane</td>
      <td>Violet</td>
      <td class="text-right">27</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Jack</td>
      <td>Gates</td>
      <td class="text-right">33</td>
    </tr>
  </tbody>
</table>

Javascript:

function toggleDemo() {
halfmoon.toggleDarkMode();
}

Và kết quả bạn xem ở bên dưới nhé:

See the Pen Darkmode to Lightmode with halfmoon by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Component Dropdown Trong Halfmoon

Dưới đây là ví dụ về dropdown component trong halfmoon nhé!

See the Pen dropdown component in halfmoon by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Component Tooltip Trong Halfmoon

Dưới đây là ví dụ về tooltip component trong Halfmoon nhé!

See the Pen dropdown tooltip in halfmoon by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Component Progress Bar Trong Halfmoon

Dưới đây là ví dụ về progress bar component trong Halfmoon nhé!

See the Pen Component Progress Bar Trong Halfmoon by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

ComponentInput Group Trong Halfmoon

Dưới đây là ví dụ về input group component trong Halfmoon nhé!

See the Pen input group component in half moon by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Nó còn có rất nhiều component khác, nếu bạn muốn tìm hiểu thêm thì có thể truy cập ở đây nhé.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn cách tạo hiệu ứng dark mode hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!