[UI5] SAPUI5 Dark Theme 적용 방법

 

 

[UI5] SAPUI5 Dark Theme 적용 방법

SAPUI5 Dark Theme 적용 방법

 

SAPUI5로 개발하다 보면 기본 Light Theme(sap_fiori_3)만 써도 충분하지만,
사용자 선호도나 UX 요구 사항에 따라 Dark Theme를 적용해야 할 때가 종종 있습니다.
특히 개발자가 밤에 작업할 때 눈이 편하기도 하고요.

 

이번 글에서는 SAPUI5 Dark Theme을 적용하는 방법을 가장 쉽게,
그리고 실제 프로젝트에 바로 넣을 수 있는 예시 코드와 함께 정리해보겠습니다.

 

 

 

SAPUI5 테마란 무엇일까?

SAPUI5의 “테마”는 UI 전체에 적용되는 스타일(색상, 간격, 컴포넌트 외형)을 말합니다.
SAP Fiori는 대표적으로 아래 4개 테마를 제공합니다:

• sap_fiori_3 → Light 기본 테마
• sap_fiori_3_dark → Dark 테마
• sap_fiori_3_hcb → High Contrast Black
• sap_fiori_3_hcw → High Contrast White

 

 

 

 

1. index.html에서 테마 변경하기

index.html에서 테마 변경하기

 

SAPUI5 테마는 bootstrap 스크립트에서 data-sap-ui-theme 속성으로 지정합니다.

기본은 아래처럼 되어 있죠.

data-sap-ui-theme="sap_fiori_3"

 

>>> 이 부분을 sap_fiori_3_dark 으로 바꿔주기만 하면 됩니다.

 

 

 

 

2. Component.js에서 테마 변경 (동적 변경)

만약 앱 실행 중에 사용자가 테마를 바꾸도록 하고 싶다면
Component.js 또는 Controller에서 아래처럼 적용할 수 있어요:

 

sap.ui.getCore().applyTheme("sap_fiori_3_dark");

 

반대로 라이트 테마로 돌아가고 싶으면:

sap.ui.getCore().applyTheme("sap_fiori_3");

 

 

 

 

3. Theme Parameter 확인하기

Dark 테마에서 버튼 색상, 텍스트 색상 등 Theme Parameter를 변경하고 싶으면 아래 URL에서 확인 가능해요:

🔗 https://ui5.sap.com/#/topic/07cdd3be0bd54a2a89c2b34c1e2eab56

SAPUI5 SDK - Demo Kit

여기서

• 기준 컬러
• Dark Theme 기반 컬러 값
  전부 확인 가능!

 

 

4. Fiori Tools(Local)에서 다크 테마 확인하기

Fiori Tools

다크 테마

 

BAS 또는 VS Code Fiori Tools 환경은 처음 실행 시 Light 테마가 적용되지만,
UI5 테마만 바꿔도 로컬 프리뷰는 바로 다크 화면으로 뜹니다.

 

npm run start  로 실행하면 index.html에서 적용된 Dark Theme가 바로 반영됨.

 

 

프로젝트 적용 시 주의할 점

 

1) Custom CSS가 Light 기준으로 되어 있으면 색상 튀는 문제

기존 CSS가 hard-coded 색상을 쓰고 있다면(예: color: black;)
Dark Theme에서는 안 보일 수도 있어요.

→ Custom CSS는 가능하면 Theme Parameter 사용 추천.

 

 2) OVP, Flexible Column Layout 등 컴포넌트도 자동 Dark 적용

별도 작업 필요 없음.
SAPUI5가 다 처리해줍니다.

 

 3) 브라우저 캐시 문제

테마 교체 후 화면이 바뀌지 않는다면 브라우저 캐시를 지우거나
URL 파라미터에 추가해도 됩니다:

 

 

 

SAPUI5는 테마 시스템이 아주 잘 되어 있어서 Dark Theme 적용이 정말 쉽더라구요.
한 줄만 바꾸면 전체 앱이 다크 모드로 바뀌고, 원하면 런타임에서도 토글할 수 있어요.

참고하세요!