Tìm kiếm hỗ trợ

Tránh các lừa đảo về hỗ trợ. Chúng tôi sẽ không bao giờ yêu cầu bạn gọi hoặc nhắn tin đến số điện thoại hoặc chia sẻ thông tin cá nhân. Vui lòng báo cáo hoạt động đáng ngờ bằng cách sử dụng tùy chọn "Báo cáo lạm dụng".

Learn More

Add more contrast to dark developer theme

  • 4 trả lời
  • 1 gặp vấn đề này
  • 34 lượt xem
  • Trả lời mới nhất được viết bởi 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.

Tất cả các câu trả lời (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:


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:


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


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


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!