Next Experience 테마 구성

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

시작하기 전에

sys_properties.list에 있는 다음 시스템 속성이 True로 설정되어 있는지 확인합니다.

• glide.ui.polaris.experience
• glide.ui.polaris.dark_themes_enabled: 이 테마에서 어두운 변형을 Next Experience 재사용합니다.

필요한 역할: admin

이 태스크 정보

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

이 태스크 정보

주:

사용하여 테마 작성기 생성한 테마를 사용자 지정하고 잘못된 JSON 코드를 입력하면 테마 기록을 저장할 수 없습니다. UX 테마 기록에서 작업하는 동안 테마 작성기에서 열기 버튼을 사용하여 편집기 페이지로 이동할 수 있습니다. 자세한 내용은 로 테마 관리 또는 편집 테마 작성기 문서를 참조하십시오.

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > 테마 관리 > 테마.
2. 새로 만들기를 선택하여 테마 기록을 만듭니다.
3. 테마의 이름과 설명을 입력합니다.
4. 추가 작업 아이콘( )을 선택하고 저장을 선택합니다.
5. 구성: 앱 테마 탭에서 행을 삽입하여 테마와 연결된 스타일을 추가합니다.
   다음 4개의 열에 값을 할당합니다.

   적용성

   기본 테마를 재정의합니다. 적용 가능성 제약 조건을 충족하는 사용자는 기본 스타일이 아닌 테마에서 이러한 재정의를 볼 수 있습니다. 예를 들어, 다른 글꼴을 가진 스타일을 관리자에게 적용할 수 있습니다. 관리자 적용 가능성을 충족하는 사용자는 UI에서 Next Experience 다양한 글꼴을 볼 수 있으며, 이는 기본 시스템 테마 값을 재정의합니다. 관리자는 해당 대상에 대한 변경 내용이 포함된 전체 테마를 복사하거나 생성할 필요가 없습니다.

   주:

   적용 가능성 제약 조건을 비워 두면 스타일이 모든 사용자에게 적용됩니다.

   주문

   스타일이 적용되는 시기를 지정합니다. 순서가 높을수록 우선순위가 크다는 것을 의미합니다.

   주:

   사용자 지정 스타일을 사용하려면 스타일 순서 번호가 표준 Polaris 스타일보다 높은지 확인합니다.

   스타일

   네 가지 메인 스타일을 구성합니다. Polaris 테마에 사용되는 스타일 이름은 편집할 수 없지만 이 테마에서 각 스타일과 연결된 JSON 코드를 복사하여 사용자 지정 스타일 양식에 붙여넣고 편집할 수 있습니다.

   • 색상: 테마의 색상 속성과 추가할 기본 변형을 지정합니다. 색 스타일의 기본 섹션에서 테마에서 사용하는 색의 하위 집합은 RGB(빨강, 녹색, 파랑) 값으로 정의됩니다. 테마는 응용 프로그램에서 이러한 색상의 20개 이상의 그라데이션을 생성합니다.
   • 모양과 모양: 테두리의 모양과 느낌, 단추 및 기타 UI 컨트롤을 지정합니다.
   • 이미지: 애플리케이션의 테마에 사용되는 이미지를 추가합니다.
   • 타이 포 그래피: 응용 프로그램 전체에서 사용되는 글꼴을 지정합니다.

   유형

   Core 및 Variant의 두 가지 유형을 지정합니다. 핵심 스타일에는 색상, 모양 및 양식, 타이포그래피 및 이미지가 포함됩니다. 변형은 사용자가 선택할 수 있는 다양한 색상과 같은 다른 버전의 테마를 지정합니다. 가장 일반적인 변형은 테마의 어두운 버전입니다. 어두운 테마는 와 함께 Next Experience제공되는 유일한 변형입니다. 자세한 내용은 에서 테마 탐색 Next Experience 문서를 참조하십시오.

6. 스타일 필드를 선택하고 을 클릭합니다.
7. 새로 만들기를 선택합니다.
8. 기본(Primary), 보조(Secondary) 및 중립 색상(Neutral colors)을 선택합니다.
   주:

   테마는 여러 변수로 구성되므로 기본 Polaris 테마 색상이 여러 위치에서 표시될 수 있습니다.
9. 조직의 브랜딩 색상이 있는 경우 에서 https://theme.deoprototypes.com/color-generator-algo-v1색상 생성기로 이동합니다.
10. 자동 생성 버튼을 선택합니다.

    모달이 나타나고 조직의 세 가지 색상을 입력하라는 메시지가 표시됩니다.

11. 조직의 색상에 대한 16진수 코드 값을 입력합니다.
12. 생성을 선택합니다.
13. JSON 복사를 선택하여 CSS 변수를 수집합니다.
14. UX 스타일 양식을 작성합니다.

    필드	설명
    이름	UX 스타일의 이름입니다.
    유형	핵심 변형 유형에 대한 자세한 내용은 핵심 스타일과 변형의 차이점을 참조하세요.
    스타일	색상, 모양 및 양식에 대한 값입니다. 일부 값은 색상이고 테두리와 같은 일부는 픽셀 값입니다. 중요사항: JSON 코드는 다음 예제와 같이 래핑되어야 합니다.
    애플리케이션	UX 스타일의 범위입니다.

15. 제출을 선택합니다.
16. 업데이트를 선택합니다.
    주:

    새 테마를 사용하여 기본 테마를 덮어쓰려면 을 참조하십시오 테마 재정의 Next Experience.