라이믹스 2.0의 다크모드 기능이 단순히 사용자가 클릭했을때 class를 변경해 주는 것 외 사용자가 매번 선택하지 않고 기기의 다크모드 설정에 의존하도록 auto 상태로도 운영이 가능합니다. 물론 해당 상황을 감지해서 다크모드,라이트모드 전환되도록 코드를 짜야겠지요.
개인 블로그 사이트, 커뮤니티 1개 이렇게 라이믹스 최신버전을 사용중이라 두군데 거의 최적화는 마쳤습니다.
1.사용자가 클릭시 원하는 모드로 이용가능(토글)
2.사용자가 한번도 클릭하지 않는다면 기본 자동모드 작동
2.1 자동모드 사용시 개인의 성향에 따라 기기마다 시간대 등으로 다크모드가 되도록 해 놓았다면 브라우저의 다크모드를 감지해서 사이트도 다크모드로 전환
2.2 자동으로 감지한 경우 별도 조치를 하지 않으면 라이트모드에서 -> 다크모드 전환시 깜빡이는 문제가 페이지 전환시 마다 발생 할 수 있는 부분 php에서 class를 미리 바꿔줘서 깜빡이는 불편함 아예 없게 구현
2.3 자동모드 이용중 모드를 바꿔야 할 경우 토글버튼 누르면 해당 모드로 전환되면서 자동모드 해제
2.3.1 자동모드가 해제가 되면 "야간 모드 자동 사용중" 문구가 "야간모드 자동 사용하기" 라는 버튼으로 바뀌어 다시 기기에 의존하도록 바로 바꿀수 있도록 버튼 제공 (라이믹스 rx_color_scheme 쿠키 삭제 버튼)
2.3.2 rx_color_scheme 쿠키가 삭제되면 자동모드가 됩니다.
3.body class에 따라서 구글 애드센스 분기하여 출력
3.1 다크모드 일 경우 어두운배경의 애드센스, 라이트모드 일때 밝은색 애드센스 출력
3.2 애드센스 중 배경과 글자색 등 디자인을 할 수 있는 광고단위 : 인피드,컨텐츠 삽입,일치하는 콘텐츠 광고단위
대부분 라이믹스2.0 에서 3가지 모드를 사용할 있도록 제공해 준 덕분에 가능한 것이고 RXP FELX 레이아웃에서 다크모드 사용시 불편함을 상당 해소해준 덕분에 해당 함수 이용 그리고 제 나름대로 다른 방식도 추가를 좀 했습니다.
프론트 단에서 바로 할 수 있거나 한 것들은 새로고침 없이 다 반영이 되지만 일부 저장된 값을 확인후 동작해야 하는 일부는 새로고침 후 반영되는 부분도 있습니다.
하나 시작하면 끝을 보는( 능력 안에서.. 가능한 것들..) 성격이라 요 몇일 다크모드 최적화에 열중했네요.
결론은 라이믹스2 에서 3가지 모드(다크,라이트,자동)를 운영할 수 있는 다크모드는 만족도가 높습니다. 밝은 색상이 좋은 사람은 뭐 그냥 밝은 색상 쓰면 되고 다크모드 원하는 사람은 다크모드를 선택권이 충분히 주어지면서 페이지 전환시 불편함이 없고 아주 좋습니다.
운영자가 직접 css만 커스텀 하고 나머지는 자연스럽게 다크모드를 지원하는 틀도 만드실 수 있을 것 같아요!