Bagikan melalui

Theming

  • Artikel

Penemaan adalah mekanisme yang menghasilkan tampilan dan nuansa yang konsisten serta dapat diterapkan ke semua komponen pada halaman. Untuk sekarang, hal ini berarti berbagi skema warna di seluruh halaman.

Catatan

Objek Json Theme adalah blok kode yang berisi rangkaian warna. Komponen Creator Kit dirancang untuk menerima blok kode Tema yang dihasilkan secara khusus oleh aplikasi Fluent Theme Designer, dan memetakan nilai warnanya ke properti komponen. Simpan objek sebagai variabel di aplikasi Anda (seperti dijelaskan dalam petunjuk berikut). Meskipun objek Json Theme dirancang untuk dengan mudah direferensikan oleh komponen kit, komponen apa pun di luar kit juga dapat mereferensi nilai ini yang akan membantu dengan mudah mempertahankan konsistensi di semua komponen aplikasi dengan mudah.

Menghasilkan tema

Gunakan aplikasi Fluent Theme Designer (disediakan dalam solusi CreatorKitReferences(Canvas)) untuk menghasilkan objek Json Theme yang dapat direferensikan oleh komponen Creator Kit.

  1. Jalankan aplikasi Fluent Theme Designer app.

  2. Ubah nilai Warna primer, Warna teks, dan Warna latar belakang.

    Aplikasi Editor Tema.

  3. Di sudut kanan atas, pilih Ekspor tema untuk menghasilkan versi ekspresi Power Fx Theme JSON, lalu salin nilai dari panelnya.

    JSON Tema yang dihasilkan aplikasi Editor Tema.

  4. Simpan tema sebagai variabel global di aplikasi (bagian berikutnya).

Mengatur tema

Rumus Power Fx di bawah ini menampilkan contoh cara mengatur variabel global menggunakan output dari aplikasi Fluent UI Theme Designer. Variabel ini dapat direferensikan oleh semua komponen dalam aplikasi.

  • Tempatkan rumus Power Fx ini untuk dijalankan pada properti OnStart aplikasi.
  • Ganti nilai di antara komentar /* THEME OBJECT */ dengan objek tema Anda sendiri dari desainer.
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
    )
);

Mereferensikan tema dari komponen Creator Kit

Tema dapat diteruskan ke properti Theme setiap komponen.

  • Komponen kanvas harus mereferensikan AppTheme variabel.
  • Komponen kode harus mereferensikan AppThemeJson variabel.

Mereferensikan tema dari komponen Power Apps asli

Salah satu komponen inti dalam aplikasi kanvas atau halaman kustom dapat mereferensikan elemen dari objek AppTheme (tidak dapat diformat Json). Kontrol ini harus mereferensikan properti palette yang diinginkan dan dilempar sebagai tipe data Warna menggunakan rumus ColorValue().

Contoh Button.Fill Power Fx Rumus yang merujuk pada warna utama tema:

ColorValue(AppTheme.palette.themePrimary)

Tombol menggunakan tema.