Revisit Dark Theme Syntax Highlighting



3 years ago
5 months ago


(Reporter: hholmes, Unassigned)


Firefox Tracking Flags

(Not tracked)



(3 attachments)

This is a bug for tracking the syntax highlighting issues brought up in 1270990. Idea is to sit on these changes for a couple of weeks and decide if they're worth fixing or not.

- The contrast between the white and purple colors in the syntax highlighting might need to be revisited.
- The red and green both have really high contrast to the point of being a little glaring.
Depends on: 1270990
Priority: -- → P2
Blocks: 1273925

Comment 1

3 years ago
Created attachment 8762474 [details]

After upgrading from 48 to 49 I was just about to file a bug until I found this one ;) Syntax highlighting is surely a matter of taste and "familiarization". Left these things apart I find the new colors much harder to differentiate. See attachment ffdevtools_dark_theme_49_color_syntax_highlighting.png

1. The attributes' keys and values look very much the same (greyish and whitish). Not all of us have very high contrast monitors ;)

2. The vertical line is ping whereas the element names stay greenish

This holds also true for the JS debugger, which is now much harder to read imho.

I liked the old colors much better (see screenshot). They are also closer to popular dark color schemes as used by Sublime or Intellij Idea. Because the colors are a matter of taste and familiarization I would suggest to use one that is well established for the dark theme instead of creating a new (different) one from scratch.

Comment 2

3 years ago
Just one additional note concerning attachment 8762474 [details]
3. The background scheme should be darker to increase readability. Compare to previous dark theme. But this might be the same issue as in Bug 1273925

Comment 3

3 years ago
Hello everyone, I've come here for the same reason: it's kind-of difficult for me to read the new dark colour scheme... The purple background is very light!

Comment 4

3 years ago
Created attachment 8762530 [details]

After working a few hours with it: 

4. On selected element there is no syntax highlighting at all, e.g. in attachment 8762474 [details] the <ul id="nav-access"> is just white on blueish. When hovering over elements then there is syntax highlighting, but the background is even lighter than normal (hard to read).

5. The colors in the debugger looks very random to me. Blue breakpoints (white on blue when active) and green line highlighting. See new attachment. I think the hover/selected line colors should be same as in Inspektor.

Comment 5

3 years ago
Hello. In my opinion, although the colors pass the AA test, they remain difficult to distinguish, beyond the contrast. Furthermore, there are not harmonic and pleasing to the eye.

Comment 6

3 years ago
I agree with scheco, these colors seem faded and aren't as pleasing (to me at least) as the old ones. In fact, it's a big enough deal that it caused me to sign in to bugzilla for the first time in months to comment on it.

I have two suggestions: 1.) choose a popular color scheme like solarized or similar to emulate, or 2.) allow custom color schemes so developers can tweak the dev tools' CSS themselves.
Duplicate of this bug: 1280021
Duplicate of this bug: 1273925

Comment 9

2 years ago
As always, it's a matter of taste and familiarization, but if you are gonna follow a dark theme, IntelliJ's Darcula is a nice-looking well-established one.

Comment 10

2 years ago
Daniel: nope, gotta use Gruvbox. It's the only truly well done dark theme. :P

In all seriousness though, this is why allowing people to make and install custom themes would be a good idea.

Also even though I prefer Gruvbox, I'll take any well-established text editor theme over what we've got right now.

Comment 11

2 years ago
Forgot to mention: the previous dev tools theme would work as well, I'm still confused why it was replaced with this one. From the outside looking in, it seems like change for the sake of change, not sure if there was reasoning behind the change that I am unaware of though.

Comment 12

