Firefox 개발자 도구 테마를 해킹하고 개인화하는 법
테마는 우리 개발자에게 개인적인 것으로, 편집자 나 도구의 미화에 관한 것이 아닙니다. 그것은 우리가 쳐다볼 화면을 (깜박 거리지 않고) 끝내고 생산적인 방식으로 몇 시간 동안 더 견딜 수있게 만드는 것입니다. 파이어 폭스에는 어둡고 밝은 두 가지 개발자 도구 테마가 있습니다. 둘 다 훌륭하지만 개인화 할 수있는 방법이 없어도 옵션이 여전히 제한적입니다..
이제 파이어 폭스는 UI 용으로 XUL과 CSS의 조합을 사용합니다. 즉, CSS를 사용하여 대부분의 모양을 조정할 수 있습니다. Mozilla는 사용자가 "userChrome.css"라는 CSS 파일을 사용하여 제품의 모양을 구성 할 수있는 방법을 제공합니다. 너는 할 수있다. 해당 CSS 파일에 사용자 정의 스타일 규칙 추가 Mozilla 제품에 반영됩니다..
이 게시물에서 우리는 Firefox에서 개발자 도구를 개인화하기 위해 동일한 CSS 파일을 사용할 것입니다..
먼저 CSS 파일을 찾아서 올바른 위치에 배치해야합니다. "userChrome.css"를 저장할 폴더를 찾는 빠른 방법은 about : 지원 브라우저 및 "프로필 폴더"레이블 옆의 "폴더 표시"버튼을 클릭하면. Firefox의 현재 프로필 폴더가 열립니다..
프로필 폴더에는 '크롬'이라는 폴더가 표시됩니다. 거기에 없으면 하나 만들고 "userChrome.css"를 만듭니다. 이제 파일 설정이 완료되었으므로 코드로 이동해 봅시다..
: root.theme-dark --theme-body-background : # 050607! important; --theme-sidebar-background : # 101416! important; - 테마 - 탭 - 툴바 배경 : # 161A1E! 중요; --theme-toolbar-background : # 282E35! important; - 테마 선택 배경 : # 478DAD! important; --theme-body-color : # D6D6D6! important; --theme-body-color-alt : # D6D6D6! 중요; --theme-content-color1 : # D6D6D6! important; --theme-content-color2 : # D6D6D6! important; --theme-content-color3 : # D6D6D6! important; - 테마 - 하이라이트 - 그린 : # 8BF9A6! important; - 테마 - 하이라이트 - 파랑 : # 00F9FF! important; - 강조 - 강조 - 블루 그래 : 흰색! 중요; --theme-highlight-lightorange : # FF5A2C! important; - 테마 - 하이라이트 - 오렌지 : 노란색! 중요; - 테마 - 하이라이트 - 레드 : # FF1247! important; - 테마 - 하이라이트 - 핑크 : # F02898! important;
위에서 볼 수있는 것은 개발자 도구의 모양을이 "userChrome.css"파일에 추가 한 코드입니다.
이에:
어두운 테마에서 더 어두운 배경과 밝은 텍스트로 콘트라스트를 조금 더 향상시키고 싶었 기 때문에 어두운 테마에서 일반적으로 사용되는 기본 색상을 유지했습니다. 색상이 더 좋으면 자신이 사용하는 테마에 더 잘 어울리는 색상으로 실험 해보십시오..
이 코드는 DevTools의 다양한 UI 부분을 색칠하는 데 사용되는 CSS 색상 변수 목록 일뿐입니다. 우리는 압축 파일에서 "variables.css"라는 파일에 코드를 발견했습니다. “omni.ja”:
Windows의 경우 파일 위치는 다음과 같습니다.
F : /firefox/browser/omni.ja. 교체 에프: Firefox를 설치 한 드라이브를.
OSX에서 파일은 다음 위치에 있습니다.
~ / Applications / Firefox.app / Contents / Resources / browser / omni.ja.
압축 된 Java 파일입니다. Windows에서는 이름을 변경할 수 있습니다. .자 확장 .지퍼 기본 Windows 탐색기 추출 유틸리티를 사용하여 파일을 언로드 할 수 있습니다. OSX에서 터미널로 이동하여 실행하십시오. 압축을 풉니 다.. 그렇게하기 전에 다른 디렉토리에있는 파일의 복사본을 만드십시오..
omni.ja가 추출되면 파일을 찾을 수 있습니다. /chrome/devtools/skin/variables.css; 예, Firefox DevTools 스킨이 다음 폴더에 있습니다. 크롬. 에서 variables.css, 다음과 같이 밝은 테마와 어두운 테마 모두에 사용되는 여러 가지 색상 변수가 표시됩니다.
: root.theme-light --theme-body-background : #fcfcfc; --theme-sidebar-background : # f7f7f7; - 주저 - 대비 - 배경 : # e6b064; --theme-tab-toolbar-background : #ebeced; --theme-toolbar-background : # f0f1f2; - 테마 선택 배경 : # 4c9ed9; --theme-selection-background-semitransparent : rgba (76, 158, 217, .23); --theme-selection-color : # f5f7fa; --theme-splitter-color : #aaaaaa; --theme-comment : # 757873; --theme-body-color : # 18191a; --theme-body-color-alt : # 585959; --theme-content-color1 : # 292e33; --theme-content-color2 : # 8fa1b2; --theme-content-color3 : # 667380; - 테마 - 하이라이트 - 녹색 : # 2cbb0f; - 하이라이트 - 파랑 : # 0088cc; - 하이라이트 - 블루 그래 리 : # 0072ab; - 하이라이트 - 퍼플 : # 5b5fff; --theme-highlight-lightorange : # d97e00; - 테마 - 강조 - 오렌지 : # f13c00; - 테마 - 강조 - 빨강 : # ed2655; - 테마 - 하이라이트 - 핑크 : # b82ee5; / * 성능 도구와 같이 그래프에 사용 된 색상. Chrome의 타임 라인과 유사한 색상입니다. * / --theme-graphs-green : # 85d175; --theme-graphs-blue : # 83b7f6; --theme-graphs-bluegrey : # 0072ab; --theme-graphs-purple : # b693eb; --theme-graphs-yellow : # efc052; --theme-graphs-orange : # d97e00; --theme-graphs-red : # e57180; --theme-graphs-grey : #cccccc; --theme-graphs-full-red : # f00; - 테마 - 그래프 - 완전 - 파랑 : # 00f; : root.theme-dark --theme-body-background : # 14171a; --theme-sidebar-background : # 181d20; - 테마 - 대비 - 배경 : # b28025; --theme-tab-toolbar-background : # 252c33; --theme-toolbar-background : # 343c45; - 테마 선택 배경 : # 1d4f73; --theme-selection-background-semitransparent : rgba (29, 79, 115, .5); --theme-selection-color : # f5f7fa; --theme-splitter-color : 검정색; --theme-comment : # 757873; --theme-body-color : # 8fa1b2; --theme-body-color-alt : # b6babf; --theme-content-color1 : # a9bacb; --theme-content-color2 : # 8fa1b2; --theme-content-color3 : # 5f7387; - 테마 - 하이라이트 - 그린 : # 70bf53; - 하이라이트 - 파랑 : # 46afe3; - 테마 - 하이라이트 - 블루 그래 : # 5e88b0; - 하이라이트 - 퍼플 : # 6b7abb; --theme-highlight-lightorange : # d99b28; - 테마 - 하이라이트 - 오렌지 : # d96629; - 테마 - 하이라이트 - 레드 : # eb5368; - 테마 - 하이라이트 - 핑크 : # df80ff; / * 성능 도구와 같이 그래프에 사용 된 색상. 대부분 일부 "강조 - *"색상과 유사합니다. * / --theme-graphs-green : # 70bf53; --theme-graphs-blue : # 46afe3; --theme-graphs-bluegrey : # 5e88b0; --theme-graphs-purple : # df80ff; --theme-graphs-yellow : # d99b28; --theme-graphs-orange : # d96629; --theme-graphs-red : # eb5368; --theme-graphs-grey : # 757873; --theme-graphs-full-red : # f00; - 테마 - 그래프 - 완전 - 파랑 : # 00f;
타겟팅하려는 테마 및 변수를 선택하여 "userChrome.css"에 추가하십시오..
내 개발자 도구 창의 몇 가지 스크린 샷이 있습니다..
