前往
大廳
主題

火狐Firefox CSS樣式:暗黑主題補完計畫

—— | 2019-08-30 23:14:37 | 巴幣 0 | 人氣 416

不知道為什麼火狐的暗黑主題不完整,連Edge都黑了,火狐還有不少地方還是白的,
所以有人寫了樣式彌補。
樣式只改:右鍵選單、上/下一頁選單、收藏庫、頁面資訊、書籤的編輯面板的按鈕、選項框和屬性、資料夾。

選項和附加元件要Win10開啟暗黑模式,限火狐68+
網址列輸入:
about:config?filter=browser.in-content.dark-mode
改成true後重啟火狐

/*暗黑:收藏庫、頁面資訊、書籤屬性*/
@-moz-document url(chrome://browser/content/places/places.xul),
url(chrome://browser/content/pageinfo/pageInfo.xul),
url(chrome://browser/content/places/bookmarkProperties.xul){

#placesToolbox,
#placesView,
#placesToolbar,
#main-window,
#topBar,
dialog,
tree{
-moz-appearance: none !important;
background-color: var(--toolbar-bgcolor,rgb(50,50,52)) !important;
color: rgb(249,249,250) !important;
}
#placesToolbar,
tree{
background: transparent !important;
}

textbox,
richlistbox,
treecol,
button,
menu,
#permList{
-moz-appearance: none !important;
color: inherit !important;
}

.menubar-left{ fill: currentColor; -moz-context-properties: fill; }

textbox,richlistbox{ background-color: rgba(0,0,0,0.2) !important; }

treecol:not([hideheader]){ height: 24px; }
treecol:hover{ filter: brightness(160%) }
treechildren::-moz-tree-row(multicol, odd), #permList{ background-color: rgba(0,0,0,0.2) !important; }

radiogroup > radio[selected],
radiogroup > radio:hover,
#permList > .permission:hover,
treechildren::-moz-tree-row(hover),
button:hover{ background-color: rgba(255,255,255,0.1) !important; color: inherit !important;}

treechildren::-moz-tree-row(selected){ background-color: Highlight !important; }
button{ padding: 3px }
#placesMenu > menu{ border: none !important; }

button{ border: 1px solid graytext; border-radius: 3px }

}
/* modal prompts (alert() & friends) */

.paymentDialogContainerFrame,
.tabmodalprompt-mainContainer{
background-color: var(--toolbar-bgcolor) !important;
color: var(--lwt-text-color,-moz-dialogtext) !important;
}


/*勾選框*/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#editBMPanel_tagsSelector > richlistitem > image,
radio > .radio-check,
checkbox > .checkbox-check{
-moz-appearance: none !important;
border: 1px solid graytext;
border-radius: 2px;
height: 1.3em;
width: 1.3em;
padding: 1px;
}

#editBMPanel_tagsSelector > richlistitem > image{
background-color: var(--toolbar-bgcolor,rgb(50,50,52)) !important;
margin: 1px !important;
border-color: graytext !important;
border-radius: 2px !important;
}

#editBMPanel_tagsSelector > richlistitem:not([disabled]):hover > image,
radio:not([disabled]):hover > .radio-check,
checkbox:not([disabled]):hover > .checkbox-check{ border-color: highlight !important; }

radio > .radio-check{ padding: 0; border-radius: 20px }

#editBMPanel_tagsSelector > richlistitem[checked] > image,
radio[selected] > .radio-check,
checkbox[checked] > .checkbox-check{
list-style-image: url("chrome://global/skin/icons/check.svg");
-moz-context-properties: fill;
fill: highlight;
}

radio[selected] > .radio-check{ list-style-image: url("chrome://global/skin/in-content/radio.svg"); }

#editBMPanel_tagsSelector > richlistitem[disabled] > image,
radio[disabled] > .radio-check,
checkbox[disabled] > .checkbox-check{ fill: graytext !important; }

/*Buttons*/
/* This only applies to natively-ish styled buttons, not the buttons in toolbars */

button{
-moz-appearance: none !important;
color: inherit !important;
background-color: rgba(127,127,127,0.1) !important;
border: 1px solid graytext;
}

button[disabled]{ opacity: 0.8 }

button:not([disabled]):hover{ border-color: highlight; background-color: rgba(0,0,0,0.1) !important; }

button.searchbar-engine-one-off-item,,
.panel-footer > button{ border-width: 1px 0 0 0; }

button.panel-button{ padding: 2px 2px 1px 2px !important; }

#customization-done-button{ background-color: #0a84ff !important; }
#customization-done-button:hover{ background-color: #0a64df !important; }

/*選單*/

:root{
  --uc-menu-bkgnd: rgb(74,74,79);
  --uc-menu-color: rgb(230,230,230);
  --uc-menu-dimmed: rgba(255,255,255,0.1);
  --uc-menu-disabled: rgb(50,50,50);
}

panel richlistbox,
panel tree,
panel button,
panel menulist,
panel textbox,
menupopup,
menu,
menuitem{ -moz-appearance: none !important; }

menulist,
menuitem,
menu{ min-height: 1.8em }

panel menulist{ border: 1px solid transparent }

panel richlistbox,
panel tree,
panel button,
panel menulist,
panel textbox,
menupopup:not(#BMB_bookmarksPopup),
#main-menubar > menu > menupopup,
#context-navigation{
  color: var(--uc-menu-color) !important;
  padding: 2px;
  background-color: var(--uc-menu-bkgnd) !important;
  border-color: var(--uc-menu-disabled) !important;
}

panel menulist:hover, panel menulist[open]{ border-color: Highlight !important; }

#editBMPanel_folderMenuList > menupopup > menuitem{ color: var(--uc-menu-color) !important; }

panel treechildren::-moz-tree-row(selected),
panel button:hover,
menu:hover,
menu[_moz-menuactive],
menu[open],
menuitem:hover,
menuitem[_moz-menuactive]{
  background-color: var(--uc-menu-dimmed) !important;
  color: inherit !important;
}

menu[disabled="true"],
menuitem[disabled="true"]{ color: var(--uc-menu-disabled) !important; }

menu:not(.subviewbutton) > .menu-right{ filter: invert(1) }

創作回應

更多創作