Theming

Bài viết
03/21/2023

Chủ đề là một cơ chế theo đó giao diện nhất quán có thể được áp dụng cho tất cả các thành phần trên một trang. Hiện tại, điều này có nghĩa là chia sẻ bảng màu trên toàn bộ trang.

Lưu ý

Đối tượng Json Chủ đề là một khối mã chứa một tập hợp các màu. Các thành phần của Bộ công cụ cho người tạo được thiết kế để chấp nhận khối mã Chủ đề do ứng dụng Fluent Theme Designer tạo riêng và ánh xạ các giá trị màu của nó tới các thuộc tính của thành phần. Lưu đối tượng dưới dạng một biến trong ứng dụng của bạn (như được mô tả trong hướng dẫn sau đây). Mặc dù một đối tượng Json Chủ đề được thiết kế để các thành phần bộ công cụ có thể dễ dàng tham chiếu, bất kỳ thành phần nào bên ngoài bộ công cụ cũng có thể tham chiếu những giá trị này, giúp dễ dàng duy trì tính nhất quán trên tất cả các thành phần ứng dụng.

Tạo chủ đề

Sử dụng ứng dụng Fluent Theme Designer (được cung cấp trong giải pháp CreatorKitReferences(Canvas)) để tạo đối tượng Json chủ đề có thể được tham chiếu bởi các thành phần của Bộ công cụ cho người tạo.

Phát ứng dụng Fluent Theme Designer.
Sửa đổi các giá trị Màu chính, Màu văn bản và Màu nền.
Ở góc phía trên bên phải, hãy chọn Xuất chủ đề để tạo phiên bản biểu thức Power Fx của JSON Chủ đề và sau đó sao chép giá trị từ bảng điều khiển.
Lưu chủ đề dưới dạng biến toàn cục trong ứng dụng (phần tiếp theo).

Đặt chủ đề

Công thức Power Fx dưới đây cho thấy một ví dụ về cách đặt biến toàn cục bằng kết quả đầu ra từ ứng dụng Fluent UI Theme Designer. Biến này có thể được tham chiếu bởi tất cả các thành phần trong ứng dụng.

Đặt công thức Power Fx này để chạy trên thuộc tính OnStart của ứng dụng.
Thay thế giá trị giữa các nhận xét /* THEME OBJECT */ bằng đối tượng chủ đề của riêng bạn từ trình thiết kế.

Set(
    AppTheme,
    /* START THEME OBJECT */
    {
        palette: {
            themePrimary: "#0078d4",
            themeLighterAlt: "#eff6fc",
            themeLighter: "#deecf9",
            themeLight: "#c7e0f4",
            themeTertiary: "#71afe5",
            themeSecondary: "#2b88d8",
            themeDarkAlt: "#106ebe",
            themeDark: "#005a9e",
            themeDarker: "#004578",
            neutralLighterAlt: "#faf9f8",
            neutralLighter: "#f3f2f1",
            neutralLight: "#edebe9",
            neutralQuaternaryAlt: "#e1dfdd",
            neutralQuaternary: "#d0d0d0",
            neutralTertiaryAlt: "#c8c6c4",
            neutralTertiary: "#a19f9d",
            neutralSecondary: "#605e5c",
            neutralPrimaryAlt: "#3b3a39",
            neutralPrimary:"#323130",
            neutralDark: "#201f1e",
            black: "#000000",
            white: "#ffffff"
        }
    }
    /* END THEME OBJECT */
);
Set(
    AppThemeJson,
    JSON(
        AppTheme,
        JSONFormat.IndentFour
    )
);

Tham chiếu chủ đề từ các thành phần Bộ công cụ cho người tạo

Một chủ đề có thể được chuyển vào thuộc tính Theme của từng thành phần.

Các thành phần canvas phải tham chiếu biến AppTheme.
Các thành phần mã phải tham chiếu biến AppThemeJson.

Tham chiếu chủ đề từ các thành phần Power Apps tự nhiên

Bất kỳ thành phần cốt lõi nào trong ứng dụng canvas hoặc trang tùy chỉnh đều có thể tham chiếu các phần tử từ đối tượng AppTheme (không thể định dạng là Json). Những điều khiển này phải tham chiếu các thuộc tính palette mong muốn và được truyền dưới dạng loại dữ liệu Màu bằng công thức ColorValue().

Button ví dụ. Công thức Fill Power Fx tham chiếu màu chính của chủ đề:

ColorValue(AppTheme.palette.themePrimary)

Chia sẻ qua