메뉴 닫기

[블로그] 신규기능 추가 DarkMode

블로그 상단에 다크모드 버튼이 추가되었다.

요새 컴퓨터를 많이 하다보니 눈이 쉽게 피곤해져서 고민하던중 깃허브에 다크모드에서 영감을 받아 블로그에도 적용시켰다.

기존 워드프레스 Blackout 플러그인을 사용하여서 간단히 기능을 추가할 수 있었다. 딱 내가 원하는 수준의 기능이었다. 처음에는 테마 자체를 어두운 계열로 변경하려다가 웬지 이런 기능을 제공하는 플러그인이 있을 것 같았는데, 예상 적중~!

원래는 플러그인을 설치하면 기본적으로 다크모드를 사용할 수 있는 버튼이 페이지에 생성되는데 추가설정에서 버튼을 클릭할시 작동하도록 변경할 수 있다.

맨 마지막 want to use your own toggle widget or butten을 클릭

이 토글 버튼을 사용하려면 class이름에 darkmode-enable라고 지정해주어야 한다.
간단하게 메뉴에 추가하기위해서 사용자 정의 링크를 추가해주었다.

꾸미기 화면에서 메뉴를 수정

하나의 트릭같은건데 레이블이 들어가는 위치에 대신 태그를 집어넣어서 class이름을 지정해주었고, onclick에 함수를 이용해서 클릭하면 자동으로 태그안의 글자가 바뀌게 만들었다.

darkmode 플러그인에서 isActivated 메소드를 제공한다. 다크모드가 활성화 되어있으면 true를 반환하고 아니면 false를 반환한다.
이를 3항연산자를 사용해서 다크모드이면 글자를 WHITE로 바꿔주고, 다크모드가 활성되어있지 않으면 DARK라고 설정해주었다.
기본 옵션은 다크모드가 꺼져있기 때문에, 처음 텍스트는 DARK모드를 실행시킬 수 있도록 DARK라고 적어주었다.

<a class="darkmode-enable" onclick="darkmode.isActivated() ? document.querySelector('.darkmode-enable').text = 'DARK' : document.querySelector('.darkmode-enable').text= 'WHITE'">DARK</a>

이 부분은 나도 조금 헷갈리는데 dark모드를 켜려면 dark를 누르면 된다는 개념으로 버튼을 만들었다. 사용성 측면에서 어떤게 직관적인지 생각하다보니까 나마저 헷갈린다.

다크모드를 활성화 시키면 아래와 같이 검정색으로 표시된다. 완벽하게 반전이 되는건 아니지만 그나마 눈이 덜아프다.

Related Posts

답글 남기기

이메일 주소는 공개되지 않습니다.

%d 블로거가 이것을 좋아합니다: