로그인

검색

Extra Form
추천지수 6

브라우저 단에서 prefers-color-scheme: dark 다크모드를 감지한 후 Body의 class에 지정된 네임을 추가하는 것을 프론트단에서 하게 되면 현재 라이믹스 에서는 약간의 시간 소요로 인해 라이트모드 CSS -> 다크모드 CSS 변경과정이 감지가 되어 깜빡 거리는 등의 어색함을 발견하게 됩니다.

 

브라우저 상태를 감지한 것이 아닌 아예 방문자가 다크,라이트 모드를 선택하면 이런 현상이 없이 아주 빠르게 원하는 Class로 보여져서 깜빡이거나 변화를 느끼지 않고 쾌적하게 다크모드 이용이 가능한데요.

 

방문자가 직접 선택하지 않은 즉, Auto 상태에서 백엔드 차원의 PHP에서 조작을 할 수 있다면 라이믹스 내부에서 처리하는 것과 동일하게 브라우저의 다크모드를 의존해서 CSS를 변경할 수 있습니다.

 

이 팁의  auto 상태 확인을 위해 현재 이 글을 쓰고 있는 현재 시점에서는 라이믹스 코어 패치가 필요합니다. 다음 버전에는 적용될 패치 입니다.

https://github.com/rhymix/rhymix/commit/5160022a30c17958e47163b9d9228a9873baf3b6

(RXP Flex 레이아웃이거나 혹은 그 레이아웃을 참조해 다크모드를 구현했다면 패치는 필요치 않습니다.)

 

 

