RXP FLEX 레이아웃 다크모드 동작이 맘에 든다고 레이아웃 추천한다고 어제 글 작성했는데요.
오늘은 운영중인 사이트 한곳을 RXP FLEX 레이아웃의 다크모드 기능을 이식했습니다.
https://github.com/rx-public/rxp_flex/blob/main/_config.php
위 파일에 다크모드 관련 함수가 있어서 이식하면 될 것 같아서 해당 파일 거의 대부분중 사용 가능하지 않은 대부분은 제외하고 다크모드에 필요한 것은 살려서 기존 레이아웃에 적용했는데 아주 잘 작동하네요.
대신 구입한 레이아웃과 게시판스킨이 세트이고 디자인이 굉장히 디테일하게 많이 되어 있는 것이라 역설적으로 다크모드에서 바꿔야 할 디자인이 제법 되네요.
다크모드, 라이트모드 전환 동작이 아주 깔끔해서 너무 좋네요.
대략 눈에 띄는 부분만 다크모드 대응하도록 고쳐놓은 상태 입니다.
네. 기존 레이아웃 들은 라이믹스 다크모드 최신 기능 자체가 코드 구현이 안되어 있으니 다크모드 사용하는 것만 참조해도 좋은 레퍼런스가 될 것 같습니다.
저 한줄 고쳐치면 어떻게 다시 바꿔야 할지는 잘 모르겠네요.
- 레이아웃에 추가된 함수에 의존하지 않고 사용하는 것은 조금 더 뜯어보겠습니다.
뭐, 함수 자체가 필요 없어진다면 더 간단해 질것이니 좋은 일이긴 하네요.
그리고 다크모드,라이트모드 변경시 아이콘과 툴팁에 즉시 반영안되는문제 저는 이렇게 회피해 보았습니다.
{@ // 다크 모드 전환 코드 }
<script>
<!--@if(\Rhymix\Framework\UA::getColorScheme() === 'auto')-->
window.matchMedia("(prefers-color-scheme: dark)").addListener(function(e) {
if (e.matches) {
$('body').removeClass('color_scheme_light').addClass('color_scheme_dark');
} else {
$('body').removeClass('color_scheme_dark').addClass('color_scheme_light');
}
});
<!--@endif-->
function onClickDarkThemeToggle(e) {
const isDarkTheme = getColorScheme() === 'dark';
if (isDarkTheme === true) {
setColorScheme('light');
$('.isDark').show();
$('.islight').hide();
} else {
setColorScheme('dark');
$('.islight').show();
$('.isDark').hide();
}
return false;
}
</script>
<a cond="$layoutConfig['color_scheme'] === 'auto'" class="app-header-item" onclick="onClickDarkThemeToggle()">
<ion-icon class="islight app-tooltip" name="sunny-outline" style="display:none;" title="라이트모드로 전환"></ion-icon>
<ion-icon class="isDark app-tooltip" name="contrast-outline" style="display:none;" title="다크모드로 전환"></ion-icon>
</a>
<script>
<!--@if(RxpFlexTheme::isDarkMode())-->
$('.islight').show();
<!--@else-->
$('.isDark').show();
<!--@endif-->
</script>
위 스크립트는 위쪽 스크립트있는 파일에서는 작동을 안해서 아이콘이 출력 코드가 있는 곳 하단에 넣었습니다.
꼼수 스럽지만 일단 body 의 class 변경하는 것과 일관되게 변경이되어서 즉시 반영이 되네요.
저도 적용하려고 뜯어보던 중이었는데 참고하면 좋을 것 같습니다!