로그인

검색

Extra Form
추천지수 7

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

 

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

 

 

 

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
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
0 추천
Atachment
첨부 '0'
  • d
    discord 2021.09.09 03:47
    간단한 버전은 더 이상 공개를 안 하시는 건가요? 저는 본문 방식으로 했더니 구분되지 않고 광고가 동시에 두 개가 출력되네요.
  • profile
    꿀팁관리소장 2021.09.09 08:53
    To.discord
    간단한 방식은 문제가 있거나 더이상 유효하지 않아 삭제했을 것 같네요.

라이믹스 팁(97)

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

  1. read more
  2. read more
  3. Read More
  4. Read More
  5. 라이믹스 회원(팝업)메뉴에 아이콘 추가해주기

    Date2021.05.11 Category기능 Views108 Votes0
    Read More
  6. RXP FLEX 레이아웃의 다크모드 기능 게시판에 적용하기 4

    Date2021.05.09 Category기능 Views130 Votes0
    Read More
  7. 카카오지도 마커 위치로 카카오내비 길안내 연동하기

    Date2021.05.08 Category기능 Views124 Votes0
    Read More
  8. Read More
  9. 신규 회원 가입 사실만 메일로 전달 받고 싶을때

    Date2021.05.06 Category기능 Views85 Votes0
    Read More
  10. Read More
  11. Read More
  12. 스케치북5 스킨 검색어 하이라이트 효과 주기

    Date2021.05.02 Category기능 Views76 Votes0
    Read More
  13. Read More
  14. Read More
  15. 댓글 주소 클립보드에 복사하는 기능 추가하기 10

    Date2021.04.25 Category기능 Views72 Votes0
    Read More
  16. Read More
  17. Read More
  18. Read More
  19. 스케치북 빵조각 '메뉴 아이콘' 적용해 보았습니다.

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

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

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

    Date2021.04.06 Category기능 Views145 Votes0
    Read More
  24. Read More
  25. 라이믹스 2.0 회원 서명 높이를 조절 하고 싶다면

    Date2021.03.13 Category기능 Views112 Votes0
    Read More
  26. Read More
  27. Read More
  28. Read More
  29. Read More
  30. Read More
  31. Flex 레이아웃 로그인 오류 메시지 안뜨는 문제 해결

    Date2021.01.31 Category오류 Views77 Votes0
    Read More
  32. Read More
Board Pagination Prev 1 2 3 4 Next
/ 4