라이믹스 2.0의 다크모드 기능을 사용하게 되면서 사이트에 출력되는 광고 중 인피드 광고와 일치하는 광고가 다크모드에서 너무 밝게 보이는 문제가 거슬릴 수도 있습니다.
오늘 그래서 라이믹스의 다크모드를 감지하고 또 시스템의 다크모드를 감지해서 두 값을 기준으로 애드센스 배경이 다른 광고를 각각 출력하는 것을 구현해 보았습니다.
미리 준비해둔 어두운 배경의 광고단위(인피드, 일치하는 광고)를 다크모드에서 출력되도록 한 모습입니다.
라이믹스에서 현재 선택된 모드는 쉽게 확인할 수 있는데 시스템의 값은 프론트단에서 확인 후 쿠키로 저장해서 쿠키값으로 확인하는 과정이 필요해 합니다.
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로 바꿔주는 기능이 있어 사용자가 선택하지 않으면 시스템 모드에 따라가도록 구현되어 있기 때문입니다. 이러한 기능이 없다면 시스템 모드를 확인하는 과정은 빼셔야 합니다.
이제 다크모드를 이용하는 방문자들이 광고 때문에 눈이 부시거나 하는 일이 좀 줄어들겠네요.
