[이미지테스트 페이지 만들기] 8~9일 - 다크 모드 지원, 토글 버튼, 색상 정리

나를 알아보는 10가지 질문

이전 글 보기

[이미지테스트 페이지 만들기] 5~7일 - JS, 소셜 공유 버튼 달기

 

 

8일

 

다크 모드 지원을 할 수 있게 만들어봤습니다.

얼마 전 geekNews에서 한 줄로 다크 모드 지원을 할 수 있는 코드를 발견해서 적용해봤는데.. 아.. 배경 색이 별안간 잠바주스 색깔이 되더라고요.. ㅠㅠ

 

고도로 망한 다크모드는 잠바주스와 구분할 수 없다

 

그래서 아 이건 인생이 아니다.. 하고 날로 먹으려는 생각은 고이 접었습니다.

 

 

모바일 화면 ㅋㅋㅋㅋㅋㅋ

이건 마치.. '인생 날로 먹을라들지 마 이눔아!' 하는 잠바주스 사장님의 목소리가 들려오는 총체적 난국의 무언가다.. 진짜 대박..

 

 

main.js

copy() 함수:

더미 textarea 를 하나 만들어서 주소를 복사하고 바로 지울 수 있게 한 함수입니다. 클립보드에 링크 주소를 복사할 수 있도록 하는 함수입니다.

 

그리고 전에는 소셜 공유하는 함수가 index.html body 밑에 script로 따로 나와 있었는데 그냥 script 파일(share.js)로 따로 만들었습니다.

 

git push까지 해놓고 IE 9에서 룰루랄라 실험해보려는데.. 시작 버튼을 눌려도 안 돌아가네요?

그래서 디버깅을 해봤더니 js 파일의 const, let 등의 키워드를 IE 9가 처리하지 못하는 거였습니다.

그래서 바벨 웹을 사용해서 js 파일을 ES5 버전으로 바꾸고 조건부 주석도 달았습니다. 근데 아직도 안 되는 건 함정... IE 유저님들이여 우리는 다음 생에 만납시다.. IE면 다른 브라우저를 이용해보라는 모달이나 alert로 띄울까 생각 중입니다. 왜 안 되는지 짐작도 안 됩니다. 푸터가 안 뜨고 그냥 멈춰버리는 걸 보면 시작 버튼이나 그 주변에서 뭔가 이상한 게 있나 싶지만 짚이는 게 없습니다. 콘솔에도 경고 하나 안 뜨고.. 어떻게든 IE에서도 되게 하려고 했으나 안 됩니다 슬프지만..

 

 

iOS와 맥 OS 다크모드일 때 접속하면 자동으로 다크모드 버전으로 뜰 수 있도록 했습니다.

@media (prefers-color-scheme: dark)

사용자의 기기가 지금 다크모드인지 감지할 수 있는 미디어 쿼리문입니다. 여기다가 다크모드일 때 추가해줄 것들을 줄줄 쓰면 됩니다. 처음에는 이 쿼리문을 main.css 맨 하단에 적었습니다.

 

 

 

참회하고 다시 쓴 다크모드

저희 집 데스크톱이 윈도우7이라 다크 모드 실험을 할 수 없어서 맥북을 켜서 다크 모드로 하고 사파리와 크롬으로 한 번 돌려봤습니다.

 

모바일 welcome-qna 화면

 

모바일 calc-result 화면

 

 

 

그래도 뭔가 좀 변한 모습입니다 (하지만 충분히 다크하지 않음)

 

PC, 태블릿 다크 모드 화면

 

PC, 태블릿 qna 화면

 

PC calc 화면

 

PC, 태블릿 result 화면

 

코드 보기

 

 

9일

다크 모드를 만들려고 css 작업을 하던 중 쓰는 색상이 너무 많다는 생각이 들었습니다. (근데 얼마 안 되더라 ㅋㅋㅋ)

어쨌든 컬러 정리를 조금 했고 그 다음에는 main.css 밑에 있던 다크 모드 전용 스타일들을 darkmode.css 라는 파일을 만들어서 css 분리를 했습니다. 파일을 분리한 이유는 다크 모드일 때는 이 css를 로드하고 라이트 모드일 때는 제거하기 위해서입니다.

prefers-color-scheme: dark 가 아닌 사용자들의 기기에도 다크 모드 웹을 지원해야 하기 때문에 darkmode.css 에서 미디어 쿼리문을 뺐습니다.

 

그 다음엔 안드로이드나 일반 PC에서도 다크 모드처럼 웹을 보고 싶은 사람들을 위해 토글 버튼을 만들었습니다.

제가 생각한 문제 해결 순서는 이렇습니다. 조건부로 CSS 파일을 로드하는 것입니다.

 

1. 일단 body 태그 밑에 js 파일 로드 (다크모드인지 확인하는 파일)

1-1. 이 js 파일 위에는 전역 변수로 dark_css 하면서 link 엘리먼트를 create해서 rel="stylesheet" type="text/css"로 주고 href="darkmode.css"로 줬습니다.

2. 이 js 파일 안에 isDarkMode function이 있음 (이걸 로드하면서 바로 실행)

3. 여기서 일단 미디어 쿼리에서 prefers-color-scheme으로 잡히는 iOS, 맥 OS 다크 모드는 자동으로 다크 모드로 전환하게 함

4. flag를 만들어서 다크 모드일 때 true, 일반 모드일 때 false를 하게 함

5. light -> dark로 가려면 flag를 true로 돌리고 head 태그 밑에 link 로 darkmode.css를 추가

6. dark -> light로 가려면 flag를 false로 돌리고 head 밑의 darkmode.css 제거

7. 그리고 별도로 switchMode를 만들어서 헤더의 야간 모드 버튼을 누르면 라이트, 다크 모드 간 자유롭게 전환 가능.

 

 

뭐... 보다시피다 ^^

여기로 가면 다크 모드와 아닐 때를 구분하고, 전환할 수 있게 하는 js 소스코드가 있습니다.

html 요소의 button이나 div, span 태그 등을 이용해 토글 비슷한 걸 만들고 거기에 onclick=javascript:switchMode() 하면 잘 적용될 것입니다.

 

 

 

모바일 welcome-qna 화면

모바일 calc-result 화면

PC, 태블릿 welcome 화면

PC, 태블릿 qna 화면 

태블릿 calc 화면

PC, 태블릿 result 화면

 

코드 보기

 

 

다음 글 보기

[이미지테스트 페이지 만들기] 10~11일 - CSS 순서 정리, 코드 정리 & 하위 브라우저 포기