Add more contrast to dark developer 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)
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:
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.
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}
}
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!