다크모드를 돌아 보면서.. 정보
다크모드를 돌아 보면서..본문
냑 다크모드 만들기 글을 보니 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개
안에 좀 고쳐볼려고 하니 너무 힘드네요.