blog/toggle-dark-mode/

[utterances-bot]

minimal-mistakes 테마 다크 모드 토글 적용 - Github Pages 운영 - minha

Github Pages의 minimal-mistakes 테마에 다크 모드 적용기

https://etch-cure.github.io/blog/toggle-dark-mode/

[ryuminha]

댓글 테스트
이거 issue_term을 pathname으로 해둬서
이슈 제목으로 댓글을 추적하네 나중에 url 바뀌면 이슈 제목도 같이 바꿔주면 되겠다.

[habijung]

안녕하세요?
minimal-mistakes 다크 모드 토글 구현 방법 참고하다가 댓글 남겨요.

1. footer_scripts 문제

공식 문서에서는 footer_scripts를 사용하면 기존의 main.min.js를 덮어쓰게 된다고 나와있습니다.
그래서 얘를 사용하면 모바일 브라우저(narrow display)에서 상단 navigation bar의 토글 버튼이 제대로 적용되지 않는 등의 문제가 있습니다.
after_footer_scripts로 바꾸기를 추천드려요!

2. 다크 모드 .css 파일 없이 토글 구현

여기를 참고했습니다. (CodePen)
요약하면, toggle input이 true / false 일 때 .scss 파일에서 root를 불러오느냐 다른 data를 불러오느냐에 대한 js 구현입니다. 참고 사이트 같은 경우에는 root와 data-theme="dark" 로 나누었습니다.
이걸 적용하려면 masthead.html에서 input 태그를 toggleSwitch 변수에 저장하셔야 합니다.

작성자 님 덕분에 초반에 토글 만드는 부분을 헤매지 않을 수 있었네요.
많은 도움이 되었습니다.

[ryuminha]

@habijung

코멘트 감사합니다.
블로그 첫 코멘트네요 도움이 되었다니 정말 기쁘네요

말씀해주신 내용 참고해서 저도 블로그 수정한 후 포스팅도 수정할께요.
감사합니다!!

[ryuminha]

@habijung

안녕하세요?
코멘트 해주신 내용 참고해서 포스팅과 블로그수정했습니다.
추가로 토글 버튼의 css 수정했으니 한번 봐주시면 좋을 것 같아요.

이전에 코드가 너무 지저분했더라구요ㅠㅠ

[habijung]

@etch-cure

안녕하세요?
바뀐 토글 버튼이 훨씬 보기 좋네요.
저는 아직 테마 색상 결정을 못해서 구현만 해놓고 CSS 적용을 못했네요. 저도 토글 버튼 괜찮은 걸로 찾아봐야 겠어요.
덕분에 많은 도움 되었습니다.
감사합니다~

[yuseon-lim]

안녕하세요! 포스팅 잘 봤습니다 :)
근데 혹시 dark-theme.js 와 main_dark.scss는 jekyll build 시 사라지는게 정상일까요..?

[ryuminha]

@devyuseon
포스팅 읽어주셔서 감사합니다!!
저는 해당 파일이 사라지지 않습니다.
혹시 해당 파일의 위치는 assets/css/main_dark.scss와 assets/js/cutom/dark-theme.js로 맞춰 주셨나요?

추가로 실례가 안된다면 제가 pull request로 만들어 드려도 될까요?
수정하는 파일이 많아서 포스팅을 보기 힘든것 같습니다.
하나의 커밋을 링크 걸어서 다른 분들이 포스팅 보시기 편하게 하고 싶어서 요청드립니다.
저를 collaborator로 설정해주시면 pull request 올릴께요.
https://hengbokhan.tistory.com/140

[yuseon-lim]

@etch-cure
앗 pr 보내주시면 정말 감사하긴 한데 collaborator 지정 말구 fork 해서도 가능 한걸로 알고 있어요..!
파일 위치는 맞게 했는데 왜때문인지는 모르겠네요 😭 조금 더 살펴봐야 할 것 같습니다 :),..

[ryuminha]

@devyuseon

우선 pull request 올렸어요.
확인해 주시고 괜찮으면 머지 해주시면 될것 같아요.
머지 해주시면 해당 커밋을 여기 포스팅에 링크를 해둘께요.
감사합니다!!

[yuseon-lim]

@etch-cure
헉 직접 해주시기 쉽지 않은데 정말 감사해요😊 잘 머지 되었고, 토글 버튼 잘 적용 되었습니다. 해당 머지 커밋은 0911b1f 입니다!
무한 감사합니다!! 🤩