타운광장토픽게시판

라이트모드/다크모드 여부를 최대한 빨리 감지하여 페이지 로딩 직후 깜빡임을 줄이고, 모드가 변경되더라도 즉시 재감지하도록 개선

 

요거 와우! 네요.

 

다크모드 자동감지로 사용할 경우 한정해서 매번 기기가 다크모드인지 확인해서 다크모드인 경우 자동으로 바디 클래스를 다크모드에 맞게 변경해주는 부분이 기존에는 깜빡임이 있어서 불편했고 그래서 저의 경우는 상태를 쿠키로 한번 구운다음 해당 쿠키를 사용해서 php단에서 바디 클래스를 미리 변경해주는 방법을 사용했는데요.

 

패치내용을 읽고 혹시나 해서 제가 별도 구현해 놓은거 지워봤는데 깜빡이지 않고 라이트모드에서 다크모드로 전환되는 깜빡임 없이 다크모드가 잘 유지가 되네요.

 

제가 구현해 놓은 꼼수보다 훨씬 더 좋은 방법으로 코어에서 대비해 준거 같습니다.

 

기존에 있던 버그도 수정되었고 이제 라이믹스 2.0의 다크모드는 완전함 그자체 인듯 하네요.

글쓴이 웹지기

profile
XE와 라이믹스를 운영하며 알게된 노하우를 공유합니다.
https://rxtip.kr/ 라이믹스 꿀팁
  • profile

    관련 패치는 비누님이 제공해 주셨습니다.

    아직 딱 한 가지 미흡한 부분이 있는데요, CK에디터가 있는 화면에서 글을 작성하다 말고 기기 상태를 다크모드(라이트모드)로 바꿀 경우 에디터가 제대로 따라가지 않고 도구상자와 본문 영역이 따로 노는 어정쩡한 상태가 됩니다. 이건 다음 버전에서 보완해 보려고요.

  • profile profile
    그정도는 뭐 그냥 두셔도 ㅋㅋ
    지금 정도의 작동도 완벽한 수준이네요...

    js에서 감지하고 다크모드 바꿀때 타이밍이 안맞아서 라이트모드가 잠깐 거치게 될때는 그것 때문에 다크모드 포기할 뻔 했거든요. 그러다가 쿠키로 구워서 땜빵할 수 있어서 사용을 했죠.

    물론 사용자가 직접 다크모드를 선택했을때는 아무 문제가 없었죠.
  • profile

    제가 운영중인 사이트는 snax님의 slow1 버전이라서
    is_dark_theme 쿠키를 통해서 수동으로 다크모드가 실행되는데요

    혹시 코어에서 인식하는 유저의 다크모드 설정을 불러와서 is_dark_theme 쿠키의 값을 변화시킬수 있는 방법이 있을까요? ㅠㅠ

     

    변화시키는 코드는 제가 쨜수 있는데

    코어에서 인식한 현재 사용자의 라이트/다크모드 값을 어떻게 스킨단의 조건문에서 불러올수있는지 궁금합니다.

    머릿속으로는 가능할거로 보여서 열심히 스킨을 수정해 보아도 작동을 안하네요 흐음...

  • profile profile
    이제 RXP_Flex 레이아웃을 참조하지 않고도 가능할 것 같긴한데 그냥 참조하는게 쉬우니 그대로 적용해 보세요.

    저희는 그렇게 구현해서 따로 유저가 수동으로 선택하지 않으면 기기의 모드를 자동으로 따라가는 자동모드가 지원됩니다.

    유저가 수동으로 선택하면 그때 부터는 수동으로 작동하고 다시 자동으로 돌아갈 수 있게 쿠키삭제 버튼을 제공하고 있어요.

    https://rxtip.kr/rx_tip/6877


    여기서 참조했던 함수안에 코드가 일부 코어에서 새로 생긴 코드로 변경도 가능합니다.
  • profile profile
    테마에서 사용하는 쿠키 이름과 값을 코어에서 사용하는 것과 일치시키는 편이 나을 것 같네요.
    https://github.com/rhymix/rhymix/pull/1482
  • profile profile
    기진곰님 감사합니다!
    혹시 제가 이해한게 맞다면

    <[email protected](쿠키 체크 함수(rx_color_scheme)==light)-->
    기기가 라이트모드일때 실행할 코드
    <[email protected]>
    다크모드일때 실행할 코드
    <[email protected]>

    요렇게 스킨단에서 적용 가능한걸까요?
  • profile profile

    쿠키만 체크해서 뭔가 하려고 하면 한박자 느린 단점이 있습니다. (기기 다크모드 검사 후 쿠키생성 방법)

    그리고 쿠키 때문에 이미 전환되어야 했는데 전화되지 못하고 페이지가 새로고침될때 쿠키가 사라지고 전환되는 문제가 있죠.

     

    이번에 코어에서 위와 같은 불편함 없이 즉시 전환이 깜빡임도 없이 잘 되게 보완이 되었네요.

     

    사용자가 다크모드를 직접 선택하지 않으면 쿠키가 만들어지지 않을거에요. 자동으로 기기상태를 감지해야 할 걸요... 이건 제가 잘못 알고 있을지도 모르지만요...

  • profile profile
    자동모드인 경우 쿠키가 아예 없습니다.
    쿠키는 그냥 무시하고 body 클래스를 활용하여 CSS단에서 처리하는 것이 가장 깔끔하지만,
    예전에 나온 레이아웃이라면 어쩔 수 없을지도 모르겠습니다.
  • profile profile
    아 제가 이해하기에는 코어의 저 쿠키에

    사용자 브라우저가 현재 다크모드이면 dark
    라이트모드이면 light 가 들어가있는걸로 이해했는데 아닌가보군요 ㅠㅠ
  • profile profile
    body css부분을 체크하는걸 확인해보겠습니다 ㅎㅎ 감사합니다!
  • profile profile

    네. 맞아요. 기기모드를 자동 감지해서 즉시 모드전환(브라우저 켜 놓고 아무것도 안해도 시간되서 기기가 자동으로 바뀌어도) 되려면 body 클래스를  기기기 상태 감지하는 즉시 교체하는 js 가 사용되야 하죠.

    제가 링크해드린 팁이 그것을 코어에서 받쳐주지 않을 시기에 이미 구현한 방법인데 이번 코어패치로 일부 필요없는 부분도 생겼겠지만 그대로 따라서 구현하셔도 크게 문제가 되지 않을 겁니다.

    자동모드에 대응하려면 쿠키는 최선이 아닌 차선이 됩니다.
    제가 오늘 코어 패치 전까지는 기기모드를 감지한 후 기기의 모드를 쿠키로 구워서 쿠키값으로 js 감지 하지 않고도 확인할 수 있도록 꼼수를 사용했는데 깜빡임이 없어지는 대신 자동전환 될때 한타임 늦어지는 것을 감수한거죠.

  • profile profile
    감사합니다 웹지기님!!!
  • profile
    답변 감사드립니다 ㅠㅠ 고민을 또 해봐야겠네요