Theming

Temos yra mechanizmas, dėl kurio visiems puslapio komponentams galima pritaikyti nuoseklią išvaizdą ir pojūtį. Dabar tai reiškia, kad spalvų schema bus bendrai taikoma visam puslapiui.

Pastaba.

„Theme Json“ objektas yra spalvų rinkinio kodų blokas. Kūrėjų rinkinio komponentai sukurti taip, kad būtų galima priimti temos kodų bloką, sugeneruotą specialiai programos „Fluent Theme Designer“, ir susieti jo spalvų reikšmes su komponento ypatybėse. Savo programoje objektą įrašykite kaip kintamąjį (kaip aprašyta toliau pateikiamose instrukcijose). Nors „Theme Json“ objektą galima lengvai nurodyti naudojant rinkinio komponentus, bet kuris ne rinkinio komponentas taip pat gali nurodyti šias reikšmes, o tai padeda lengvai išlaikyti visų programos komponentų nuoseklumą.

Temos generavimas

Norėdami sugeneruoti „Theme Json" objektą, kurį gali nurodyti kūrėjų rinkinio komponentai, naudokite programą „Fluent Theme Designer“ (pateiktą CreatorKitReferences(Canvas) sprendime).

1. Paleiskite programą „Fluent Theme Designer“.

2. Modifikuokite Pagrindinės spalvos, Teksto spalvos ir Fono spalvos reikšmes.

   

3. Viršutiniame dešiniajame kampe pasirinkite Eksportuoti temą, kad sugeneruotumėte temos „JSON“ „Power Fx“ išraiškos versiją, tada nukopijuokite reikšmę iš skydo.

   

4. Įrašykite temą kaip visuotinį kintamąjį programoje (kitas skyrius).

Temos nustatymas

Toliau pateiktoje „Power Fx“ formulėje pateikiamas pavyzdys, kaip nustatyti visuotinį kintamąjį naudojant „Fluent UI Theme Designer“ programos išvestį. Šį kintamąjį gali nurodyti visi programos komponentai.

• Perkelkite šią „Power Fx“ formulę į programos ypatybę OnStart.
• Reikšmę tarp /* THEME OBJECT */ komentarų pakeiskite savo temos objektu iš dizaino įrankio.

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

Kūrėjų rinkinio komponentų temos nuorodos

Tema gali būti pritaikyta kiekvienai komponento Theme ypatybei.

• Drobės komponentai turi nurodyti AppTheme kintamąjį.
• Kodo komponentai turi nurodyti AppThemeJson kintamąjį.

Vietinių „Power Apps“ komponentų temos nuorodos

Visi pagrindiniai drobės programų ar pasirinktinių puslapių komponentai gali nurodyti AppTheme objekto elementus (jų negalima formatuoti su „Json“). Naudojant šiuos valdiklius reikia nurodyti norimas palette ypatybes ir pakeisti jų duomenis į spalvų duomenų tipą naudojant ColorValue() formulę.

Pavyzdys Button. Fill Power Fx formulė, nurodanti pagrindinę temos spalvą:

ColorValue(AppTheme.palette.themePrimary)