브라우저 단에서 prefers-color-scheme: dark 다크모드를 감지한 후 Body의 class에 지정된 네임을 추가하는 것을 프론트단에서 하게 되면 현재 라이믹스 에서는 약간의 시간 소요로 인해 라이트모드 CSS -> 다크모드 CSS 변경과정이 감지가 되어 깜빡 거리는 등의 어색함을 발견하게 됩니다.
** 라이믹스 2.0.12 에서는 이 팁이 필요없이 코어에서 깜빡임 없이 전환이 잘 되도록 보완이 되었습니다. **
브라우저 상태를 감지한 것이 아닌 아예 방문자가 다크,라이트 모드를 선택하면 이런 현상이 없이 아주 빠르게 원하는 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 토글이 가능해집니다. 추후 해당 함수를 사용하는 코드로 변경하겠습니다. (21.6.21 라이믹스 2.0.12 에서 패치되어 해당 버전 이상의 라이믹스에서는 아래 코드를 사용하시면 됩니다.)
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;
}
위와 같이 바뀔 예정입니다.
진도를 못내고 있네요. ^^*