[CSS/JS] Tistory 개발 블로그 제작, 다크모드 토글 구현 - 2

[Dev 💻/Front-end] - [CSS/JS] Tistory 개발 블로그 제작, 사이드바 꾸미기 - 1

[Dev 💻/Front-end] - [CSS/JS] Tistory 개발 블로그 제작, 다크모드 토글 구현 - 2

[Dev 💻/Front-end] - [CSS/JS] Tistory 개발 블로그 제작, 편의 기능 구현 - 3

 

저번엔 사이드바를 커스텀해서 꾸미는 작업을 했다.

이번에는 전체적인 블로그의 색상을 입히고,

다크모드로 전환 할 수 있는 기능을 만들어 보도록 하겠다.

 

 

다크모드 토글 기능 구현

 

먼저 다크모드 토글 버튼을 어디에 넣으면 좋을 까 하다,

헤더 부분에 있는 버튼들 사이에 넣으면 좋을 것 같아,

html 구조를 파악해 보았다.

 

util 클래스 div 태그 안에 다크모드 토글 버튼을 구현해 주고

<button type="button" class="dark-mode-toggle">
  <i class="fas fa-moon"></i>
  <span class="screen_out">다크 모드 토글</span>
</button>

 

 

이번에도 jQuery를 이용하여 실제 다크모드가 동작되는 부분을 구현해 주도록 하자

 

전체 요소와 아이콘 등을 변수로 저장하고,

지난 게시글에서 등록한 깃허브 위젯도 다크모드에 맞게 바뀌어야 하기 때문에,

모드에 따라 파라미터 값을 다르게 줄 수 있게 변수로 저장하였다.

var $body = $('body');
var $darkModeToggle = $('.dark-mode-toggle');
var $githubCard = $('#github-stats-card');
var darkIcon = 'fa-moon';
var lightIcon = 'fa-sun';
var darkModeKey = 'darkMode';

var baseUrl = 'https://github-readme-stats.vercel.app/api?username=101Sean&show_icons=true&include_all_commits=true&theme=transparent&hide=issues,prs,contribs&hide_rank=true';
var lightParams = '&text_color=777777&title_color=777777&icon_color=214726';
var darkParams = '&text_color=999999&title_color=999999&icon_color=70a379';

 

 

그리고 깃허브 위젯의 색상 변경 함수와

function updateGithubCard(isDarkMode) {
    if ($githubCard.length) {
        var params = isDarkMode ? darkParams : lightParams;
        $githubCard.attr('src', baseUrl + params);
    }
}

 

 

실제 클릭시, 다크모드로 전환해주는 토글 기능을 구현해 주었다.

또, 현재 상태를 localStorage에 저장하여, 상태 값을 유지할 수 있게 해주었다.

$darkModeToggle.on('click', function() {
    if ($body.hasClass('dark-mode')) {
        $body.removeClass('dark-mode');
        localStorage.setItem(darkModeKey, 'disabled');
        $(this).find('i').removeClass(lightIcon).addClass(darkIcon);
        updateGithubCard(false);
    } else {
        $body.addClass('dark-mode');
        localStorage.setItem(darkModeKey, 'enabled');
        $(this).find('i').removeClass(darkIcon).addClass(lightIcon);
        updateGithubCard(true);
    }
});

var savedMode = localStorage.getItem(darkModeKey);

if (savedMode === 'enabled') {
    $body.addClass('dark-mode');
    $darkModeToggle.find('i').removeClass(darkIcon).addClass(lightIcon);
    updateGithubCard(true);
} else {
    $body.removeClass('dark-mode');
    $darkModeToggle.find('i').removeClass(lightIcon).addClass(darkIcon);
    updateGithubCard(false);
}

 

 

 

다크모드 스타일시트 구현

 

이제 기능 작업은 끝마쳤다.

다음으로는 블로그의 요소들을 하나하나 찾아서, 디자인을 적용해 주어야 한다.

 

전체적인 색깔 컨셉은 다음과 같다.

	배경색	테두리색	텍스트색	서브 텍스트색	강조색
