다크모드를 돌아 보면서.. > 자유게시판

자유게시판

다크모드를 돌아 보면서.. 정보

다크모드를 돌아 보면서..

본문

냑 다크모드 만들기 글을 보니 https://sir.kr/cm_free/1596907 https://sir.kr/cm_free/1597352

 

저도 갑자기 정리를 해 보고 싶어서 적어 봅니다.

 

아마 첫 시작은 마크다운 에디터에서 기본적으로 지원하는 악보등에도 다크모드를 적용해 보는 것이었던 것 같습니다. https://sir.kr/cm_free/1557900

(물론 님이 Nextjs에서 다크모드 적용글도 올라왔었죠.. https://sir.kr/cm_free/1557683 )

 

그러다가 공식적으로 다크모드 지원요청은  님의 글이죠.  https://sir.kr/cm_free/1574634

 

맥을 사용하고 있는데 자동으로 다크모드로 변경되서 이런 기능을 찾아 보았죠..

 

그래서 로케이션 베이스로 동작되는 night.js를 찾았죠 https://sir.kr/cm_free/1594529

 

웹사이트는 동작이 잘되는데, 깃헙 코드는 데모코드가 빠져 있어서..  냑에 다시 한번 요청을 했습니다.

 

리자님의 응답 https://sir.kr/cm_free/1594581 ,  다크모드와 정규식의 관계는 냑 다크모드 만들기 글 참조

 

그 즈음에   님이 darkmode.js 도 올려 주었던 것 같은데,  글이 어디에 있는지 모르겠네요. https://darkmodejs.learn.uno/

 

하여간 자동으로 바뀌는 것에 집중하고 있었기에 night.js를 조금씩 보기 시작하면서..

 

없는 데모를 만들어 보고, 틀린 night.js도 수정해서 시리즈로 다크모드 #2, 3, 4, 5 시리즈 글을 올렸고,

 

그 사이에 냑도 다크모드 버튼이 생김.

 

CSS색상에 대한 감이 전혀 없어서. @nanati 님의 도움을 받아 공부를 좀 하고.. https://sir.kr/cm_free/1595162#c_1595181

 

저도 그누보드 순정에 적용되는 다크모드를  공개 https://sir.kr/g5_plugin/9074

 

공개를 하면서 테스트하다 보니, 전환시에 번쩍이는 문제가 발생

 

그래서 더 검색을 해보니,  다크모드 지원방식에 몇가지 모드가 있네요. https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/

 

처음 접속시에 이전 상태를 저장하기 위해서 로컬스토리지나 쿠키를 통해서 가져오는 방식중 로컬스토리지 방식을 사용해서 해결

 

CSS 다크 컬러는 깃헙에 있던 것도 적용해 보고 싶기도 하고.. https://www.docker.apachezone.com/blog/175

 

OS레벨로도 적용해 보고 싶기도 하고..

 

다음에 시간이 되면 도전을...  아니면 그 전에 그누보드 순정에 다크모드가 포함되길 희망하면서

 

저도 정리해 봤습니다.

 

 

 

추천
4
  • 복사

댓글 5개

와, 그러셨었군요. 저눈 모르던 과정에 대해 얘기해주시니 좋네요! 저는 '다크모드'라기보다는 화면밝기'모드전환' 기능에 애정이 생겨서 관심있게 본답니다.^^
  오랜만에 오셨네요.  요즘 매뉴얼 때문에 nextjs를 보고 있는데,  올려주신 nextra  좋긴한데
안에 좀 고쳐볼려고 하니 너무 힘드네요.
다국어도 지원되고 좋은데.. 파일뒤에 .en .ko 모두 붙이는 것이 귀찮아서 디렉토리구조로 변경해 볼려고 하는 중인데.  잘 안되서 다른 솔루션을 찾아 보고 있습니다.
© SIRSOFT
현재 페이지 제일 처음으로