[Blog] 지킬 테마 skin 수정(색상 적용)

지킬 테마(배경색)를 수정하기 위해 skin을 변경해보자! + 폰트 색상도 추가로 변경해보자!

skin이 dirt 일 때

skin이 myskin 일 때

지킬 테마 수정

다음과 같은 순서로 진행하자!

myskin 제작 -> myskin 적용 -> 폰트 색상 커스텀

myskin 제작

_sass/minimal-mistakes/skins/_myskin.scss 가 없다면 만들면 되고 있으면 바로 수정하자

• 파란색 계열로 수정

/* ==========================================================================
   Myskin skin
   ========================================================================== */

/* Colors */
$background-color: #ffffff !default;
$text-color: #202020 !default;
$primary-color: rgb(59, 100, 150) !default;
$primary-color1: rgb(59, 59, 150) !default;
$primary-color2: rgb(59, 150, 59) !default; // 기존
$border-color: mix(#202020, $background-color, 20%) !default;
$code-background-color: #b8b8b8 !default;
$code-background-color-dark: #a7a7a7 !default;
$form-background-color: mix(rgb(255, 255, 255), $background-color, 15%) !default;
$footer-background-color: mix(rgb(155, 155, 155), $background-color, 20%) !default;
$link-color: mix(rgb(0, 142, 181), $text-color, 40%) !default;
$link-color2: mix(rgb(0, 181, 142), $text-color, 40%) !default; // 기존
$link-color-hover: mix(rgb(44,44,44), $link-color, 25%) !default;
$link-color-visited: mix(rgb(0, 142, 181), $text-color, 40%) !default;
$link-color-visited2: mix(rgb(0, 181, 142), $text-color, 40%) !default; // 기존
$masthead-link-color: $text-color !default;
$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
$navicon-link-color-hover: mix(#000, $background-color, 30%) !default;

.author__urls.social-icons .svg-inline--fa,
.page__footer-follow .social-icons .svg-inline--fa {
  color: inherit;
}

.ais-search-box .ais-search-box--input {
  background-color: $form-background-color;
}

myskin 적용

_config.yml 수정을 통해 “myskin” 로 수정

minimal_mistakes_skin    : "myskin" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"

폰트 색상 커스텀

테마 수정 때문에 폰트 색상이 원하지 않은 색상으로 변한 것들도 많아서 커스텀 진행!

사이드바 설정

• _navigation.scss

.nav__list .nav__items {
  a {
    color: mix(#fff,$primary-color,30%);
    }
}
      
.nav__sub-title {
  color: mix(#fff,$primary-color,20%);
}

게시물 제목, 페이지 제목

• archive.scss

.archive__subtitle {
  color: mix(rgb(84, 100, 173),$primary-color, 40%);
}

//추가
.archive__subtitle__default{
  color: mix(rgb(84, 100, 173),$primary-color, 40%);
}

게시물 본문 제목란

• _page.scss
• 만약 적용이 안 되면 a태그에 컬러 설정 있는지 확인

.page__title {
  color: mix(#fff, $primary-color, 40%);
}