다크모드가 추가되었습니다.

드디어 Dark Mode 지원

위와 같이 드디어 다크모드가 지원되기 시작했습니다.

요새 업데이트가 없어서 실망하고 있었는데요. 제가 요청했던 기능이 추가되어 정말 기쁩니다. ㅎㅎ

인기있는 Gatsby 테마의 경우 대부분 다크모드를 지원하고 있었는데요.

flexiblog의 경우 구성요소가 엄청 다양해서 적용하는데 힘들었던 것 같더라구요 ^^;

그래도 모든 영역에서 매우 멋지게 변경되어 마음에 듭니다.

다크모드 전용 로고도 추가!

로고의 경우 보통 검정색으로 표시가 되는데요.

다크모드 적용시 로고가 사라지거나 알아보기 힘듭니다.

따라서 다크모드 전용 로고를 추가해야되더라구요.

이 내용은 코드에는 있는데, 설명에는 없어서 당황스러웠습니다. ^^;

실력은 있는데 친절하진 않은 느낌입니다 ㅋㅋ

/site/contet/assets/logo-dark.png

위와 같이 로고를 추가해주면 알아서 적용해줍니다.

LogoQuery 에러 처리하기

로고를 shadowing 방식으로 구현한 경우 빌드에서 에러가 나타납니다.

대략 위와 같은 에러가 나는데요.

저는 shadowing 한 쪽에 쿼리명을 수정해서 해결했습니다.

/site/src/@elegantstack/flow-ui-layout/Header.Logo.jsx 파일에서 대략 28번째 줄에 있는

위 내용에서 LogoQuery2로 바꾼 것 보이죠?

이렇게 쿼리명만 수정하면 에러가 없어집니다. ㅎㅎ

shadowing 부분 처리하기

제가 수정했던 파일들도 조금 변경이 있어서, 해당 부분도 찾아서 수정해줬습니다.

썸네일 가로 크기 1600px 이상 맞춰주기

썸네일 가로 크기가 1600px보다 작으면 빌드할 때 엄청난 경고표시가 뜹니다. ^^;

테마 제작자의 의도가 가로가 긴 썸네일로 어떤 환경에서도 썸네일이 잘 보이도록 하는 것인데요.

거기에 제일 부합하는 가로 크기가 1600px 이더라구요.

그래서 이번에 전부 늘려줬습니다. ㅎ

이제 빌드에서도 warn Query takes too long 경고만 뜨고 큰 에러는 없어서 다행입니다.

Component shadowing 해설은?

2달 전 글에서 Component shadowing에 대한 글을 적어본다고 했는데요.

한번 시간내서 적어보도록 하겠습니다.

그냥 그때 스샷에 있는대로 넣고 원하는대로 수정하면 끝이라 별로 할말이 없긴 없을텐데요.

그래도 한번 기억하는 용도로 써보려고 합니다.

거의 2달만에 업데이트하니 헷갈리더라구요 ㅠㅠ

마무리

그래도 드디어 다크모드가 적용되어 기쁩니다.

앞으로 이미지 클릭시 팝업이나 Medium처럼 확대되는 기능만 있으면 거의 끝판왕일 것 같습니다.

요청해놨는데 언제 될지는 모르겠네요 ㅎㅎ