1

I want to change the default highlight color of Brackets' feature Live Preview (which now is blue).

Why? Some presentation related purposes.

I've searched for some extention which allows me to do that and tried to find proper option in brackets preferences, but no luck.

Is it possible (well, I guess nothing is impossible) to achieve this easly? Explanation why yes/no would be very helpful, thanks.

The highlight color is blue now. I need it to be red for example

wopolow
  • 365
  • 4
  • 16

2 Answers2

1

Not sure on exact specifics, but you may be able to follow something that Rob W outlined here: How to change text of Element Inspector tooltip/highlight via Chrome Extension?.

His answer dealt with changing the highlight color in the Chrome browser. Someone else here might be able to provide more specifics on how exactly the Live Preview operates, but essentially I think you'd need to find the resources.pak for the Chrome browser that Brackets launches and edit that .pak file to a color code you'd like. Specifically the line to edit would be: WebInspector.Color.PageHighlight={Content:WebInspector.Color.fromRGBA([111,168,220,.66]).

In the install directory of Brackets there is the devtools_resources.pak, but not sure if that's it. I'm unable to test at the moment, but hopefully this may point us in the right direction.

Community
  • 1
  • 1
JHizzal
  • 621
  • 2
  • 7
  • 20
  • Hi there! Thanks for your feedback. Unfortunately, link which you have provided redirects to this specific question, so I cannot refer to the thing you wanted us to read. Could you update the link href? – wopolow Nov 06 '16 at 10:45
0

I had to hack on Brackets a bit - there's no extension that'd allow the things I needed to get done in this question, nor it would be easy to do so.

LiveDevelopment/Agents/RemoteFunctions.js is the file in which changes had to be made to make color customization possible.

Currently, there is my PR hanging on Brackets Github repository which allows color customization of live preview (and allows to view margins and paddings live, however this is WIP).

https://github.com/adobe/brackets/pull/12949

wopolow
  • 365
  • 4
  • 16
  • Hi. Did you manage to find a solution to this? I've checked your github link but there doesn't seem to be any instructions on how to implement it? I personally don't have a `RemoteFunctions.js` file in my Brackets folder. I can't believe this isn't a simple on/off option in the Brackets UI?? Adobe need to be listening! :) – Ben Clarke May 12 '17 at 14:57
  • Hi. You need to clone Brackets repo and [set it up for hacking](https://github.com/adobe/brackets/wiki/How-to-Hack-on-Brackets#setting-up-your-dev-environment). If you make sure that youre up-to-date with master, then you'll have this functionality :) – wopolow May 18 '17 at 22:15
  • Wow. All of that just to add colour to a margin? Thanks for the info but that's far too advanced for me. I suppose I'll just have to wait until Adobe build this feature into the native UI, or some very clever person creates an extension for it :( – Ben Clarke May 20 '17 at 15:31