This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Add more contrast to dark developer theme

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.

All Replies (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!