로그인

검색

Extra Form
추천지수 7

라이믹스 2.0의 다크모드 기능을 사용하게 되면서 사이트에 출력되는 광고 중 인피드 광고와 일치하는 광고가 다크모드에서 너무 밝게 보이는 문제가 거슬릴 수도 있습니다.

 

오늘 그래서 라이믹스의 다크모드를 감지하고 또 시스템의 다크모드를 감지해서 두 값을 기준으로 애드센스 배경이 다른 광고를 각각 출력하는 것을 구현해 보았습니다.

 

지금 이 버전보다 훨씬 간단한 버전으로 팁을 작성했으니 간단버전으로 구현하시는걸 추천드립니다.

https://rxtip.kr/rx_tip/7215

 

 

 

Screenshot_20210512-184326_Chrome.jpg

 

미리 준비해둔 어두운 배경의 광고단위(인피드, 일치하는 광고)를 다크모드에서 출력되도록 한 모습입니다.

 

 

라이믹스에서 현재 선택된 모드는 쉽게 확인할 수 있는데 시스템의 값은 프론트단에서 확인 후 쿠키로 저장해서 쿠키값으로 확인하는 과정이 필요해 합니다.

 

https://stackoverflow.com/questions/52388490/php-how-to-detect-that-users-computer-browser-is-in-dark-mode

 

위 링크의 스크립트를 사용했습니다.

 

 

우선 레이아웃에 시스템의 현재 모드를 확인해서 쿠키로 저장하는 스크립트를 삽입해야 합니다.

 

저희 경우는 사용하는 레이아웃의 파일 중 _init.html  파일의 하단에 넣었습니다.

 

<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: '/' });
      body_element.addClass('color_scheme_' + color_scheme);
    }
    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>

 

혹시 $.cookie 에러가 난다면 레이아웃에서 jquery.cookie.js 를 로드하지 않아서 이니 CDN을 이용해서 로드해 주세요.

 

 

 

이제 이 쿠키값을 이용할 곳 레이아웃이나 게시판 스킨에 아래와 같은 코드를 넣어줍니다.

 

{@
$color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false;
if ($color_scheme === false):
$color_scheme = 'light';
endif;
}

 

저 값을 이용할 곳 즉 광고 코드를 다르게 출력할 곳이 게시판 쪽이라면 게시판 스킨에도 넣으셔야 합니다. 공통으로 사용하는 파일에 넣는게 좋겠죠. 저는 스케치북 스킨을 사용중이라  _setting.html 파일에도 넣었습니다.

 

 

그리고 이제 광고코드 같은 것을 라이트모드 상태인지 다크모드 상태인지 확인해서 분기해서 출력할 경우 아래와 같은 코드로 사용하면 됩니다.

 

<!--@if(\Rhymix\Framework\UA::getColorScheme()=='dark' || ($color_scheme=='dark' && \Rhymix\Framework\UA::getColorScheme()!='light'))-->
어두운 배경에서 출력될 것들
<!--@else-->
밝은 배경에서 출력될 것들
<!--@end-->

 

참고로 제가 시스템의 다크모드까지 감지해서 적용할 수 있는건 제가 사용하는 레이아웃이 시스템의 다크모드까지 감지해서 다크모드 class로 바꿔주는 기능이 있어 사용자가 선택하지 않으면 시스템 모드에 따라가도록 구현되어 있기 때문입니다. 이러한 기능이 없다면 시스템 모드를 확인하는 과정은 빼셔야 합니다.

 

 

이제  다크모드를 이용하는 방문자들이 광고 때문에 눈이 부시거나 하는 일이 좀 줄어들겠네요.

 

Who's 꿀팁관리소장

profile

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

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

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

Atachment
첨부 '0'

라이믹스 팁(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