타운광장토픽게시판

라이믹스 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가지 모드(다크,라이트,자동)를 운영할 수 있는 다크모드는 만족도가 높습니다. 밝은 색상이 좋은 사람은 뭐 그냥 밝은 색상 쓰면 되고 다크모드 원하는 사람은 다크모드를 선택권이 충분히 주어지면서 페이지 전환시 불편함이 없고 아주 좋습니다.

 

 

글쓴이 웹지기

profile
XE와 라이믹스를 운영하며 알게된 노하우를 공유합니다.
https://rxtip.kr/ 라이믹스 꿀팁
  • profile
    쩌...쩐다..!
    운영자가 직접 css만 커스텀 하고 나머지는 자연스럽게 다크모드를 지원하는 틀도 만드실 수 있을 것 같아요!
  • profile profile
    앞으로는 레이아웃들이 기본적으로 다크모드 지원할 거고 나머지 서드파티 들도 CSS에서 body에 .color_scheme_dark 가 추가 되었을때의 속성도 모두 기본적으로 탑재할 것으로 예상합니다.

    지금 과도기적으로 안되어 있는 레이아웃 외 자료들을 좀 건드려야 하는게 귀찮지만 조금만 지나면 운영자가 할게 없을 것으로 예상하고 있어요.
  • profile

    웹지기님은 운영자에서 개발자로 혼자 독학하셨나요? 저도 내가 생각을 사이트에 적용하고, 수정도하고 싶어요. 코딩을 배우고 싶은데요. 뭐부터 시작하면 될까요? 알려주시면 감사^^

  • profile profile

    이미 관련된 이야기는 많이 해드렸는데요. 전 개발자가 아직 되지 못하고 일반 운영자입니다. 따로 코딩을 누구에게 배우지 않았습니다.(배우지 않았다는 건 성립이 안되겠군요. 필요한게 있다면 php,js 에 관해서 검색해서 답을 찾고 라이믹스 관련은 여기 개발자분들께 답변을 받고 하면서 배웠다고 해야겠네요.)


    저의 운영에 관한 이야기나 노하우 경험등은 https://rxtip.kr/ 에 서 다루고 있고 앞으로도 그럴 예정이니 운영자로서 조금 더 자유롭게 무언가 하고 싶은 것이 있다면 제 개인 블로그를 참조하시는 것도 나름 도움이 되실 수 있을 겁니다.

  • profile profile
    코딩하는 것은 처음부터 페러다임 부터 먼저 익혀야합니다.

    무슨 언어를 어떻게 공부하냐 뭐 어떻게 공부하냐 이런식으로 물어보시는 분들도 많으신데요..

    보통 한가지 언어를 선택하신다음 죽어라 코딩 하거나 죽어라 책 보면서 기초부터 쌓아 페러다임부터 익혀야합니다.

    제가 예전에 올린 게시글중 그냥 강의 비슷한 게시글이 있는데 그 게시글에 기본적인 PHP언어 사용방법 안내하고 있습니다.

    그거 보시고 PHP의 대한 언어부터 하나하나 차근차근 익히는걸 먼저 하시고, 가능하면 본인이 코딩에도 조금씩 바꿔보면서 어떻게 변화되는지 무슨값이 오는지 등등의 내용들을 익혀가는게 좋습니다.