Cấu hình darktheme đơn giản với Antd có support cho Tailwindcss

Lý do là gì? Dark theme html đơn giản mà?

Quả thực nếu sử dụng html và css style thì việc config màu dark/light theme khá đơn giản khi chỉ cần setup màu săc theo bộ màu mà ta có rồi sử dụng nó với các biến đã được khai báo từ root. Tuy nhiên, khi sử dụng các thư viện giao diện hay tailwind style thì nó khó hơn vì ban thân các thư viện nay đã mang bộ màu khai báo từ trước. Vậy là viện để cấu trúc màu sắc riêng cho 1 thư viện đã khó, trong khi đó lại phải config nó với 1 thư viện cũng mang các bộ màu khác nữa lại càng khó hơn. Cách để giải quyết vấn đề này là ta có thể setup 1 bộ màu để cả 2 thư viện đều dùng được, hay đơn giản hơn là sử dụng màu 1 thư viện và bắt buộc các thư viện còn lại sẽ sử dụng màu sắc đó

Được rồi lên xe nào :V

Đầu tiên thì chúng ta cần xác định xem những thư viện giao diện nào sẽ được sử dụng, tất nhiên rồi theo cái tiêu đề nay thì mình sẽ đề xuất là 2 thư viện quen thuộc là Antd và Tailwindcss. Antd là thư viện giao diện component được dùng ưa chuộng với React tại ECO nên ae Frontend chắc chắn không lạ gì nữa rồi. Còn Tailwindcss thì là 1 thư viện support việc sử dụng style inline. Cả 2 thằng này đều mang bộ màu riêng. Và cả 2 thằng này đều có bộ màu support cho việc chuyển đổi giữa dark/light theme. Tuy nhiên, với việc thằng Antd là giao diện component thì mình nghĩ rằng sử dụng bộ màu thằng này thì màu sắc chuyển đổi sẽ đẹp hơn.

Config Antd trước nào

import React from 'react';
import { Button, ConfigProvider, Input, Space, theme } from 'antd';

const App: React.FC = () => (
  <ConfigProvider
    theme={{
      // 1. Use dark algorithm
      algorithm: theme.darkAlgorithm,

      // 2. Combine dark algorithm and compact algorithm
      // algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
    }}
  >
    <Space>
      <Input placeholder="Please Input" />
      <Button type="primary">Submit</Button>
    </Space>
  </ConfigProvider>
);

export default App;

Các chủ đề với các phong cách khác nhau có thể được tạo nhanh chóng bằng cách sửa đổi các tệp algorithm. Ant Design 5.0 cung cấp ba bộ thuật toán cài sẵn theo mặc định:

• thuật toán mặc định theme.defaultAlgorithm
• thuật toán tối theme.darkAlgorithm
• thuật toán nhỏ gọn theme.compactAlgorithm

Bạn có thể chuyển đổi thuật toán bằng cách sửa đổi algorithm thuộc tính theme trong ConfigProvider.

Ở đây mình không làm chi tiết phần config & style cho Antd vì cái này mỗi phiên bản 1 kiểu rồi. Trình bày dễ thiếu sót lắm :V

Như vậy có thể thấy Antd switch cho light/dark theme quá đơn giản rồi. Giờ xử lý bài toán đi theo là config thằng Tailwind css dùng được bộ màu của Antd.

Trong file tailwind.config.js ta thực hiện:

/** @type {import('tailwindcss').Config} */
import { theme } from "antd";
const { getDesignToken } = theme;
const globalToken = getDesignToken();
const token = theme.getDesignToken(globalToken);

module.exports = {
  darkMode: 'class'
  content: ["./pages/**/*.tsx", "./components/**/*.tsx", "./src/**/*.tsx"],
  theme: {
    extend: {
      colors: {...token}
    }
  }
}

Vậy là được rồi. màu từ Antd có thể được sử dụng trong style inline của tailwindcss. khi thay đổi theme thì các màu này cũng thay đổi theo. Tuy nhiên phần này sẽ có ảnh hương bởi việc bộ màu render ra nhiêu -> khối lượng code render lớn hơn ảnh hưởng hiệu suất. Mình sẽ giới thiệu thêm các cách config màu khác nữa để website đẹp hơn và nhanh hơn nhé