넥스트 경험 테마 구성

만든 스타일을 테마에 넥스트 경험 추가하여 사용자 환경의 모양과 느낌을 수정합니다.

시작하기 전에

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

• glide.ui.polaris.experience
• glide.ui.polaris.dark_themes_enabled: 이 테마에서 어두운 변형을 넥스트 경험 재사용합니다.

필요한 역할: 관리자

이 태스크 정보

여기에는 넥스트 경험 Polaris와 Coral의 두 가지 테마가 포함됩니다. 테마를 직접 만들거나 수정할 때 두 테마를 시작점으로 다시 사용하거나 사용자 지정할 수 있습니다.

이 태스크 정보

주:

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

프로시저

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

   적용성

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

   주:

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

   순서

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

   주:

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

   스타일

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

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

   유형

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

6. Style 필드를 선택하고 조회 아이콘을 선택합니다.
7. 새로 만들기를 선택합니다.
8. 기본(Primary), 보조(Secondary) 및 중립 색상(Neutral colors)을 선택합니다.
   주:

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

    모달이 나타나고 조직의 세 가지 색상으로 입력하도록 요청합니다.

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

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

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

다음에 수행할 작업

사용자 지정 테마를 게시하려면 문서를 참조하십시오 에 여러 테마 게시 넥스트 경험.