Firefox에서 스크롤바 색상 바꾸기

Browser

by Vulpes.Noctis 2019. 1. 28. 15:49

윈도우 10에서 개인적으로 마음에 안 드는 부분 중 하나가 스크롤바입니다. 밝은 회색 위에 약간 어두운 탭이 있는 형태인데, 이게 보통의 경우는 큰 문제가 안 되지만 긴 웹페이지에서는 탭이 작아져서 상당히 보기 힘들어지죠.

하지만 윈도우 테마에서 이걸 직접 건드릴 수 있는 방법이 없기 때문에 그냥 불편함을 감수하고 있었는데...

작년부터 파이어폭스에서 쉽게 스크롤바를 커스터마이징 할 수 있게 되었네요.

우선 주소창에 about:profiles 를 치고 들어가서 자기 프로필 폴더를 열고 들어갑니다.

프로필 폴더 안의 chrome 폴더 안에 userContent.css 라는 파일을 만들고 다음 규칙을 적용해 원하는 형태로 편집합니다.

:root{
scrollbar-face-color: <color>;
scrollbar-track-color: <color>;
scrollbar-width: auto / thin / <width>;
}

혹은 파이어폭스 64 이상인 경우, scrollbar-face-color 이랑 scrollbar-track-color을 별도로 지정할 필요 없이

:root{
scrollbar-color: <face-color> <track-color>;
scrollbar-width: auto / thin / <width>;
}

이렇게 한번에 지정 가능합니다.

<color>은 hex 값이나 (#RRGGBB) rgb값 (rgb(RRR,GGG,BBB)) 등. 웬만한 값을 다 받으니 형식에 맞게 표현해 주시면 됩니다.

전 이렇게 지정해 놓고 쓰는데, 잘 보여서 아주 살 거 같네요 ㅋ

:root{
scrollbar-color: #E46257 #2D2A34;
scrollbar-width: thin;
}

FoxTech 4.0