Win10 自訂主題使FireFox titlebar button白框問題

Win10 自訂主題使FireFox titlebar button白框問題

(放隻高解析的Fox)

因為覺得原來win10的介面看久不順眼,對themeui.dll、uxinit.dll打patch然後從顏色到介面排版改得面目全非終於滿意後,有一個問題一直困擾我,就是在改完後FireFox的會變這樣:titlebar-button---before-1

忍著也用了一段時間,直到最近FF57大更新,變得很快是真的(超有感),但一堆介面修改型的extension都不能用了,只好去查FF的開發論壇和文件看有沒有東西可以用,不然還是要轉chrome了...,意外的發現titlebar button的解決辦法。

  1. 進入about:support頁面,按Profile Folder這一欄的button會開啟個人設定檔的資料夾
  2. 在這建立叫chrome的資料夾,在裏頭建一個叫userChrome.css的檔案,然後可以按Ctrl+Alt+Shift+I叫出FF的browser開發工具(不是web開發工具),然後就可以像平常寫網頁那樣改啦(≧▽≦),把自己想要的樣式寫在userChrome.css裡,例如我用來解決這問題的:
#main-window[windowtype="navigator:browser"] {
	background-color: transparent !important;
}
.titlebar-button {
	background-color: transparent !important;
	transition: background-color 0.2s ease;
}
.titlebar-button:hover {
	background-color: #E81123 !important;
}

成果:

titlebar-button---after


Reference:

  1. Firefox Developer Tools | Browser Toolbox

  2. MozillaZine | UserChrome.css

  3. Aris-t2/CustomCSSforFx: Things possible in Firefox 57+ (by using CSS code in userChrome.css/userContent.css) #1