Additional theme color choices

I’m building a Nova theme to match the styling of another machine, which uses a different IDE. The ability to do the following things would be great:

  • Style brackets within quoted text differently from brackets that are part of code logic.
  • Style parentheses (, brackets [, and braces { differently.
  • Style numbers and operators within quoted text differently from numbers and operators that are part of code logic.
  • Still show the color swatch next to colors, but disable the color picker pop-up, since it gets in the way of typing, and I already have my company’s brand colors in mind, so I don’t need to pick from thousands.

Perhaps these things are already possible, and I just haven’t figured out how to do them. So if these features exist, please excuse my ignorance and let me know how to accomplish these things.

Hmm, perhaps it isn’t that obvious, but in Nova (as well as many other code editors and some IDEs) there is a clear separation between ‘theme’ (what colour palette is available) and ‘syntax highlighting’ (i.e. identifying all keywords, assigning meaning to the symbols/letter sequences, figure out the difference between ‘third-party extensions’ and official ones, and so forth).

Unless I totally misunderstand your question, what you wish is basically to change your programming language’s features so that things are rendered differently, i.e. making a clear separation between (, { and [ for instance, as opposed to grouping them all together in the over-arching classification of, well, ‘brackets’.

This can certainly be done, of course, since you can pretty much install your own programming language syntax highlighter. A few — like the one you appear to be using for CSS — are pre-installed and are maintained by Panic themselves (e.g. HTML, CSS, PHP, and a few more). Nevertheless, the language files are stored in your system, and they can be copied, modified, and added (with a slightly different name, of course) as a new ‘extension’.

You can take a look at how Panic does the CSS formatting by taking a look at their own CSS extension. It is located on /Applications/Nova.app/Contents/SharedSupport/Extensions/CSS.novaextension. Be carefulnever edit these files manually, since they’re cryptographically signed with Nova’s and Apple’s keys, and the slightest change will obviously break the digital signature, and immediately make macOS quarantine the entire application!

Instead, make a copy of that folder, and place it within your own user’s home directory, such as, say, ~/Developer/. The first thing to do is to change the folder’s name to something different (so that there are no conflicts), e.g. myCSS.novaextension. Then you can actually launch Nova, point it to that directory, and activate/deactivate it as an extension (while you’re testing it out and making changes). I believe it will ask you on the first time if it should open the directory as an extension — say ‘no’, since you want to change it first. Subsequently, when you wish to try out your changes, you need to go to the top menu and pick Extensions > Activate/Deactivate Project as Extension every time you’re ready to test out your work.

That’s for CSS, of course, but you’ll need to do the same for every other language you wish to change.

The only thing that, at the time of writing, doesn’t seem to be obvious to do is to disable the color picker pop-up programatically. The only options I can see are on the Preferences pane, under the first tab (Display), where there (currently) are just two possible options for the Color Previews: Show in Gutter Show in Editor.

Well, since these are checkboxes, you actually have 4 options :slight_smile: But, for instance, you might just have the colour displaying on the gutter, where it won’t interfere with your typing.

If you most definitely want the coloured square next to the hex number, and if you just have a few colours which are your corporate colours, you could, alternatively, create a new Swatch with just the 2-3 colours you need. This is done from the Color Previews Editor itself. You may have noticed that you have two tabs, one for ‘Picker’, another for ‘Swatches’. Under Swatches you’re able to add your own — with just the handful of colours you need — instead of ‘thousands’. Nova will remember the choice you made, and the next time it pops up, it will go straight to the Picker and keep your chosen Swatch active.

Beyond that… well, ‘hacking’ the actual UI is certainly possible in Nova (with a few limitations!), and is achieved programmatically, but I humbly admit that I have never seriously used the JavaScript API for that.

Since you’ve been left clueless for a week, the best I can do is to give you some pointers.

First, take a good read at the many packages that include the ‘Color’ word in them — all of these contribute, to an extent, to dealing with colours on the text, from detecting a specific pattern that should be recognised as a valid colour, to assigning an object to such a colour, so that it can be used from different parts of the code, to actually launch a pop-up (CompletionColorPop()) to give the user a chance to visually pick a colour they want.

To see these in action, you can take a look at the actual JS used by the CSS Nova extension; for instance, open ../myCSS.novaextension/Scripts/Completions.js, where you should have a call to CompletionColorPop() around line 44 or so. This is where you start to hacking into the UI itself!

… sadly, though, it’s also where I cannot help you further :frowning: since I’m ignorant about all those vast possibilities of changing the UI and tweak it to do whatever you wish.

Oh, BTW, I don’t know if it was obvious that you will need to change the code not only on the CSS extension, but rather on all other extensions, for whatever programming language you usually work with. Also, it means maintaining all those extensions on your own — the original ones will get updated from time to time, so you’ll have to adapt yours to continue to work with whatever the latest & greatest changes that Nova has introduced in whatever future version they launch…

I hope this is somewhat helpful to you and I wish you good luck!

1 Like

I believe these are all possible, not sure about the color popup.

Your ability to style different parts of a code’s syntax is dependent on which code syntax and syntax definition you are using. For example the Javascript syntax definition that comes with Nova does distinguish between (, [, and {. But it doesn’t do it based on character, it does it based on which part of the language syntax the character represents. You can inspect the character’s syntax scope by choosing Editor → Syntax Inspector and hovering over a character.

For example ( has the scope javascript.arguments, [ has the scope javascript.collection.array, and { has the scope javascript.object-literal if you’re defining an object, or javascript.definition.function if you’re defining a function.

To style them differently, you would use those scopes as CSS selectors in your syntax theme and give each scope a different color.

Anything inside a quoted string has the scope javascript.string, and any parenthesis or brackets inside the string are not distinguished with their own scope, therefore you can’t style them individually. However if you make your own syntax definition, then you can specify that each of those characters when inside a string should each get their own scope, and then you’d be able to style those scopes.

So it would require that you make your own custom syntax definition and custom syntax theme. It is possible to inherit from an existing syntax definition and just add your modifications on top of it.

1 Like