다크 모드를 사용하는 이유는 무엇인가요?
다크 모드를 좋아하지 않는 사람이 있을까요? 요즘은 어디서나 볼 수 있습니다. 좋아하는 웹사이트와 데스크톱 애플리케이션부터 모바일 기기까지요. 고객 경험에 있어서는 사용자가 좋아할 만한 매끄러운 경험을 위해 화살통에 추가할 수 있는 좋은 화살입니다. 그래서 "내 컴퓨터에 다크 모드를 구현하려면 어떻게 해야 할까?"라는 의문이 생깁니다. Mendix 신청?"
제가 그 방법을 알려드리려고 합니다. 아주 간단하죠!
우리가 할 첫 번째 일은 다크 모드 처리가 필요한 애플리케이션을 찾는 것입니다. 가장 최근에 참석한 사람들을 위해 Mendix 세계 여러분, 여러분은 우리가 시연하기 위해 만든 회사인 Lato Bikes에 대해 알고 계실 것입니다. Mendix 입양 여정 요한 덴 한(Johan den Haan)의 기조연설.
특히 제품 페이지는 매우 밝아서 다크 모드 처리가 필요할 수 있습니다. 어떻게 하는지 살펴보겠습니다.
다크 모드, 단계별로
우선, 우리는 DarkMode라는 새로운 모듈을 프로젝트에 추가하고 모듈에 단일 사용자 역할을 추가할 것입니다(모두가 다크 모드를 사용할 수 있어야 합니다!). 이 새로운 모듈에서 _darkmode.scss라는 SASS 파일을 만들 것입니다. — 반드시 메인 파일에 가져오기로 추가하세요!
다음으로, 새로운 SASS 파일에서 다크 테마를 빌드하기 시작합니다. 저는 모든 것을 오버라이드하는 것을 좋아하므로 보통 다음과 같은 것으로 시작합니다.
html 본문{
배경색: $gray-darker;
color:#fff;
h1, h2, h3, h4, h5, .위젯-이벤트-시간, .위젯-타임라인-제목, h6, .h1, .h2, .h3, .h4, .h5, .h6{
color:#fff;
}
//여기에 스타일을 계속 추가합니다…
}
조각조각으로 배경색, 테두리, 글꼴색을 재정의해서 전체적인 모양과 느낌에 만족할 때까지 작업합니다. 이런 식으로요…
마음에 드는 테마가 생기면 고객이 사용할지 여부를 선택할 수 있도록 토글 가능하게 만들어야 합니다. 이 데모의 목적을 위해 이 세션에 적용되는 토글로 빌드하지만 고객 계정에 연결된 영구 설정으로 쉽게 만들 수 있습니다. 그렇게 하려면 SASS 파일에 추가 비트를 추가해야 합니다.
"html body"에 ".darkmode" 스타일을 추가합니다. 즉, 클래스 "darkmode"가 body에 추가될 때마다 새로운 모양과 느낌이 적용됩니다.
다음으로 다크 모드가 켜져 있는지 꺼져 있는지 추적하는 엔티티를 추가합니다. 이 데모에서는 비영구적으로 만들고 고객 세션에 연결합니다. 그런 다음 연결에 대해 보안을 "읽기 전용"으로 설정하고 사용 플래그에 대해 "읽기/쓰기"로 설정합니다.
그 후에 고객에게 켜고 끌 수 있는 방법을 제공할 것입니다. 몇 개의 아이콘을 가져와서 새로운 이미지 컬렉션에 추가할 것입니다. 하나는 라이트 모드용이고 다른 하나는 다크 모드용입니다.
그런 다음 해당 부울 값을 토글하기 위한 스위치 컨트롤이 있는 스니펫을 만듭니다. 이전에 만든 DarkMode 엔터티를 사용해야 합니다. 먼저 다음과 같은 스니펫이 있어야 합니다.
끝에 있는 추가 열은 넓은 영역에 배치할 경우 중앙 집중화하는 데 도움이 되며, 데이터 소스가 스니펫의 컨텍스트 항목이 아니라 DataView라는 것을 알 수 있습니다. 이는 모든 페이지에서 Switch를 사용할 수 있도록 레이아웃 템플릿에 배치하기 때문입니다. 레이아웃 템플릿에서 스니펫을 사용할 때는 자체 데이터 소스를 로드해야 하며, 이 경우 DataView와 Microflow를 사용하여 이를 수행합니다.
Microflow 데이터 소스는 DS_DarkMode이며 현재 세션에 연결된 DarkMode 엔터티를 반환하거나, 아직 없는 경우 현재 세션에 연결된 새 엔터티를 반환해야 합니다. 다음과 같아야 합니다.
스니펫에서 마지막으로 해야 할 일은 Switch에 OnChange 이벤트를 제공하는 것입니다. 해당 이벤트는 Nanoflow를 트리거해야 합니다. Nanoflow OCh_DarkModeToggle을 호출했고 Nanoflow가 하는 일은 JavaScript 액션을 호출하는 것뿐입니다. 해당 액션은 호출될 때 본문에 "darkmode" 클래스를 추가하거나 제거합니다. 이는 JavaScript 클래스 토글 메서드를 사용하여 간단히 수행할 수 있지만 절대적으로 사용할 수 있도록 더 명확하게 만들기로 했습니다.
먼저 IsEnabled 매개변수로 Action을 생성한 다음 이 함수를 추가했습니다.
비동기 함수 JS_DarkMode(isEnabled)를 내보냅니다.
// 사용자 코드 시작
활성화된 경우
document.body.classList.add("다크모드");
} 다른 {
document.body.classList.remove("다크모드");
}
// 최종 사용자 코드
}
마지막 단계는 레이아웃 템플릿에 스니펫을 추가하는 것입니다. 그러면 준비가 완료됩니다!
게시되면 헤더에 스위치 컨트롤이 표시되고 이를 튕기면 다크 모드 스타일이 적용되고 제거됩니다. 한 단계 더 나아가려면 고객 데스크톱 테마가 무엇으로 설정되어 있는지 감지하여 다크 모드를 적용할지 여부를 선택할 수도 있습니다.
if(window.matchMedia && window.matchMedia('(선호 색상 구성표: dark)').matches){
document.body.classList.add("다크모드");
}
이것이 다크 모드 구현에 도움이 되었으면 좋겠습니다! 도움이 되었다면 저희에게 연락하여 스크린샷이나 링크를 보내주세요. 어떻게 작동하는지 보고 싶습니다!