Delen via

Theming

  • Artikel

Themagebruik is een mechanisme waarmee een consistente look en feel kan worden toegepast op alle onderdelen op een pagina. Voor nu betekent dit het delen van een kleurenschema over de gehele pagina.

Notitie

Een Theme JSON-object is een codeblok dat een reeks kleuren bevat. Creator Kit-onderdelen zijn ontworpen om het Theme-codeblok te accepteren dat speciaal is geconfigureerd door de app Fluent Theme-ontwerper en de kleurwaarden toe te wijzen aan onderdeeleigenschappen. Sla het object op als een variabele in uw app (zoals beschreven in de onderstaande instructies). Hoewel een Theme JSON-object wordt ontworpen om gemakkelijk te kunnen worden verwezen door kitonderdelen, kunnen onderdelen buiten de kit ook verwijzen naar deze waarden, wat helpt om gemakkelijk de consistentie tussen alle app-onderdelen te handhaven.

Het thema genereren

Gebruik de app Fluent Theme-ontwerper (opgegeven in de oplossing CreatorKitReferences(Canvas)) om een thema-Json-object te genereren waarnaar kan worden verwezen door Creator Kit-onderdelen.

  1. Speel de app Fluent Theme-ontwerper af.

  2. Wijzig de waarden voor Primaire kleur, Tekstkleur en Achtergrondkleur.

    Thema-editor-app.

  3. Selecteer in de rechterbovenhoek Thema exporteren om de Power Fx-expressieversie van Theme JSON te genereren en kopieer vervolgens de waarde uit het paneel.

    Door Thema-editor-app gegenereerde Theme JSON.

  4. Sla het thema op als een globale variabele in een app (volgende sectie).

Het thema instellen

De onderstaande Power Fx-formule toont een voorbeeld van hoe u een globale variabele instelt met behulp van de uitvoer van de app Fluent UI Theme-ontwerper. Naar deze variabele kan worden verwezen door alle onderdelen in de app.

  • Plaats deze Power Fx-formule om voor de eigenschap OnStart van de app te worden uitgevoerd.
  • Vervang de waarde tussen de /* THEME OBJECT */-opmerkingen met uw eigen thema-object van de ontwerper.
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
    )
);

Verwijzen naar thema uit Creator Kit-onderdelen

Een thema kan worden doorgegeven aan de eigenschap Theme van elk onderdeel.

  • Canvas-onderdelen moeten verwijzen naar de variabele AppTheme.
  • Code-onderdelen moeten verwijzen naar de variabele AppThemeJson.

Verwijzen naar thema vanuit native Power Apps-onderdelen

Elk van de kernonderdelen in canvas-apps of aangepaste pagina's kan verwijzen naar elementen van het AppTheme-object (kan niet met JSON-indeling zijn). Deze besturingselementen moeten verwijzen naar de gewenste palette-eigenschappen en worden gecast als een kleurgegevenstype met behulp van de formule ColorValue().

Voorbeeld Button.Fill Power Fx-formule die verwijst naar de primaire kleur van het thema:

ColorValue(AppTheme.palette.themePrimary)

Knop met thema.