MakeXYZ Fun

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

Admin -

Mô tả nhanh

Video này hướng dẫn cách sử dụng màu tint, màu accent và giới thiệu về chế độ Light/Dark trong SwiftUI. Bạn sẽ học được cách thay đổi màu sắc dựa trên chế độ sáng tối và cách chuyển đổi giữa các chế độ này trong preview và simulator.

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 màu tint, màu accent và giới thiệu về chế độ Light/Dark trong SwiftUI. Bạn sẽ học được cách thay đổi màu sắc dựa trên chế độ sáng tối và cách chuyển đổi giữa các chế độ này trong preview và simulator.

Dưới đây là các bước chi tiết:

  1. Thay đổi màu Tint:

    • Sử dụng modifier .tint() để thay đổi màu của các control như Toggle và Button.
    • Có thể đặt modifier này ở từng control hoặc ở container chung (ví dụ: HStack) để áp dụng cho tất cả control con.
    • Có thể chọn màu cụ thể hoặc sử dụng accentColor.

  2. Cấu hình Accent Color:

    • Mở Asset Catalog, chọn AccentColor.
    • Trong Attributes Inspector, thay đổi Appearance từ None sang Any, Dark.
    • Chọn màu cho cả chế độ Any (light mode) và Dark.
    • Quay lại ContentView, thay đổi .tint() thành .accentColor.

  3. Chế độ Dark Mode trong Preview:

    • Trong preview canvas, tìm icon Device Settings (hình 2 toggle).
    • Nhấn vào toggle Color Scheme để chọn chế độ Dark.
    • Màu sắc của app sẽ thay đổi theo cấu hình accent color cho dark mode.

  4. Chế độ Dark Mode trong Simulator:

    • Chọn thiết bị trong scheme (ví dụ: iPhone).
    • Nhấn nút play để chạy ứng dụng trong simulator.
    • Trong simulator, vào menu Features -> Toggle Appearance để chuyển đổi giữa light và dark mode.

  5. So sánh Light/Dark Mode trong Preview:

    • Tìm icon Variant (hình 2 hàng 3 ô vuông) trong preview.
    • Chọn Color Scheme Variants để hiển thị chế độ light và dark cạnh nhau.
    • Lưu ý: Chế độ này không tương tác được.

  6. Tạo Preview Provider để chuyển đổi nhanh giữa Light/Dark Mode:

    • Thêm () vào sau từ khóa preview, sau đó thêm một string để đặt tên tab (ví dụ: preview("Light Mode"))
    • Thêm modifier .preferredColorScheme(.light) vào ContentView trong preview.
    • Copy đoạn code này và paste xuống dưới, đổi tên tab thành Dark Mode và modifier thành .preferredColorScheme(.dark).
    • Bây giờ bạn có thể chuyển đổi giữa hai chế độ bằng các tab trên preview.
    • Lưu ý, code trong preview chỉ để hiển thị trên preview canvas, không ảnh hưởng đến runtime của app.

Hãy thử nghiệm và tạo ra những app có màu sắc hấp dẫn và tương thích tốt với cả hai chế độ light và dark mode!

<Chúc các bạn thành công!>