Bruge moderne temaer

Brugere af modelbaserede apps med oplevelsen med det moderne, opdaterede look til modelbaserede apps giver opdateret typografi, der er justeret med Microsoft Fluent 2-designsystemet. Da dette moderne opdaterede look leveres med et nyt temasystem, fungerer klassiske temaer ikke, men udviklere kan ændre de farver, der bruges i appoverskriften, for brugere, der har aktiveret det moderne, opdaterede look. I denne artikel får du mere at vide om, hvordan du tilsidesætter de indstillinger af formatering, der er tilgængelige med det moderne, opdaterede udseende, og hvordan du implementerer dem for din organisation.

Ændre farverne på appoverskriften

Med det moderne, opdaterede look aktiveret i appen kan udviklere ændre de farver, der vises på appoverskriften, så de passer til deres organisatoriske branding. Det kan gøres ved at indkapsle de ønskede farver i en XML-ressource, bruge en appindstilling til at pege på denne webressource og derefter kontrollere, at farveændringerne stemmer overens med forventningen.

Oversigt over den XML-ressource, der skal bruges til farver på appoverskrifter

Det første, du skal gøre for at ændre appoverskriftens typografi, er at oprette en XML-fil med de forskellige farvevalg. Du kan senere oprette en XML-webressource med en eller flere af følgende attributter defineret i en AppHeaderColors-kode.

• Background – Baggrundsfarven på appoverskriften. Dette element skal defineres, for at eventuelle ændringer kan træde i kraft.
• Foreground – Tekstfarven på appoverskriften. Hvis dette ikke er angivet, forsøger systemet at beregne en passende farve, der har tilstrækkelig kontrast til den angivne baggrundsfarve.
• BackgroundHover – Baggrundsfarven på knapper i appoverskriften, når de peges på. Hvis der ikke angives en værdi, beregnes der en farve ud fra baggrundsfarven.
• ForegroundHover – Tekstfarven på knapper i appoverskriften, når de peges på. Hvis værdien ikke er angivet, forsøger systemet at beregne en passende farve, der har tilstrækkelig kontrast til den angivne backgroundHover-farve.
• BackgroundPressed – Baggrundsfarven på knapper i appoverskriften, når der trykkes på dem. Standardlogikken er den samme som backgroundHover.
• ForegroundPressed – Tekstfarven på knapper i appoverskriften, når der trykkes på dem. Standardlogikken er den samme som foregroundHover.
• BackgroundSelected – Baggrundsfarven på knapper i appoverskriften, når de vælges. Standardlogikken er den samme som backgroundHover.
• ForegroundSelected – Tekstfarven på knapper i appoverskriften, når de vælges. Standardlogikken er den samme som backgroundHover.

Eksempel på XML til et moderne tema

Som et eksempel angiver denne XML en grøn baggrundsfarve til appoverskriften med hvid tekst og mørkere baggrundsfarver til de forskellige tilstande for knapinteraktion. Hvis du vil opnå optimal anvendelighed, anbefales det, at du angiver forskellige farveværdier for de enkelte tilstande.

<AppHeaderColors 
  background="#12783F"
  foreground="#FFFFFF" 
  backgroundHover="#165A31" 
  foregroundHover="#FFFFFF"
  backgroundPressed="#0F1C12"
  foregroundPressed="#FFFFFF"
  backgroundSelected="#153D23" 
  foregroundSelected="#FFFFFF"
/>

Oprette webressourcen

1. Gem den XML, der bruges til at oprette webressourcen, ved hjælp af en tekst- eller XML-editor. Eksempel på XML til et moderne tema
2. Log på Power Apps.
3. Vælg Løsninger i navigationsruden til venstre, og opret derefter en Ny løsning.
4. Vælg Ny > Flere > Webressource.
5. I den nye webressources egenskabsrude skal du angive følgende værdier:
   • Vist navn: Angiv et vist navn som f.eks. XML til moderne tema.
   • Navn. Angiv det entydige navn for webressourcen.
   • Type: Data (XML)
6. Vælg Vælg en fil, søg efter, og vælg derefter den XML-fil, du har oprettet tidligere med temaet.
7. Vælg Gem. Du publicerer denne tilpasning ved hjælp af trinnene i næste afsnit.

Anvende brugerdefinerede farver på appoverskrifter i dit miljø

Når du har valgt dine farver og oprettet webressourcen, skal du følge disse trin for at aktivere appoverskriften for alle de apps i dit miljø, der har Nyt look aktiveret.

1. I den løsning, du brugte til at oprette webressourcen, skal du vælge Tilføj eksisterende > Flere > Indstilling.
2. Skriv Tilsidesæt i feltet Søg, vælg Tilsidesæt appoverskriftsfarve, vælg Næste, og vælg derefter Tilføj.
3. Vælg Tilsidesæt appoverskriftsfarve i løsningen, og vælg derefter Rediger på kommandolinjen.
4. Vælg Indstille miljøværdi i højre egenskabsside for Tilsidesæt appoverskriftsfarve, og angiv det entydige navn på den webressource, du har oprettet tidligere. Sørg for at tilføje udgiverpræfikset for webressourcen og ikke medtage tilbud. Navnet kan f.eks. contoso_xmlfor-moderne tema som i dette eksempel.
5. Vælg Gem.
6. Vælg Publicer alle tilpasninger på kommandolinjen. (Denne kommando vises, når der ikke er valgt komponenter i løsningen).

Med eksempelfarver kan appoverskriften se sådan ud, når du spiller appen (du skal måske opdatere browserfanen).

Kontrollere nye farver på appoverskrifter

Når du har udgivet farverne på din nye appoverskrift, skal du validere de visuelle elementer i appoverskriften, herunder alle knaptilstande, for at sikre dig, at alt vises som forventet, og at der er tilstrækkelige kontraster som hjælp til handicappede. Du skal kontrollere følgende farvemuligheder:

• De ønskede farver vises for appoverskriften i hvile og for hver knaps interaktionstilstand.
• Der skal som minimum være en kontrast på 4,5:1 mellem forgrunds- og baggrundsfarver for hviletilstanden og de enkelte knappers interaktionstilstand.

Se også

Moderne opdateret udseende