2 years ago
@Daniel and @flyingfisch: I created Bug 1281118 "Make it Easy to Use Custom Syntax Highlighting" for this. Maybe you can help or share ideas over there. I'm sharing it here as I do not seem to have permission to add a "See also" here.
(In reply to Jens from comment #12)
> @Daniel and @flyingfisch: I created Bug 1281118 "Make it Easy to Use Custom
> Syntax Highlighting" for this. Maybe you can help or share ideas over there.
> I'm sharing it here as I do not seem to have permission to add a "See also"
> here.

I marked it.  By the way, you can ask for editbugs permission here:
See Also: → bug 1281118
(In reply to Brian Grinstead [:bgrins] from comment #13)
> (In reply to Jens from comment #12)
> > @Daniel and @flyingfisch: I created Bug 1281118 "Make it Easy to Use Custom
> > Syntax Highlighting" for this. Maybe you can help or share ideas over there.
> > I'm sharing it here as I do not seem to have permission to add a "See also"
> > here.
> I marked it.  By the way, you can ask for editbugs permission here:

(I added permissions to Jens' account.)

Comment 15

2 years ago
Created attachment 8766736 [details]

I noticed another part that could need improvement: There's a nice feature that the colors of hidden elements are a bit faded in the inspector. Anyway, I think the contrast is not high enough WRT visible elements. Hidden and Visible is hardly distinguishable IMHO. See attached screenshot. 

(This probably was already an issue before the syntax highlighting was revised. But the difference is so low, that I only noticed this feature today by accident.)

Comment 16

2 years ago
The new color scheme for syntax highlighting and the reorganized context menu are extreme bad, sorry. Sometimes I ask myself why you always do bad things than good things? It always sounds like: Hey guys, look what we have done! Woooohoo.

I really want to ask you now a few questions: What was wrong with that "old" color scheme???? Is your new color scheme developer totally color-blind. Do you all have a error in taste??? Do you like to browse through useless submenus to get to the real important stuff??? Ahhhhhhhhhhhhhh, what have you done?????

Are you really working with the devolper tools every day or do you only want to irritate all the web developers? Sorry guys..., I really love firefox but until now I don't see any brilliant improvement  to the dev tools although a lot of creative people voted on your website which - sadly - now is gone!

Like all people said: This new color scheme is very awful and what I really dont like is the fact that your absolutely don't care about the real users! Sure you ask for ideas but then you don't implement them! Why?

Did I forget something???? Ahhhh yes...., for your last big coup you are now planing to to bring the excellent firebug to the same level!? Are yor kidding???? My goodness, what a mess! :(

PS: You really had a few approaches with the dev tools in the past... but now your are going to ruin it!

Comment 17

2 years ago
how to return the old color scheme?

Comment 18

2 years ago
Where can I, as a user, vote on changes like this before they are implemented? Do you even consider your user base, or are you just a few people in a room who say "lets change it"?

The previous theme was fine, the new one is a strain on the eyes, ruined my morning and makes me consider downgrading just so I'd no longer have to look at it. I chose the dark theme to have dark colours, not a mix of dark-ish background and light colours that make me want to throw up.
Note to anyone planning to comment on this bug - please have a look at the Bugzilla etiquette page before doing so, specifically the "Commenting" section:
(In reply to Stijn Herreman from comment #18)
> Where can I, as a user, vote on changes like this before they are
> implemented?

We discuss devtools development primarily on bugzilla, a mailing list, and irc:
We've discussed this with Stijn Herreman directly on IRC today.

Changes to the UI aren't taken lightly, we know that any change can result in user frustration, so we try and be mindful about them. Having said this, changes are needed, they are our way to progress, so we must make them and take decisions. But because of the large number of users, any change to the UI has the potential of impacting someone negatively. We try and make sure most people benefit though.

Regarding the change of theme however, the feedback seems to be mostly about how pleasing it is to look at. That's a highly subjective thing, which is very hard for people to agree on.

I think the best course of action is to ensure our themes are customizable, or that people can use their own themes.

This is already sort of possible with Firefox's userChrome.css feature, as described here:

I've also filed bug 1306272 for supporting custom devtools themes.
Oh, I guess bug 1306272 is a dupe of bug 1281118 actually.

Comment 23

2 years ago
The new dark theme has been in place for 3 releases now (since Firefox 49), so I guess there won't be coming much more feedback... I admit I actually got used to the new colors so far that I do actually like them by now ;) Nonetheless, some issues raised here are still valid in my opinion - especially the purple background is a too light. 

This ticket lists all (minor) things pretty good I think.

Helen, any time schedule here?
Flags: needinfo?(hholmes)
The themes are changing, as explained here:
This bug is therefore obsolete. Let's close it.
Last Resolved: a year ago
Flags: needinfo?(hholmes)
Resolution: --- → WONTFIX


5 months ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.