[CSS Snippet] 파일 탐색기 폴더 색상 변경하기

파일 탐색기 폴더 색상 변경하는 CSS Snippet입니다.

예시

CSS Snippet

.theme-light,
.theme-dark {
    --Fold0: #ffe2e2;
  --Fold1: #ffdee9;
  --Fold2: #f6e1ff;
  --Fold3: #e9dfff;
  --Fold4: #e1e5ff;
  --Fold5: #d4eaff;
  --Fold6: #cdedff;
  --Fold7: #ccf2f7;
  --Fold8: #d5f8f4;
  --Fold9: #d8f8da;
  --FoldA: #ecffdb;
  --FoldB: #f4fbd2;
}


/* ===folder-colorful-order ============ */
 .nav-folder.mod-root>.nav-folder-children .nav-folder-title
{
  color: #000000;
}
 .nav-folder.mod-root>.nav-folder-children>.nav-folder .nav-file-title {
  color: var(--FoldText);
}
 .nav-folder.mod-root>.nav-folder-children>.nav-folder .nav-folder-title.is-active,
 .nav-folder.mod-root>.nav-folder-children>.nav-folder .nav-folder-title:hover {
  font-weight: bold;
  filter: saturate(150%);
}
 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+2) .nav-folder-title,
 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+2) .nav-folder-title+.nav-folder-children {
  background-color: var(--Fold0);
}
 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+3) .nav-folder-title,
 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+3) .nav-folder-title+.nav-folder-children {
  background-color: var(--Fold1);
}
 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+4) .nav-folder-title,
 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+4) .nav-folder-title+.nav-folder-children {
  background-color: var(--Fold2);
}
 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+5) .nav-folder-title,
 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+5) .nav-folder-title+.nav-folder-children {
  background-color: var(--Fold3);
}
 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+6) .nav-folder-title,
 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+6) .nav-folder-title+.nav-folder-children {
  background-color: var(--Fold4);
}
 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+7) .nav-folder-title,
 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+7) .nav-folder-title+.nav-folder-children {
  background-color: var(--Fold5);
}

 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+8) .nav-folder-title,
 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+8) .nav-folder-title+.nav-folder-children {
  background-color: var(--Fold6);
}

 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+9) .nav-folder-title,
 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+9) .nav-folder-title+.nav-folder-children {
  background-color: var(--Fold7);
}

 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+10) .nav-folder-title,
 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+10) .nav-folder-title+.nav-folder-children {
  background-color: var(--Fold8);
}
 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+11) .nav-folder-title,
 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+11) .nav-folder-title+.nav-folder-children {
  background-color: var(--Fold9);
}

 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+12) .nav-folder-title,
 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+12) .nav-folder-title+.nav-folder-children {
  background-color: var(--FoldA);
}
 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+13) .nav-folder-title,
 .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(12n+13) .nav-folder-title+.nav-folder-children {
  background-color: var(--FoldB);
}

관련 플러그인

폴더와 파일의 색상을 변경하는 File Color 플러그인

---