[코코포리아] 새하얀 코코포리아 만들기
이른바 화이트포리아
본 방법은 크롬 확장프로그램을 이용한 것입니다.
1단계: 크롬 확장프로그램 User CSS를 설치한다.
User CSS란
특정 사이트에 임의의 CSS를 삽입하여 그 사이트에 진입하면 자동으로 그 CSS가 설정되도록 하는 확장프로그램입니다.
2단계: 코코포리아에 접속한 후 확장프로그램을 실행한다.
실행하면 빈 칸이 뜨는데, 위처럼 아래 코드를 복사해 넣어줍니다.
주석으로 적어둔 것처럼 응용하여 사용하셔도 됩니다.
확장프로그램 상단의 ON/OFF 토글을 통해 적용 상태를 조정 가능합니다.
/* 텍스트 컬러 일괄 변경 */
.MuiTypography-root, .MuiSvgIcon-root, .MuiBadge-root, .MuiButton-textWhite, .MuiPaper-root .MuiSvgIcon-root, .MuiInputBase-root, .MuiButton-outlined, .dXoeAH, .css-15n7idr.Mui-selected, .MuiFormLabel-root, .MuiInputBase-input, .MuiTab-textColorPrimary, .MuiMenuItem-root{
color: #000;
}
/* 배경 컬러 일괄 변경 */
.MuiPaper-elevation, .MuiDialog-paperFullWidth, .MuiList-root, .MuiToolbar-root {
background:#fff !important;
}
/* 코코포 배경색 */
body, .MuiDialogActions-root, .MuiInputBase-root {
background-color: rgba(0,0,0,0.1) !important;
}
/* 이 아래로 잡다한 설정 (건드리는거 비추) */
.MuiPaper-root form {
background:none;
}
.MuiDivider-root{
border-color: rgba(0, 0, 0, 0.08);
}
.MuiPaper-root form {
background:none;
}
.MuiButton-outlined {
border: 1px solid rgba(0, 0, 0, 0.5);
}
.css-xuvn5l::before {
border-bottom: 1px solid rgba(0, 0, 0, 0.7);
}
위 코드는 완전하지 않으며, 이런 식으로 하면 됨~ 수준의 CSS입니다.
제보받을 때마다 조금씩 변경될 수 있습니다.
3단계: 세션 즐기기
끝!
- 카테고리
- #기타
- ..+ 5
댓글 2
상상하는 판다
안녕하세요~! 다크모드의 가독성 문제로 코코포를 이용하기 어려워하던 사람입니다... 이렇게 글 올려주셔서 정말로 감사합니다. ㅠㅠ♥ 다만 해당 글을 보고 코코포리아에 적용을 해보았는데 적용이 되지 않아서, 제가 중간 과정에서 무슨 실수를 했나 싶습니다. 혹 적용과정 영상을 살짝 부탁드릴 수 있을까요? 해주시면 정말정말 감사할 것 같습니다... 이 멋진 기능을 꼭꼭 써보고 싶어요!
추천 포스트
