blog/toggle-dark-mode/

[utterances-bot]

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

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

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

[etch-cure]

댓글 테스트 이거 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 변수에 저장하셔야 합니다.

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

[etch-cure]

@habijung

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

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

[etch-cure]

@habijung

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

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

[habijung]

@etch-cure

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

[yuseon-lim]

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

[etch-cure]

@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 해서도 가능 한걸로 알고 있어요..! 파일 위치는 맞게 했는데 왜때문인지는 모르겠네요 😭 조금 더 살펴봐야 할 것 같습니다 :),..

[etch-cure]

@devyuseon

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

[yuseon-lim]

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

[akreorl]

저도 다크테마 토글 만드려고 하고 있는데 혹시 utterance 댓글서비스 테마도 버튼에 따라 바뀌게 할수 있나요? akreorl.github.io/_includes/comments-providers/utterances.html 에서 댓글 테마를 바꿀수가 있는데 utterances_dark.html을 생성해서 하면 될까요? 이 블로그도 다크테마로 이용하면 댓글 테마와 안 어울리는 느낌이라 말씀드려봅니다

[akreorl]

utterances 다크 테마로 utterances_dark.html을 생성하고 dark-theme.js를 수정해서 적용되게 하면 될까요?

[etch-cure]

@akreorl 안녕하세요 말씀해주신 부분 확인해보았습니다. 제가 생각한 결론 부터 말씀 드리면 utterances_dark.html를 생성해서 적용하기 어려울것 같습니다.

하지만 가능할것같습니다. utterances.html로 생성되는 iframe을 제거하고 다시 utterances.html의 코드중 theme를 변경하여 실행시키는 방법으로 하면 가능할 것 같습니다. (iframe 내부에 접근은 cross-origin문제로 불가능하여 제거 후 다시 만들어야 될것 같습니다. -> 이로 인해서 댓글 창이 깜박이는 문제가 예상됩니다.)

제가 만들어보고 완료되면 코멘트 달도록 할께요

[akreorl]

@etch-cure 넵 감사합니당

[etch-cure]

@akreorl https://github.com/etch-cure/etch-cure.github.io/commit/195b13ab780472dab0461f87d08d473c67306bd4 커밋 확인하시고 만드시면 될것같아요 이상한거나 더 좋은 방법있으면 말씀해주세요 감사합니다!!

[akreorl]

덕분에 적용은 잘 완료했는데요 토글 버튼이 post들에서만 사용이 가능하고 pages(기본 페이지,about,카테고리)에서는 안먹힙니다 이 블로그도 그런데 이건 무슨 문제인가요

[akreorl]

dark-theme.js에서 댓글 관한 코드만 지우면 잘 되고 pages가 문제가 아니라 댓글이 있는 pages는 적용이 잘 되는 것을 보면 댓글 코드쪽에 문제가 있는데 어떻게 해결해야할지 모르겟네요

[etch-cure]

@akreorl 제가 코드를 잘못 만들었네요 dark-theme.js를 다시올렸으니 확인해보시면될것 같아요 https://github.com/etch-cure/etch-cure.github.io/commit/195b13ab780472dab0461f87d08d473c67306bd4

감사합니다!!

[seominseok48349278]

덕분에 저도 다크모드 테마랑 토글 추가했습니다. 감사합니다 😇

[hyunjunhwang1994]

customOverride.scss에서

@import "./summary.scss"; < - 요구문은 몬가요? 이파일이 없어서 실행시 에러 나는거같아요!

[etch-cure]

@hyunjunhwang1994

아래 파일입니다. https://github.com/etch-cure/etch-cure.github.io/blob/gh-pages/_sass/custom/summary.scss

제 블로그 repository 같이 참고하시면 좋을것같아요!! https://github.com/etch-cure/etch-cure.github.io

포스팅 읽어주셔서 감사합니다!

[hyunjunhwang1994]

감사합니다~~ 복받으세용

[GreenteaPIE]

백엔드 배우는중인데 프로젝트 블로그에 올릴려구 막 꾸며보기 시작했는데 따라하기가 너무 어렵네요ㅠㅠ

[GreenteaPIE]

잘따라한것같은데 블로그에 적용이 안되네용.. 적용되는 테마가 다다른가요?

[etch-cure]

@GreenteaPIE https://greenteapie.github.io/ 로 접속해보니 적용하신 테마가 다른것같아요. 현재 블로그 만들때 https://devinlife.com/howto/ 참고해서 만들었습니다. 이분이 하신거 참고하셔도 될것 같아요.

[devbattery]

예전에 이 글 보고 잘 만들었습니다! 너무 감사드려요 그런데 계속 신경 쓰이던 게 있습니다

https://coded1ary.com/ 여기 들어와 보시면 default 값이 화이트모드인데도 불구하고 페이지를 이동할 때마다 계속 다크모드 상태가 잠시 깜~빡 하면서 다시 화이트 모드로 돌아오는 버그가 있더라구요

그런데 다크 모드 상태에서는 화이트 모드 상태가 보이질 않아요

그냥 화이트 모드에서만 페이지를 이동할 때마다 다크 모드가 보이는 거 같은데 혹시 이 원인은 뭐라고 생각하시나요??

[leejongseok1]

포스팅 잘 읽었습니다 감사합니다!! 작성해주신 코드 따라해봤는데 오류 한 번 확인해주실 수 있나요?? https://github.com/leejongseok1/leejongseok1.github.io/actions/runs/7958266527/job/21722735695