[Video Summary] Ch. 1.20 Tint, Accent Color, and an Intro to Light/Dark Model in SwiftUI (2025)

Mô tả nhanh

Video này hướng dẫn cách sử dụng tint, accentColor và giới thiệu về chế độ Light/Dark mode trong SwiftUI.

Video

Click vào hình dưới để mở:

Mô tả chi tiết

Video này hướng dẫn cách sử dụng tint, accentColor và giới thiệu về chế độ Light/Dark mode trong SwiftUI. Cụ thể:

1. Tint Modifier:
   • Thay đổi màu sắc mặc định của các control như Toggle và Button bằng modifier .tint().
   • Có thể áp dụng tint cho từng control riêng lẻ, hoặc cho cả một HStack để thay đổi màu của tất cả các control bên trong.
   • Ví dụ: .tint(.blue) hoặc .tint(.indigo).
2. Accent Color:
   • Thiết lập màu chủ đạo cho ứng dụng trong Asset Catalog.
   • Chọn AccentColor và thay đổi từ "Universal" thành "Any, Dark".
   • Thiết lập màu cho cả hai chế độ Light và Dark mode.
     • Ví dụ: Blueberry cho Light mode.
     • Ví dụ: Marino cho Dark mode.
   • Sử dụng .tint(.accentColor) để áp dụng màu accent cho các control.
3. Chế độ Light/Dark Mode:
   • Chuyển đổi giữa hai chế độ trong Preview bằng nút "Device Settings" (biểu tượng toggle).
   • Chạy ứng dụng trên Simulator và thay đổi chế độ bằng "Features > Toggle Appearance".
   • Sử dụng chế độ "Color Scheme Variants" trong Preview để so sánh side-by-side.
4. Preview Provider:
   • Giới thiệu về code trong #Preview (trước đây gọi là Preview Provider).
   • Code này chỉ dùng để hiển thị trên preview, không chạy khi ứng dụng thực thi.
   • Tạo các tab preview riêng biệt cho Light/Dark mode bằng cách thêm modifier .preferredColorScheme(.light) hoặc .preferredColorScheme(.dark)
   • Sử dụng code sau cho từng tab:

     #Preview("Light Mode") {
         ContentView()
             .preferredColorScheme(.light)
     }
     
     #Preview("Dark Mode") {
         ContentView()
             .preferredColorScheme(.dark)
     }
     

Lời chúc

Chúc bạn có những trải nghiệm tuyệt vời với SwiftUI! Đừng quên chia sẻ những sản phẩm của bạn với hashtag #builtwithProfG.