RXP  FLEX 레이아웃 다크모드 동작이 맘에 든다고 레이아웃 추천한다고 어제 글 작성했는데요.

 

오늘은 운영중인 사이트 한곳을 RXP FLEX 레이아웃의 다크모드 기능을 이식했습니다.

 

https://github.com/rx-public/rxp_flex/blob/main/_config.php

 

위 파일에 다크모드 관련 함수가 있어서 이식하면 될 것 같아서 해당 파일 거의 대부분중 사용 가능하지 않은 대부분은 제외하고 다크모드에 필요한 것은 살려서 기존 레이아웃에 적용했는데 아주 잘 작동하네요.

 

대신 구입한 레이아웃과 게시판스킨이 세트이고 디자인이 굉장히 디테일하게 많이 되어 있는 것이라 역설적으로 다크모드에서 바꿔야 할 디자인이 제법 되네요.

 

 

화면 캡처 2021-05-11 182920.png.jpg

 

 

다크모드, 라이트모드 전환 동작이 아주 깔끔해서 너무 좋네요.

 

대략 눈에 띄는 부분만 다크모드 대응하도록 고쳐놓은 상태 입니다.

글쓴이 웹지기

profile
XE와 라이믹스를 운영하며 알게된 노하우를 공유합니다.
https://rxtip.kr/ 라이믹스 꿀팁
  • profile
    혹시 어떻게 적용하였는지 상세한 내용을 나중에 라이믹스 꿀팁에 올려주실 수 있나요?
    저도 적용하려고 뜯어보던 중이었는데 참고하면 좋을 것 같습니다!
  • profile profile
    네. 조만간 한번 제가 이식한 내용 한번 정리해보겠습니다.
  • profile profile
    감사합니다! 많은 도움 되고 있습니다!
  • profile profile
    이식하지 않고도 가능하다고 하네요. 아래 비엔유님 댓글에 의하면 코어 오류 때문에 추가된 함수라고 하시니 아마 라이믹스 수정된 코어로 적용하면 함수 호출 하지 않고 가능할 것으로 보입니다.
  • profile profile
    기대되네요!
    일단 사이트 설정에서 다크모드 감지 기능을 통해 좀 더 간단하게 사용할 수 있겠네요.
  • profile profile
    일단 현재 시점 기준으로 적용할 수 있는 방법을 작성해 놓았는데 나름 쉽게 설명한다고 했지만 제 글솜씨가 엉망일 수도 있으니 이점은 참고해서 봐주시고 이해가 안가는 부분이 있거나 하는 부분 알려주시면 확인해 보도록 하겠습니다.
  • profile profile
    오오..! 상세하네요!
    좋은 정보 감사합니다. 참고해서 저도 잘 적용해도록 하겠습니다!
  • ?
    어머.
    관련 코드는 라이믹스 2.0.11이하 버전에서 다크모드 처리 버그가 있어서 별도 처리한 것이라서 다음 버전에서는 필요 없어질 수 있습니다.

    버그는 이미 수정된 상태입니다.
    https://github.com/rhymix/rhymix/issues/1703
  • ? profile

    네. 기존 레이아웃 들은 라이믹스 다크모드 최신 기능 자체가 코드 구현이 안되어 있으니 다크모드 사용하는 것만 참조해도 좋은 레퍼런스가 될 것 같습니다.

    저 한줄 고쳐치면 어떻게 다시 바꿔야 할지는 잘 모르겠네요.

     - 레이아웃에 추가된 함수에 의존하지 않고 사용하는 것은 조금 더 뜯어보겠습니다.

     

    뭐, 함수 자체가 필요 없어진다면 더 간단해 질것이니 좋은 일이긴 하네요.

  • ? profile

    그리고 다크모드,라이트모드 변경시 아이콘과 툴팁에 즉시 반영안되는문제 저는 이렇게 회피해 보았습니다.


    {@ // 다크 모드 전환 코드 }
    <script>
    <[email protected](\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');
    }
    });
    <[email protected]>


    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>
    <[email protected](RxpFlexTheme::isDarkMode())-->
    $('.islight').show();
    <[email protected]>
    $('.isDark').show();
    <[email protected]>
    </script>

    위 스크립트는 위쪽 스크립트있는  파일에서는 작동을 안해서 아이콘이 출력 코드가 있는 곳 하단에 넣었습니다.


    꼼수 스럽지만 일단 body 의 class 변경하는 것과 일관되게 변경이되어서 즉시 반영이 되네요.