Theming

עיצוב נושא הוא מנגנון שבאמצעותו ניתן להחיל מראה ותחושה עקביים על כל הרכיבים בדף. לבינתיים, המשמעות היא שיתוף של ערכת צבעים על פני כל העמוד.

הערה

אובייקט JSON של ערכת נושא הוא בלוק קוד המכיל קבוצה של צבעים. רכיבי ערכת היוצר מתוכננים לקבל את בלוק הקוד של ערכת הנושא המיוצר במיוחד על ידי ‏‫האפליקציה Fluent Theme Designer. הם גם ממפים את ערכי הצבע שלו למאפייני הרכיבים. שמור את האובייקט כמשתנה ביישום שלך (כמתואר בהוראות הבאות). על אף שאובייקט Theme JSON נועד לאפשר אזכור נוח על-ידי רכיבי הערכה, כל רכיב מחוץ לערכה יכול גם להתייחס לערכים האלה, דבר שעוזר לשמור בקלות על עקביות בכל רכיבי האפליקציה.

יצירת ערכת הנושא

השתמש באפליקציה Fluent Theme Designer (מסופקת בפתרון ‎CreatorKitReferences ‎(Canvas)‎) כדי ליצור אובייקט Json עם ערכת נושא שניתן להפנות אליו באמצעות רכיבי ערכת היוצר.

1. הפעל את האפליקציה Fluent Theme Designer.

2. שנה את הערכים צבע ראשי, צבע טקסט וצבע רקע.

   

3. בפינה השמאלית העליונה, בחר ייצוא ערכת נושא כדי ליצור את גירסת הביטוי של Power Fx של Theme JSON, ולאחר מכן העתק את הערך מהלוח.

   

4. שמור את ערכת הנושא כמשתנה כללי באפליקציה (הסעיף הבא).

הגדרת ערכת הנושא

נוסחת Power Fx שלמטה מציגה דוגמה לאופן ההגדרה של משתנה כללי באמצעות הפלט מהאפליקציה Fluent UI Theme Designer. ניתן להתייחס למשתנה זה על ידי כל הרכיבים באפליקציה.

• מקם את נוסחת Power Fx להפעלה במאפיין של האפליקציה OnStart.
• החלף את הערך בין ההערות של /* THEME OBJECT */ באובייקט ערכת נושא משלך מהמעצב.

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

הפנייה של ערכת נושא מרכיבי ערכת היוצר

ניתן להעביר ערכת נושא למאפיין Theme של כל רכיב.

• רכיבי קנבס חייבים להפנות למשתנה AppTheme .
• רכיבי קוד חייבים להפנות למשתנה AppThemeJson .

הפנייה של ערכת נושא מרכיבים של Power Apps מקוריים

כל אחד מרכיבי הליבה באפליקציות בד ציור או בדפים מותאמים אישית יכול להתייחס לרכיבים מהאובייקט AppTheme (לא יכול להיות בתבנית Json). פקדים אלה חייבים להתייחס למאפייני palette הרצויים ולהיות מומרים כסוג נתוני צבע באמצעות הנוסחה ColorValue().

דוגמה Button. Fill Power Fx נוסחה המתייחסת לצבע העיקרי של ערכת הנושא:

ColorValue(AppTheme.palette.themePrimary)