Next Experience 테마 구성

  • 릴리스 버전: Washingtondc
  • 업데이트 날짜 2024년 02월 01일
  • 읽기3분

    • 생성한 스타일을 테마에 추가하여 사용자 환경의 모양과 느낌을 수정합니다.

    시작하기 전에

    다음 시스템 속성이 True로 설정되어 있는지 확인합니다.
    • glide.ui.polaris.experience
    • glide.ui.polaris.dark_themes_enabled - 이 테마에서 Polaris 어두운 변형을 재사용합니다.

    필요한 역할: admin

    이 태스크 정보

    기본 Next Experience 테마는 Polaris입니다. 사용자 고유의 테마를 만들거나 수정할 때 시작점으로 Polaris 테마를 재사용하거나 사용자 지정할 수 있습니다.

    프로시저

    1. 다음으로 이동 모두 > Now Experience 프레임워크 > 테마 관리 > 테마레이블이 표시됩니다.
    2. 새로 만들기를 선택하여 테마 기록을 만듭니다.
    3. 테마의 이름과 설명을 입력합니다.UX 테마 양식.
    4. 추가 작업 아이콘( 추가 작업 아이콘)을 선택하고 저장을 선택합니다.
    5. Compositional: App Theme(컴포지션: 앱 테마) 탭에서 행을 삽입하여 테마와 연결된 스타일을 추가합니다.
      다음 4개의 열에 값을 할당합니다.
      적용성
      적용성은 기본 테마를 재정의하도록 지정됩니다. 적용 가능성 제약 조건을 충족하는 사용자는 기본 스타일이 아닌 테마에서 이러한 재정의를 볼 수 있습니다. 예를 들어, 다른 글꼴을 가진 스타일을 관리자에 적용할 수 있습니다. 관리자 적용성을 충족하는 사용자는 기본 시스템 테마 값을 재정의하는 Next Experience UI에서 다양한 글꼴을 볼 수 있습니다. 관리자는 해당 대상에 대한 변경 내용으로 전체 테마를 복사하거나 생성할 필요가 없습니다.
      주:
      적용 가능성 제약 조건을 비워 두면 스타일이 모든 사용자에게 적용됩니다.
      주문
      순서는 스타일이 적용되는 시기를 지정합니다. 순서가 높을수록 우선 순위가 높아집니다.
      주:
      사용자 지정 스타일을 사용하려면 스타일 순서 번호가 표준 Polaris 스타일보다 높은지 확인합니다.
      스타일
      네 가지 기본 스타일을 구성할 수 있습니다. Polaris 테마에 사용되는 스타일 이름은 편집할 수 없지만 이 테마에서 각 스타일과 연결된 JSON 코드를 복사하여 사용자 지정 스타일의 양식에 붙여넣고 편집할 수 있습니다.
      • 색상: 테마의 색상 속성과 추가하려는 기본 변형입니다. 색 스타일의 기본 섹션에서 테마에서 사용하는 색의 하위 집합은 RGB 값으로 정의됩니다. 테마는 응용 프로그램에서 이러한 색상의 그라데이션을 20개 이상 생성합니다.
      • 모양과 모양: 테두리와 단추 및 기타 UI 컨트롤의 모양과 느낌입니다.
      • 이미지: 응용 프로그램의 테마에 사용되는 이미지를 추가합니다.
      • 타이 포 그래피: 응용 프로그램 전체에서 사용되는 글꼴입니다.
      유형
      코어와 변형의 두 가지 유형이 있습니다. 핵심 스타일에는 색상, 모양 및 형태, 타이포그래피 및 이미지가 포함됩니다. 변형은 사용자가 기본 설정에서 선택할 수 있는 다른 버전의 테마, 다른 색상입니다. 가장 일반적인 변형은 테마의 어두운 버전입니다. 어두운 테마는 와 함께 Next Experience제공되는 유일한 변형입니다. 자세한 내용은 에서 테마 탐색 Next Experience 문서를 참조하십시오.
    6. 스타일 필드를 선택하고 UX 스타일 검색 아이콘을 선택합니다.
    7. 새로 만들기를 선택합니다.
    8. Primary(기본), Secondary(보조) 및 Neutral(중립) 색상을 선택합니다.
      주:
      테마는 여러 변수로 구성되므로 기본 Polaris 테마 색상이 다른 위치에서 나타나는 것을 알 수 있습니다.
    9. 조직의 브랜딩 색상이 있는 경우 색상 생성기 https://theme.deoprototypes.com/color-generator-algo-v1로 이동합니다.
    10. 자동 생성 버튼을 선택합니다.

      조직의 세 가지 색상을 입력하라는 모달 팝업이 나타납니다.

    11. 조직의 색상에 대한 16진수 코드 값을 입력합니다.
    12. 생성을 클릭합니다.
    13. JSON 복사를 클릭하여 CSS 변수를 수집합니다.
    14. UX 스타일 양식을 작성합니다.UX 스타일 양식.
      필드 설명
      이름 UX 스타일의 이름입니다.
      유형
      • 핵심
      • 변형
      유형에 대한 자세한 내용은 핵심 스타일과 변형의 차이점을 참조하세요.
      스타일 색상, 모양 및 양식에 대한 값입니다. 일부 값은 색상이고 테두리와 같은 일부는 픽셀 값입니다.
      중요사항:
      JSON 코드는 다음과 같이 래핑되어야 합니다.속성 값 문자열입니다.
      애플리케이션 UX 스타일의 범위입니다.
    15. 제출을 선택합니다.
    16. 업데이트를 선택합니다.
      주:
      새 테마를 사용하여 기본 테마를 덮어쓰려면 을 참조하십시오 테마 재정의 Next Experience.