라이트 모드	#fafafa	#eeeeee	#555555	#999999	#214726
다크 모드	#1e1e1e	#333333	#d4d4d4	#a1a1a1	#70a379

 

먼저 전체적인 페이지와 영역, 테두리의 색상 등

다크모드에서 사용될 색상을 지정 해 주고,

body.dark-mode {
  background-color: #1E1E1E; 
  color: #D4D4D4; 
}

body.dark-mode html,
body.dark-mode #wrap,
body.dark-mode #container,
...
body.dark-mode #aside {
  background-color: #1E1E1E;
}

body.dark-mode #header,
body.dark-mode #footer {
  border-color: #333333;
  background-color: #1E1E1E;
}

 

 

그 다음 링크 텍스트의 색상과, 게시글의 본문 텍스트 색상 적용

body.dark-mode a,
body.dark-mode a:link,
body.dark-mode a:visited {
  color: #D4D4D4;
}
body.dark-mode h1, body.dark-mode h2, ... {
  color: #d4d4d4 ;
}

body.dark-mode .entry-content p:not(pre *),
...
body.dark-mode .entry-content li:not(pre *) {
  color: #D4D4D4;
}

 

 

개발 블로그다 보니, 게시글의 코드 블럭에도 다크모드 적용이 필요하므로

역시 다크모드에 알맞게 적용을 하였다.

body.dark-mode pre,
body.dark-mode code {
  background-color: #333333; 
  border: 1px solid #444444;
  color: #D4D4D4;
}
body.dark-mode blockquote {
  border-left-color: #70A379; 
  background-color: #1E1E1E;
}

body.dark-mode input[type=text]:not(#search),
body.dark-mode textarea {
  background-color: #333333;
  border-color: #555555;
  color: #D4D4D4;
}

 

 

댓글 등록 버튼, 블로그 타이틀, 강조 텍스트 등

강조색이 들어가는 부분도 색상을 지정 해 주고,

body.dark-mode #header h1 a {
  color: #70A379;
}
body.dark-mode .post-header h1 em {
  color: #70A379;
}
body.dark-mode .tt_category .link_tit {
  color: #70A379;
}
body.dark-mode .tt-comment-cont .tt-btn_register {
  background-color: #70A379;
}

 

 

이미지 형태로 들어간, tistory 기본 아이콘들은

색 반전 으로 자연스럽게 구현해 주었다.

body.dark-mode #menubar_wrapper .btn_menu_toolbar .ico_tistory_sign {
  filter: invert(80%); 
}
body.dark-mode .pagination .prev,
body.dark-mode .pagination .next {
  filter: invert(80%); 
}

 

 

마지막으로 모드 전환 시 부드러운 효과 처리를 위해

트랜지션도 넣어 주었다.

body {
  transition: background-color 0.5s ease, color 0.5s ease;
}

 

 

이 외에도 직접 크롬 개발자 모드를 켜서

색상 변경이 필요한 부분은 직접 찾아서 전부 수정 시켜주었다.

 

이로써 작업은 모두 끝났다.

https://github.com/101Sean/tistory_custom_skin

GitHub - 101Sean/tistory_custom_skin: 티스토리 블로그 커스텀용 html

 

적용하고 나니, 다크 모드로 보는 웹 페이지도 제법 깔끔해서 좋았다.

 

토글 버튼을 클릭하면, 매끄럽게 다크모드로 변환되는 모습

 

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

 

이번 작업은 하나하나 요소를 찾은 뒤,

스타일시트(css)를 손 보는 작업이 많아서 시간이 오래 걸렸는데

완성하고 나니 이쁘게 적용되어서 뿌듯하다.

 

다음에는 게시글의 요소들의 세부적인 조정과,

감사하게도 어려운 글을 읽어주는 외국 친구들을 위한 헌정 기능으로,

페이지 번역 기능도 만들어서 추가 해 보도록 하겠다.

 

 

원본 게시글

https://blog.naver.com/101artspace/224085372149

Tistory 개발 블로그 제작하기, 다크모드 토글 구현 - 2