Theming

ชุดรูปแบบเป็นกลไกที่ทำให้รูปลักษณ์และความรู้สึกสอดคล้องกันสามารถนำไปใช้กับส่วนประกอบทั้งหมดบนหน้าได้ สำหรับตอนนี้ นี่หมายถึงการแบ่งปันชุดสีทั่วทั้งหน้า

หมายเหตุ

ออบเจ็กต์ Theme JSON คือบล็อกรหัสที่มีชุดสี ส่วนประกอบของชุดผู้สร้างได้รับการออกแบบให้ยอมรับบล็อครหัสธีที่สร้างโดยเฉพาะโดยแอปตัวออกแบบธีม Fluent และจับคู่ค่าสีกับคุณสมบัติ component บันทึกวัตถุเป็นตัวแปรในแอปของคุณ (ตามที่อธิบายไว้ในคำแนะนำต่อไปนี้) แม้ว่าออบเจ็กต์ Theme JSON จะได้รับการออกแบบมาเพื่อให้อ้างอิงกับส่วนประกอบของชุดได้ง่าย แต่ส่วนประกอบใดๆ ก็ตามที่อยู่นอกชุดก็สามารถอ้างอิงค่าเหล่านี้ได้ ซึ่งช่วยให้รักษาความสอดคล้องกันในทุกส่วนประกอบของแอปได้อย่างง่ายดาย

กำลังสร้างธีม

ใช้แอป ตัวออกแบบธีม Fluent (ที่มีให้ในโซลูชัน CreatorKitReferences (พื้นที่ทำงาน)) เพื่อสร้างอ็อบเจ็กต์ธีม Json ที่ส่วนประกอบชุดผู้สร้างอ้างอิงได้

1. เล่นแอป ตัวออกแบบธีม Fluent

2. แก้ไขค่า สีหลักสีข้อความ และ สีพื้นหลัง

   

3. ในมุมบนขวาของแอป เลือก ส่งออกธีม เพื่อสร้างรุ่นนิพจน์ Power Fx ของ Theme JSON และจากนั้นคัดลอกค่าจากแผงควบคุม

   

4. บันทึกธีมเป็นตัวแปรส่วนกลางในแอป (ส่วนถัดไป)

การตั้งค่าธีม

สูตร Power Fx ด้านล่างแสดงตัวอย่างวิธีตั้งค่าตัวแปรส่วนกลางโดยใช้เอาต์พุตจากแอปตัวออกแบบธีม Fluent UI องค์ประกอบทั้งหมดในแอปสามารถอ้างอิงตัวแปรนี้ได้

• วางสูตร 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()

ตัวอย่าง ButtonFillสูตร Power Fx อ้างอิงสีหลักของธีม:

ColorValue(AppTheme.palette.themePrimary)