핵심 스타일, 색, 변형 및 대체 색상표

핵심 스타일, 변형 및 대체 색상표를 구성하여 다양한 사용자에 맞게 UI의 넥스트 경험 모양과 느낌을 조정할 수 있습니다.

의 코어 스타일 테마 작성기

코어 스타일은 스타일의 기본 버전입니다. 핵심 스타일에는 색상, 모양 및 형태, 타이포그래피 및 이미지가 포함됩니다.

색상 위치 테마 작성기

구성요소를 편집할 때 색상 선택기를 사용하여 캔버스의 배경색을 변경하면 구성요소 색상이 다양한 배경에서 어떻게 렌더링되는지 확인할 수 있습니다.

주:

캔버스 색상 업데이트는 인스턴스에 적용되지 않습니다. 편집한 테마를 인스턴스에 게시하는 경우 구성요소와 관련된 후크만 인스턴스에 적용됩니다.

테마 색상을 편집할 때 색상 선택기에서 명암비를 볼 수 있습니다. 팔레트 또는 내 색상 보기에서 색상을 변경하면 값이 업데이트됩니다.

의 변형/대체 색상표 테마 작성기

변형과 대체 색상표는 모두 변형으로 분류된 UX 스타일 기록의 유형입니다.

변형은 일반적으로 접근성을 위해 설계된 기존 테마의 대체 버전으로, 사용자가 기본 설정에서 선택할 수 있습니다. 변형의 예로는 와 함께 넥스트 경험제공되는 기본 Polaris 테마의 어두운 버전이 있습니다. 어두운 변형은 밝은 배경을 어두운 배경으로 바꾸고 그에 따라 텍스트 색을 대비하여 시각 장애가 있는 사용자의 접근성을 향상시키는 데 사용할 수 있습니다.

대체 색상표는 테마의 색에 적용할 수 있는 수정 사항이며 꾸미기 목적으로 디자인되었습니다. 관리자 페이지에서 기본 Polaris 테마를 제외한 모든 테마에 대해 이 팔레트 테마 작성기 를 정의할 수 있습니다. 기존 테마를 사용하여 대체 색상표를 만들면 대체 색상표가 해당 기본 테마와 그룹화되고 처음에 해당 로고, 색상, 입력 체계 및 모양 스타일이 공유됩니다. 처음에 기본 테마와 유일한 차이점은 고유한 이름을 할당한다는 것입니다.

다음에는 대체 색상표의 기본 색상을 정의합니다. 이 색상은 탐색 모음, 메뉴 및 기타 공통 구성요소를 식별하는 데 사용됩니다. 마찬가지로 필요한 경우 보조 색상을 정의합니다. 인터페이스에 보조 색상이 필요하지 않은 경우 기본 색상이 사용됩니다. 마지막으로, 구분선과 컨테이너를 정의하는 데 도움이 되는 중립 색상을 정의합니다. 밝은 색과 어두운 색의 두 가지 기본 팔레트를 사용할 수 있습니다.

주:

보조 및 중립 색상은 어두운 대체 색상표에서 편집할 수 없습니다.

선택한 색상을 사용하여 팔레트를 만들 때 이름을 바꿀 수 있습니다. 다음을 수행할 수도 있습니다. 에서 사용할 수 있는 모든 UI 자산을 미리 봅니다. Now Platform 인스턴스에 적용할 때 어떻게 렌더링되는지 시각화합니다..

주:

어두운 변형은 이전에 UI16이라고 했던 에 코어 UI적용되지 않습니다. 코어 UI 비활성 상태인 경우 넥스트 경험 사용하는 인터페이스입니다. 그러나 어두운 변종은 대부분의 측면 으로 확장됩니다 넥스트 경험.