라이믹스 내부 다크모드에서 모드 선택시 쿠키를 생성하는 것과 동일하게 브라우저의 다크모드 감지시에도 쿠키를 생성하는 방법을 사용할 것입니다. 이전 애드센스를 위해 브라우저 다크모드를 감지해서 쿠키를 생성하는 코드 ( https://rxtip.kr/rx_tip/6910 ) 를 작성하셨던 분은 스크립트는 추가로 작성하지 않으셔도 됩니다.

 

레이아웃 하단에 브라우저 다크모드를 감지해서 쿠키를 생성하는 스크립트를 작성해 주세요.

 

<script>
jQuery(function($){
    var $color_scheme = $.cookie('color_scheme');
    function get_color_scheme() {
      return (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
    }
    function update_color_scheme() {
      $.cookie('color_scheme', get_color_scheme(), { path: '/' });
    }
    if ((typeof $color_scheme === "undefined") || (get_color_scheme() != $color_scheme))
      update_color_scheme();
    if (window.matchMedia)
      window.matchMedia("(prefers-color-scheme: dark)").addListener( update_color_scheme );
});
</script>

 

 

위 스크립트가 브라우저의 다크모드를 감지해서 color_scheme 이라는 쿠키에 'dark', 'light'를 감지한 값에 값을 넣어주게 됩니다.

 

그럼 이 쿠키를 가지고 php단에서 body의 class를 조작하면 스크립트에서 조작하는 것보다 훨씬 빠르게 조작해서 쾌적한 사용이 가능해집니다.

 

 

스크립트 단에서 했던 코드

<!--@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-->

 

위 코드를 php 코드로 대체할 것이고 위 스크립트는 삭제하게 됩니다.

 

** 잘못된 정보가 있어 수정합니다. 위 코드를 삭제하지 마시고 유지하시기 바랍니다. 위 코드가 새로고침할때 마다 작동하는 줄 알고 삭제를 했는데 새로고침 없이도 기기의 다크모드를 바로 감지 할수 있는 동작을 하고 있어 기기가 자동으로 다크모드로 전환될때 사이트의 다크모드가 새로고침 없이도 바로 class를 다크모드 class로 전환할 수 있도록 해줍니다. 이로 인해 사이트의 색상이 즉시 반영됩니다. **

 

 

레이아웃의 위쪽에  php로 Body의 클래스를 조작해 주는 코드를 넣어주면 됩니다.

 

{@
if($_COOKIE['color_scheme'] == 'dark' && \Rhymix\Framework\UA::getColorScheme() === 'auto' && !preg_match('/color_scheme_dark/', Context::getBodyClass())): 
Context::addBodyClass('color_scheme_dark');
endif;
if($_COOKIE['color_scheme'] == 'light' && \Rhymix\Framework\UA::getColorScheme() === 'auto' && !preg_match('/color_scheme_light/', Context::getBodyClass())): 
Context::addBodyClass('color_scheme_light');
endif
}

 

 

 

쿠키를 사용해야 하지만 덕분에 라이믹스 내부 다크모드와 동일한 수준의 빠른 작동의 결과를 보여주어서 굉장히 만족스럽습니다.

일단 현재로서는 별다른 부작용이 없어 보입니다.

 

이렇게 구현해 놓으면 장점은 사용자가 다크모드를 매번 선택하는 것이 귀찮아 브라우저 다크모드와 연동해서 사용하기 원하는 사용자들에게 깜빡이는 현상 없이 다크모드를 제공할 수 있습니다.

 

브라우저와 자동으로 연동되는 다크모드 자동기능을 쉽게 사용할 수 있게 하는 팁은 https://rxtip.kr/rx_tip/6922 에 작성해 놓았습니다.

지금 이 팁을 적용해 놓으면 브라우저와 연동하는 다크모드 사용에 불편함이 사라져서 좋습니다.

 

 

** 중요 **

현재 이 안내가 있는 시점에는 php에서 body class 를 추가하는 코드가 정상동작하는 것은 RXP Flex 레이아웃의 함수의 영향이므로 RXP Flex 레이아웃을 사용하지 않거나 참조하지 않은 경우 Class가 토글되지 않고 추가되는 문제가 있을 수 있습니다.

 

위 문제 관련 라이믹스에서 신규 기능을 제공하는 패치가 진행되어 

https://github.com/rhymix/rhymix/commit/bd075ee409099a20d405a5fa6b92f2fe637781bc

 

위 패치가 진행되면 기존 클래스를 제거할 수 있어 제거 후 추가하는 작업으로 정상적인 class 토글이 가능해집니다. 추후 해당 함수를 사용하는 코드로 변경하겠습니다.

 

Context::removeBodyClass('color_scheme_light'); // 새로 만들어진 함수

Context::addBodyClass('color_scheme_dark');

 

위와 같이 클래스 제거 후 추가하는 코드로 바꾸면 됩니다.

{@

if($_COOKIE['color_scheme'] == 'dark' && \Rhymix\Framework\UA::getColorScheme() === 'auto' && !in_array('color_scheme_dark', Context::getBodyClassList())): 
Context::removeBodyClass('color_scheme_light');
Context::addBodyClass('color_scheme_dark');
endif;

if($_COOKIE['color_scheme'] == 'light' && \Rhymix\Framework\UA::getColorScheme() === 'auto' && !in_array('color_scheme_light', Context::getBodyClassList())): 
Context::removeBodyClass('color_scheme_dark');
Context::addBodyClass('color_scheme_light');
endif;

}

 

위와 같이 바뀔 예정입니다.

Who's 꿀팁관리소장

profile

라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.

커뮤니티를 운영하면서 필요한 간단한 것을 만들고 공유하고 운영에 필요한 노하우나 기술을 공유합니다.

하지만 따로 의뢰를 받거나 하지 않으니 문의 등을 하실 필요는 없습니다.

  • profile
    adlib 2021.05.16 09:31
    열심히 따라하고 있는데
    진도를 못내고 있네요. ^^*
  • profile
    꿀팁관리소장 2021.05.16 16:40
    To.adlib

    아.. 제가 다른 분이랑 착각해서 댓글을 잘못 달았었네요. 제 댓글 지우면서 달아주신 댓글이 함께 지워졌습니다.
    말씀하신 프로필 이미지는 서명에 잘못 업로드하셔서 제가 프로필에 다시 업로드 해드렸습니다.

    서명에 업로드는 설정에서 바꿔야 겠네요.

  • profile
    adlib 2021.05.16 23:10
    To.꿀팁관리소장
    ^^* 감사합니다.

라이믹스 팁(76)

라이믹스 운영과 사용에 관한 팁을 공유 합니다.

  1. read more
  2. read more
  3. Read More
  4. Read More
  5. Read More
  6. Read More
  7. Read More
  8. Read More
  9. Read More
  10. Read More
  11. Read More
  12. Read More
  13. Read More
  14. 라이믹스 회원(팝업)메뉴에 아이콘 추가해주기

    Date2021.05.11 Category기능 Views54 Votes0
    Read More
  15. Read More
  16. Read More
  17. Read More
  18. 신규 회원 가입 사실만 메일로 전달 받고 싶을때

    Date2021.05.06 Category기능 Views45 Votes0
    Read More
  19. Read More
  20. Read More
  21. 스케치북5 스킨 검색어 하이라이트 효과 주기

    Date2021.05.02 Category기능 Views52 Votes0
    Read More
  22. Read More
  23. Read More
  24. 댓글 주소 클립보드에 복사하는 기능 추가하기 10

    Date2021.04.25 Category기능 Views46 Votes0
    Read More
  25. Read More
  26. Read More
  27. Read More
  28. 스케치북 빵조각 '메뉴 아이콘' 적용해 보았습니다.

    Date2021.04.21 Category기능 Views34 Votes0
    Read More
  29. Read More
  30. 본문 게시글 주소 복사 버튼 여러곳에 추가해 주기 17

    Date2021.04.10 Category기능 Views49 Votes0
    Read More
  31. input 입력창 크기가 작거나 이상한가요? css box-sizing

    Date2021.04.09 Category기타 Views43 Votes0
    Read More
  32. 본문 게시글 주소 클립보드 복사 기능 만들기 8

    Date2021.04.06 Category기능 Views73 Votes0
    Read More
Board Pagination Prev 1 2 3 Next
/ 3