Theming

Tema adalah mekanisme yang penampilan dan rasa konsisten boleh digunakan untuk semua komponen pada halaman. Buat masa ini, ini bermaksud berkongsi skema warna merentasi keseluruhan halaman.

Nota

Objek JSON Tema ialah blok kod yang mengandungi set warna. Komponen Pencipta Kit direka untuk menerima blok kod Tema yang dijana secara khusus oleh aplikasi Fluent Theme Designer dan memetakan nilai warna kepada sifat komponen. Simpan objek sebagai pemboleh ubah dalam aplikasi anda (seperti yang diterangkan dalam arahan berikut). Walaupun objek JSON tema direka bentuk untuk mudah dirujuk oleh komponen kit, mana-mana komponen di luar kit juga boleh merujuk nilai ini, yang membantu dengan mudah mengekalkan kekonsistenan merentasi semua komponen aplikasi.

Menjana tema

Gunakan aplikasi Fluent Theme Designer (disediakan dalam penyelesaian CreatorKitReferences(Kanvas) ) untuk menjana objek JSON tema yang boleh dirujuk oleh komponen pereka Kit Pencipta.

1. Mainkan aplikasi Fluent Theme Designer.

2. Ubah suai nilai Warna utama, Warna teks, dan Warna latar belakang.

   

3. Di sudut kanan atas, pilih Eksport tema untuk menjana ungkapan Power Fx versi JSON Tema, kemudian salin nilai daripada panel.

   

4. Simpan tema sebagai pemboleh ubah global dalam aplikasi (bahagian depan).

Menetapkan tema

Formula Power Fx di bawah menunjukkan contoh cara untuk menetapkan pemboleh ubah global menggunakan output daripada aplikasi Fluent UI Theme Designer. Pemboleh ubah ini boleh dirujuk oleh semua komponen dalam aplikasi.

• Letakkan formula Power Fx ini untuk dijalankan pada sifat aplikasi OnStart .
• Gantikan nilai antara komen /* THEME OBJECT */ dengan objek tema anda sendiri daripada pereka.

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
    )
);

Tema merujuk daripada komponen Kit Pencipta

Tema boleh diserahkan kepada sifat Theme bagi setiap komponen.

• Komponen kanvas mesti merujuk kepada pembolehubah AppTheme .
• Komponen kod mesti merujuk kepada pembolehubah AppThemeJson .

Tema merujuk daripada komponen Power Apps natif

Sebarang komponen teras dalam aplikasi kanvas atau halaman tersuai boleh merujuk elemen daripada objek AppTheme (JSON yang diformatkan tidak dibenarkan). Kawalan ini mesti merujuk kepada sifat palette yang dikehendaki dan penukaran jenis sebagai jenis data Warna menggunakan formula ColorValue().

Contoh Button. Fill Power Fx Formula yang merujuk kepada warna utama tema:

ColorValue(AppTheme.palette.themePrimary)