아이콘 UI 섹션에 대한 색상 변수 지원

색상 변수를 사용하여 모바일 아이콘 UI 섹션에서 테마를 변경하는 방법에 대해 알아봅니다.

아이콘 UI 섹션에는 요소의 전경색과 배경색을 제어하는 두 개의 필드가 있는 색 섹션이 있습니다. 배경색 변수 전경색 변수 이 두 필드는 다음 테이블에서 찾을 수 있습니다. 아이콘 섹션 대상 시작 관리자 [sys_sg_navigation_section_destination_applet_launcher] 아이콘 섹션 대상 기능 [sys_sg_navigation_section_destination_button] 아이콘 섹션 대상 화면 [sys_sg_navigation_section_destination_screen] 이러한 작업 생성에 대한 자세한 내용은 문서를 참조하십시오 아이콘 UI 섹션 구성. UX 테마 속성 [sys_ux_theme_property] 테이블에서 색상 변수를 정의할 수 있습니다. 사용 가능한 변수 목록은 아래의 색상 디자인 가이드를 참조하십시오.

모바일 아이콘 UI 섹션 색상 가이드

색상 변수는 다음과 같이 나뉩니다. 설계 가이드라인을 사용하여 사용 사례에 적합한 색상 변수를 식별합니다.

경보 색상표

경보 색상표 색상은 중요한 상태, 상태 및 작업을 강조 표시합니다. 장식이나 조직용이 아닌 특정 의미를 전달하기 위해 경보 색상을 사용합니다.

그룹화된 색상표

그룹화된 색상표 색상은 산업 라인의 색상 규칙을 따릅니다. 이러한 색상을 사용하여 색상 항목이 특정 산업 또는 사업부와 연결되어 있음을 나타냅니다. 각 색상의 의미는 컨텍스트에 따라 다르지만 앱 내에서 일관성을 유지해야 합니다.

경보 색상표

색 이름	색상	예제	색상 옵션
기본			모바일 변수 기본 웹 변수 --now-color--primary-1
중요			모바일 변수 alert--critical-2 웹 변수 --now-color_alert--critical-2
높음			모바일 변수 alert--high-2 웹 변수 --now-color_alert--high-2
경고			모바일 변수 alert--warning-2 웹 변수 --now-color_alert--warning-2
보통			모바일 변수 alert--moderate-2 웹 변수 --now-color_alert--moderate-2
정보			모바일 변수 alert--info-2 웹 변수 --now-color_alert--info-2
긍정적			모바일 변수 alert--positive-2 웹 변수 --now-color_alert--positive-2
낮음			모바일 변수 alert--low-2 웹 변수 --now-color_alert--low-2

그룹화된 색상표

색 이름	색상	예제	색상 옵션
파랑			웹 변수 --now-color_grouped--blue-2
갈색			웹 변수 --now-color_grouped--brown-2
회색			웹 변수 --now-color_grouped--gray-2
녹색			웹 변수 --now-color_grouped--green-2
녹색-노란색			웹 변수 --now-color_grouped--green-yellow-2
자홍색			웹 변수 --now-color_grouped--마젠타-2
주황색			웹 변수 --now-color_grouped--orange-2
분홍색			웹 변수 --now-color_grouped--분홍색-2
보라			웹 변수 --now-color_grouped--보라색-2
청록색			웹 변수 --now-color_grouped--청록색-2
황색			웹 변수 --now-color_grouped--yellow-2