fi스킨 다크모드 코드

fi스킨 다크모드 쉽게 적용하기

fi스킨에 다크모드를 쉽게 적용하는 방법은 fi스킨을 v5.0이상으로 업데이트하는 방법입니다.

아래 글을 참고하시면 됩니다.

 

티스토리 fi스킨 버전 업그레이드하기

티스토리 설정으로 들어가기 우선 티스토리 편집으로 들어가주세요 (편집 들어가는 방법을 모르시겠다면 아래의 글을 참고해주세요) fi스킨 설정 #0 스킨 편집 들어가기 fi스킨 설정 들어가기 우

itcider.com

 

fi스킨 다크모드 직접 코드로 적용하기 (1.코드 추가)

 

우선 fi스킨을 적용하시고 [스킨 편집]>[html편집]을 눌러주세요

 

css에서 html 부분을 찾아주세요.


이 위에 아래 코드를 입력해주세요.

@media (prefers-color-scheme: dark) {
  .layer_post .btn_mark {
    color: #1E1E1E !important;
  }

  @media screen and (max-width: 767px) {
    #header h1 {
      background-color: #444 !important;
    }
  }
  #toc a:hover {
    background: linear-gradient(180deg, #1E1E1E 50%, rgb(141, 141, 141) 50%) !important;
  }
  .shareBtn li {
    background: #1e1e1e !important;
    border-color: rgb(255, 255, 255) !important;
    color: rgb(255, 255, 255) !important;
  }

  code.hijs {
    background-color: #fff !important;
  }

  footer,
  #header,
  .mobile-menu #aside,
  #aside .profile::before {
    background-color: rgb(26, 26, 26) !important;
  }

  a.link_num {
    color: rgb(212, 212, 212) !important;
  }

  a.link_category {
    color: rgb(212, 212, 212) !important;
  }

  #header {
    border-bottom: 1px solid #000 !important;
  }

  body,
  .comment-list ul li ul {
    background-color: #1E1E1E !important;
  }


	.item_comment{
    background-color: #1E1E1E !important;
  }


  table,
  select {
    color: #ddd !important;
  }
  strong {
    color: rgb(212, 212, 212) !important;
  }
  strong.name {
    color: rgb(212, 212, 212) !important;
  }

  span {
    color: rgb(212, 212, 212) !important;
  }

  span.selected {
    color: #000 !important;
  }

  div.swal2-popup {
    background-color: #333 !important;
    color: #fff !important;
  }



  .div_swal {
    color: rgb(255, 255, 255) !important;
  }

  .btn_search_del {
    color: rgb(255, 255, 255) !important;
  }

  .button {
    color: rgb(255, 255, 255) !important;
  }

  .pagination a,
  p,
  ul,
  li,
  p span {
    color: #aaa !important;
  }

  ul,
  li,
  ol,
  div,
  span.date {
    color: #eee !important;
  }

  .comments h2 .count,
  .og-title,
  .comments h2,
  .cover-event ul li .title,
  a,
  h2,
  h3 {
    color: #eee !important;
  }

  .cover-event ul li .more {
    color: #000 !important;
  }

  h4,
  h5 {
    color: #ccc !important;
  }

  .og-text {
    background-color: #555 !important;
  }

  .cover-list,
  .cover-thumbnail-3,
  .cover-thumbnail-2,
  .cover-thumbnail-4,
  .cover-event,
  .comment-list ul li ul {
    border-top: none !important;
  }

  .cover-list h2,
  .cover-thumbnail-2 h2 {
    border-bottom: 1px solid #000 !important;
  }

  #gnb ul li .current a:after {
    background-color: #eee !important;
  }

  #header .util .profile button,
  #aside .close,
  .sidebar .social-channel ul li a,
  #header .util .menu,
  .tags a,
  .cover-thumbnail-3 button {
    background-color: transparent !important;
    border: 1px solid #1E1E1E !important;
  }

  #header .util .search::before {
    background-color: #444 !important;
    border: 1px solid #1E1E1E !important;
  }

  .pagination .prev,
  .pagination .next,
  .pagination .selected,
  .cover-thumbnail-4 .next {
    color: #fff !important;
    border: 1px solid #1E1E1E !important;
  }

  figure[data-ke-type='opengraph'] a,
  #tt-body-page figure[data-ke-type='opengraph'] a {
    border: 1px soiid #000 !important;
  }

  figure[data-ke-type='opengraph'] div.og-image {
    border-right: 1px solid #000 !important;
  }

  /* sidebar */
  .box_header .link_logo {
    color: #eee !important;
  }


  .area_sidebar .tt_category {
    color: #1E1E1E !important;
  }

  .area_sidebar .inner_sidebar {
    background: #1E1E1E !important;
  }

  .area_sidebar .link_item {
    color: #aaa !important;
  }

  .area_sidebar .link_item .c_cnt {
    color: #aaa !important;
  }

  .area_sidebar .link_sub_item {
    color: #888 !important;
    font-weight: 500;
  }

  .area_sidebar .sub_category_list {
    border-left: 3px solid #888 !important;
  }

  .area_sidebar .t_menu_home a,
  .area_sidebar .t_menu_tag a,
  .area_sidebar .t_menu_guestbook a {
    color: #ccc !important;
  }

  .area_sidebar .link_tool {
    color: #ccc !important;
  }

  .area_sidebar .link_add {
    color: #ccc !important;
  }

  .area_sidebar .btn_close {
    color: #ccc !important;
  }

  /*sidebar search*/
  .area_popup {
    background: #1E1E1E !important;
  }

  .area_popup .area_search .btn_close {
    color: #ccc !important;
  }

  .area_popup .link_logo {
    color: #eee !important;
  }

  .tag_zone a {
    border: solid 1px #999 !important;
    color: #eee !important;
  }

  .area_popup .box_form {
    border-bottom: 1px solid #ccc !important;
  }

	span.selected, a.link_num{
		color: #fff ;
    background-color: #1E1E1E ;
	}



  textarea,
  #wf-form,
  #container .wf-form,
  div.inner_inp {
    background-color: #1E1E1E !important;
    border: 1px solid rgb(255, 255, 255) !important;
    color: #fff !important;
  }

  input.inp_comment,
  input.inp_search {
    background-color: #1E1E1E !important;
    color: #fff !important;
  }

  ul#toc {
    background-color: #1E1E1E !important;
    color: #fff !important;
  }

  li {
    color: #fff !important;
  }

  img {
    color: #fff !important;
  }

  button.btn_register {
    background-color: #1E1E1E !important;
    border: 1px solid rgb(255, 255, 255) !important;
  }

  footer {
    border-top: 1px solid #000 !important;
  }

  #footer address {
    color: #bbb !important;
  }

  #footer .link_footer {
    color: #bbb !important;
  }

  #footer .page-top {
    background-color: #555 !important;
    border-color: #444 !important;
  }

  #footer .page-top:hover {
    background-color: #bbb !important;
  }

  .box_header .btn_menu,
  .box_header .btn_search {
    background-image: url(./images/ico_menu.svg) !important;
  }

  .box_header .btn_search {
    background-image: url(./images/ico_search.svg) !important;
  }

  .info_profile {
    background-color: #555 !important;
  }

  .list_toolbar {
    background-color: #555 !important;
  }

  .wrap_list {
    background-color: #555 !important;
  }


}

위 코드를 입력해주시고 나서

 

fi스킨 다크모드 직접 코드로 적용하기 (2.코드 변경)

 

ctrl+f로

 .theme_gray .thema_apply .selected {

위 부분을 찾아주세요

아래 color부분을

    color: #000 !important;
    background-color: #fff !important; } }

로 바꿔주세요.

  .theme_gray .thema_apply .selected {
    color: #000 !important;
    background-color: #fff !important; } }

위처럼 변경되게끔 해주시면 다크모드가 적용됩니다.


Leave a Comment