TanStack Logo

Theme Demo

Demo tính năng theme switching với hỗ trợ light, dark và system mode.

Theme Switcher
Chuyển đổi giữa các theme khác nhau
Current Theme State
Thông tin về theme hiện tại
Selected Theme:system
resolvedTheme:dark
Available Themes:
lightdarksystem
Theme Features
Các tính năng của theme system
  • Hỗ trợ Light, Dark và System mode
  • Resolved Theme Calculation
  • Lưu preference vào cookie (HttpOnly)
  • Đồng bộ theme giữa các tabs
  • Không có flash khi load trang (FOUC prevention via Script)
  • Hỗ trợ CSS color-scheme property
  • disableTransitionOnChange: Đã bật
disableTransitionOnChange Demo
Tính năng này tạm thời vô hiệu hóa tất cả CSS transitions khi chuyển đổi theme để tránh hiệu ứng nhấp nháy

Các phần tử có transition (sẽ bị vô hiệu hóa khi đổi theme):

Card với transition

Card này có transition cho scale và shadow. Khi đổi theme, transition sẽ tạm thời bị vô hiệu hóa.

Badge với transition

Gradient box với transition dài

Box này có transition 700ms. Khi bạn chuyển đổi theme, transition này sẽ bị vô hiệu hóa tạm thời để đảm bảo chuyển đổi theme mượt mà.

Hướng dẫn test:

  1. Nhấn vào nút theme switcher ở trên để chuyển đổi theme
  2. Quan sát các phần tử trên - chúng sẽ thay đổi màu sắc ngay lập tức, không có animation
  3. Sau khi theme đã được áp dụng, transitions sẽ được bật lại
  4. Hover vào các phần tử để thấy transitions hoạt động bình thường
Component Showcase
Xem các component hiển thị trong theme hiện tại

Buttons

Badges

DefaultSecondaryDestructiveOutline

Alerts

Cards

Card 1
Mô tả cho card 1

Nội dung của card sẽ tự động thích ứng với theme.

Card 2
Mô tả cho card 2

Background và text colors thay đổi theo theme.

Card 3
Mô tả cho card 3

Borders và shadows cũng được điều chỉnh tự động.