수식이 나오지 않는다면 새로고침(F5)을 해주세요
모바일은 수식이 나오지 않습니다.
지금 블로그 색상도 마음에 들긴 하는데, 뭔가 보면 볼수록 테크블로그 같지는 않달까..? 좀 모바일 중소기업 사이트 느낌이 들더라구요 하하.. 그래서 색상을 좀 변경할 겸 포스팅을 하려고 합니다!
우선 원래 제 블로그 입니다.(2023-06-28 기준.. 보고있는 지금은 또 어떻게 바뀌었으려나)
|
👉 색상 선택
우선 바꿀 색상을 선택해줘야겠죠? 저는 해당 사이트를 애용하는 편입니다.
해당 사이트에서 원하는 색상을 선택해주세요!
저의 경우 분홍색의 테마 색상을 좀더 붉은 빨강으로 바꿔줄거에요. 원래는 보는 분들 눈이 아플까봐 연한색으로 한건데, 어처피 보러 오시지 않는 흑흑 ㅜㅜ
아래와 같이 원하는 색상을 찍은뒤 아래 #xxxxxx처럼 여섯자리 코드를 복사해주세요!
📑 _config.yml 확인
우선 📑_config.yml을 확인하여 본인의 skin을 확인해줍니다.
저의 경우 15번 째 줄 코드이네요. 저는 아래와 같이 minimal_mistakes_skin : 'dark'를 사용해주고 있습니다.
minimal_mistakes_skin : "dark" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"원래는 default라고 되있으실거에요. 해당 default를 air, aqua, contrast, dark, dirt, neon, mint, plum, sunrise중 원하는 걸로 바꿔주실 수 있습니다.
- 각 skin에 대한 기본 색상
| air | aqua | contrast |
|---|---|---|
| dark | dirt | neon |
| mint | plum | sunrise |
아니 솔직히 색상 다 너무.. 별로야..
📑 _본인.scss 변경
본인의 minimal skin을 확인하였으면 해당 scss 파일을 변경해줘야 합니다. 저의 경우 dark를 사용하고 있기 때문에 _dark.scss파일을 찾을거에요!
해당 파일은 📑 _sass/minimal-mistakes/skins경로에 있습니다. 파일을 열어보면
/* Colors */
$background-color: #FCFCFC !default;
$text-color: #000000 !default;
$primary-color: #FB6372 !default;
$border-color: mix(#fff, $primary-color, 50%) !default;
$code-background-color: #F8E0E6 !default;
$code-background-color-dark: #3F4447 !default;
$form-background-color: mix(#000, $background-color, 15%) !default;
$footer-background-color: mix(#fff, $primary-color, 85%) !default;
$link-color: mix(#769DD5, $text-color, 70%) !default;
$link-color-hover: mix(#fff, $link-color, 75%) !default;
$link-color-visited: mix(#769DD5, $text-color, 70%) !default;
$masthead-link-color: $text-color !default;
$masthead-link-color-hover: mix(#000, $text-color, 80%) !default;
$navicon-link-color-hover: mix(#000, $background-color, 70%) !default;이와 같이 되있을 거에요! 하나하나 설명해드리면
- background-color : 배경색
- text-color : 글씨색
- primary-color : 테마색?으로 보면됩니다. 저의 블로그로 치면 지금의 빨간색들 입니다
- border-color : 밑줄 색
- code-background-color :
지금 이 블록과 같은 작은 코드 배경색입니다. - code-background-color-dark : 이건 잘모르겠어요.. 아시는분 댓글 달아주세요!
- form-background-color : 입력란, 버튼 등의 form요소 배경색
- footer-background-color : 페이지의 맨 아래 footer 부분의 배경색
- link-color : 링크 색
- link-color-hover : 링크에 커서를 올려놓았을 때 바뀔 색
- link-color-visited : 한번 클릭 했었던 링크 색
- masthead-link-color : 페이지의 맨 위 masthead 부분 링크색 저의 경우 'Home', 'Category' 부분입니다
- masthead-link-color-hover : 똑같이 커서 올려놓았을 때 바뀔 색
- navicon-link-color-hover : 잘은 모르겠는데 아마도 '카테고리!'인 토글메뉴에 커서 올려놓았을 때 색인가..? 싶네요
저는 primary를 변경해줄 것입니다! 다른 요소의 색상을 변경하고 싶으시다면 다른 코드에 똑같이 해주시면 됩니다!
방법은 쉬워요 그냥 아까 복사해둔 색상코드로 변경해주면 끝!
$primary-color: #EC0000 !default;원래 #FB6372 였던 값은 #EC0000으로 변경해주었습니다. 그다음 커밋해주시고 기다려주시면 됩니다!
색상 변경의 경우 블로그에 적용되기가 좀 오래 걸리더라구요.. Actions 한번 보시고 잘되었다는 표시가 나오면 잘된거에요. 기다리시면 됩니다.
변경해보시고 마음에 들지 않으시면 다른걸로 변경해주시고.. 하시면 됩니다. 저는 마음에 들지 않아 다른 부분 값도 건드려봤어요.
|
음... 비슷한건가.. 뭐 그래도 저는 만족합니다!
이상 minimal mistakes 색상 변경이었습니다! ☠️
'🔐 Git > Bolg(폐쇄)' 카테고리의 다른 글
| [Minimal mistakes, Github 블로그] tag 넣기 (0) | 2023.10.10 |
|---|---|
| [Minimal mistakes, Github 블로그] breadcrumbs 설정 (1) | 2023.10.10 |
| [Minimal mistakes, Github 블로그] 글씨 크기 변경 (0) | 2023.10.10 |
| [Minimal mistakes, Github 블로그] LaTex 문법 적용 (0) | 2023.10.10 |
