다음을 통해 공유

Theming

  • 아티클

테마 설정은 페이지의 모든 구성 요소에 일관된 모양과 느낌을 적용할 수 있는 메커니즘입니다. 현재로서는 전체 페이지에서 색 구성표를 공유하는 것을 의미합니다.

노트

테마 Json 개체는 색상 세트를 포함하는 코드 블록입니다. Creator Kit 구성 요소는 유창한 테마 디자이너 앱에서 특별히 생성된 테마 코드 블록을 허용하고 해당 색상 값을 구성 요소 속성에 매핑하도록 설계되었습니다. 다음 지침에 설명된 대로 앱에 개체를 변수로 저장합니다. 테마 Json 개체는 키트 구성 요소를 통해 쉽게 참조할 수 있도록 설계되었지만 키트 외부의 모든 구성 요소도 이러한 값을 참조할 수 있으므로 모든 앱 구성 요소에서 일관성을 쉽게 유지하는 데 도움이 됩니다.

테마 생성

유창한 테마 디자이너 앱(CreatorKitReferences(캔버스) 솔루션에서 제공)을 사용하여 테마 생성 Creator Kit 구성 요소에서 참조할 수 있는 Json 개체입니다.

  1. 유창한 테마 디자이너 앱을 재생합니다.

  2. 기본 색상, 텍스트 색상 및 백그라운드 색상 값을 수정합니다.

    테마 편집기 앱.

  3. 오른쪽 상단 코너에서 테마 내보내기를 선택하여 테마 JSON의 Power Fx 표현식 버전을 생성한 다음, 패널에서 값을 복사합니다.

    테마 편집기 앱 생성 테마 JSON.

  4. 테마를 앱의 전역 변수로 저장합니다(다음 섹션).

테마 설정

아래 Power Fx 수식은 유창한 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
    )
);

Creator Kit 구성 요소에서 테마 참조

테마는 각 구성 요소의 Theme 속성에 전달할 수 있습니다.

  • Canvas 구성 요소는 AppTheme 변수를 참조해야 합니다.
  • 코드 구성 요소는 AppThemeJson 변수를 참조해야 합니다.

기본 Power Apps 구성 요소에서 테마 참조

캔버스 앱 또는 사용자 지정 페이지의 모든 핵심 구성 요소는 AppTheme 개체의 요소를 참조할 수 있습니다(Json 형식화할 수 없음). 이러한 컨트롤은 원하는 palette 속성을 참조해야 하며 ColorValue() 수식을 사용하여 색상 데이터 유형으로 캐스팅되어야 합니다.

Button 예제.Fill Power Fx 테마의 기본 색상을 참조하는 공식:

ColorValue(AppTheme.palette.themePrimary)

테마를 사용하는 버튼입니다.