搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

Add more contrast to dark developer theme

  • 4 回覆
  • 1 有這個問題
  • 1 次檢視
  • 最近回覆由 izdewtime71

more options

I am visually disabled and due to my work I find myself needing to use develolper tools in firefox. Due to my visual disablity I require using a dark theme, which I'm happy firefox has, the problem is that I need more vivid contrast in the dark theme. Is there any way to either tweak the dark theme to make background black and text white as opposed to the more low contrast default dark theme? Is there an extension that can do this if not something that can be done via modifying a stylesheet etc? I'm using latest stable release of firefox on WIndows 10 where I also use a high contrast black theme.

I am visually disabled and due to my work I find myself needing to use develolper tools in firefox. Due to my visual disablity I require using a dark theme, which I'm happy firefox has, the problem is that I need more vivid contrast in the dark theme. Is there any way to either tweak the dark theme to make background black and text white as opposed to the more low contrast default dark theme? Is there an extension that can do this if not something that can be done via modifying a stylesheet etc? I'm using latest stable release of firefox on WIndows 10 where I also use a high contrast black theme.

所有回覆 (4)

more options

Hi izdewtime71, Firefox 63 adapts the Firefox "Default" theme more closely to the Windows system theme, but I don't know how (well) it works with High Contrast themes. You might still end up using Firefox's Dark theme instead.

(Your Firefox identified itself as version 62, so possibly you haven't updated yet.)

Firefox supports two optional style sheets, userChrome.css (for toolbars, sidebar, and dialogs) and userContent.css (for built-in pages and for web content). It's possible someone has already assembled style rules for this, either specifically related to Developer Tools or more generally. One of the broader efforts is this one:

https://github.com/overdodactyl/ShadowFox

more options

Wow, that was quick! So right now for my theme I've basically just set background to black and all text to white including links. Example:

https://www.screencast.com/t/9oCmwwf2sx

When I hit F12 here is what the developer tools looks like.

https://www.screencast.com/t/scoEh4HLAK

more options

I tried some code in userChrome.css above the @namespace line. It is not always easy top style devtools elements because of namespace issues.

@-moz-document url-prefix(chrome://devtools/content/) {
 body * , .CodeMirror-line *, #output-container {font-size: 14px !important; font-weight: bold !important; color:white !important }
 .devtools-tab *,.splitview-nav > li *{font-size:14px !important; color:white !important}
 .devtools-tab.selected *{font-weight:bold !important}
.tab-panel-box .inspector-tabpanel {font-size:14px!important; font-weight:bold !important}
.splitview-nav > li.splitview-active *{font-weight:bold !important}
}
more options

Appreciate your help! This does improve visibility for me.

I tried tweaking the background to black, by tweaking your suggestion to:

@-moz-document url-prefix(chrome://devtools/content/) {

body * , .CodeMirror-line *, #output-container {font-size: 14px !important; font-weight: bold !important; background-color: black !important;color:white !important }
.devtools-tab *,.splitview-nav > li *{font-size:14px !important; background-color: black !important;color:white !important}
.devtools-tab.selected *{font-weight:bold !important;background-color: black !important}

.tab-panel-box .inspector-tabpanel {font-size:14px!important; font-weight:bold !important;background-color: black !important} .splitview-nav > li.splitview-active *{font-weight:bold !important;background-color: black !important} }

Which now looks like this

https://www.screencast.com/t/Ph1Kgosnl7d9

I'm hoping to change the dark gray background (or whatever color it is of each panel to black. I'll keep playing with it. I'm a noob when it comes to this so guess this is a good way to get familiar with it.  :) If anybody else knows how to easily do this, please drop a line and thanks to all of you so far!