Chirpy 테마 커스터마이징

Posted Oct 21, 2023 Updated Oct 22, 2023

By Ham Younjin 5 min read

배경에 이미지 넣기

_sass/addon/commons.scss 에서 사이드바 배경에 대한 설정을 할 수 있습니다.

  
#sidebar {
  /* 원본 내용
  background: var(--sidebar-bg);
  */

  /*
  아래 3줄 추가
  이미지는 assets/img/ 디렉토리에 넣어 주세요. 
  */
  background: url('/assets/img/green.jpg');
  background-size: 100% 100%;
  background-position: center;

url(‘/assets/img/원하는 이미지 파일’) 로 수정하면 됩니다.

텍스트 색상 변경

Web 개발자도구에서 변경하고싶은 텍스트를 선택하면 아래 Styles 탭에 어느 파일에서 수정해야되는지 알 수 있다.
sidebar의 title을 선택하면 commons.scss:756 이라고 나타난 것을 볼 수 있다.

  
  .site-title {
    margin-left: -3.5rem;
    font-family: inherit;
    font-weight: 900;
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: 0.25px;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;

    a {
      @extend %clickable-transition;
      @extend %sidebar-link-hover;

      color: var(--site-title-color); // 이 부분에서 색상을 결정함
    }

코드를 보면 color: var(--site-title-color); 부분에서 --site-title-color 값을 가져오는 것을 알 수 있다. 어디서 가져오는 값인지 찾아본 결과 아래 두 파일에서 수정가능 한 것을 확인했다.

파일	모드
_sass/colors/typography-dark.scss	dark 모드일 때 컬러
_sass/colors/typography-light.scss	light 모드일 때 컬러

나는 light 모드 일 때 title 텍스트의 컬러를 수정해 주고 싶기 때문에 typography-light.scss 파일만 수정해주었다.

  
  /* Sidebar */
  --site-title-color: #f6f8fa;; // 여기서 수정 가능
  --site-subtitle-color: #545454;
  --sidebar-bg: #f6f8fa;
  --sidebar-border-color: #efefef;
  --sidebar-muted-color: #545454;
  --sidebar-active-color: #1d1d1d;
  --sidebar-hover-bg: rgb(223, 233, 241, 0.64);
  --sidebar-btn-bg: white;
  --sidebar-btn-color: #8e8e8e;
  --avatar-border-color: white;

2. Font

원하는 폰트 다운받기

Google Fonts 사이트 에서 원하는 폰트를 골라준다. 나는 Gowun Dodum 폰트를 선택했다.

Select this style 버튼을 눌러 원하는 스타일을 추가해준다. 웹 페이지 오른쪽 상단의 View selected families 버튼을 누르면 아래와 같은 창이 뜨는데, @import를 선택한 후 style 태그 안에 있는 부분을 복사해준다.

commons.scss 파일 수정

📁 파일 위치 : /_sass/addon/commons.scss

commons.scss 파일의 제일 상단에 복사한 @import url('') 코드를 넣어준다.

  
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');

그리고 body 태그에서 font-family 요소를 찾아 CSS rule 에서 확인했던 font-family: 'Gowun Dodum', sans-serif; 로 변경해준다. (나의 경우 commons.scss 파일의 32번 째 줄에 있었음)

  
body {
  background: var(--main-bg);
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  font-family: 'Gowun Dodum', sans-serif; // 이 부분을 수정해주어야 함
}