I know this may sound lame, but I’ve been using Dreamweaver for years and kinda got used to the colour scheme of the code editor. Anyway, it’s got too expensive now, so just started using Atom. Does anyone know if there is a syntax theme that matches the code colour scheme of dreamweaver?
I took a look and couldn’t find anything. I would recommend looking through packages and see if something else fits to your liking. Good luck.
Is it easy to modify styles in a theme? I’m thinking I can find one that is close and tweak it. Are there help guides here for creating syntax styles? I’m a newbie but I don’t want to spend too much time on this, got work to do!
As long as know CSS it’s quite easy indeed. Just inspect the editor to find the proper scope to tweak and add a rule for that in you user stylesheet.
Building a whole syntax theme, OTOH, is much more complex as it involves testing it across several grammars to make sure that the theme works well in all cases.
I do know css very well. So I’ve found a theme that is close to what I want, and installed it. Where do I find those .less files and tweak the colours to what I want? Are syntax theme files located locally or are they referenced online when Atom is loaded?
It’s ok, I found the theme files. ~/.atom/packages
I would rather use my user stylesheet for that purpose (search
Application: Open Your Stylesheet command in the command palette).
And make sure to wrap all your rules into a
atom-text-editor, atom-text-editor::shadow rule to make sure it targets the content of the text editor even when shadow DOM is enabled.
Thanks Abe! Just having a fiddle with it at the moment, playing around with the css and getting pretty satisfactory results so far.
Just one snag, how do I target specific parts of code? I notice you can nest styles in the .less files but, for example, how would I change the colour of
?> as this was bright red in dreamweaver making it really easy to spot. I see that I can change all php code colour using .php but can’t find a way to target those particular bits. Any ideas?
Using the devtools inspector you’ll be able to spot the scope of the token you want to tweak and then deduce the selector to use:
That’s awesome Abe! I didn’t realise there was an inspector built in. It’s so easy!
There is also the
Editor: Log Cursor Scopes command that, in my opinion, is even easier than the devtools inspector.
Except that with only the scope you won’t be able to see how your current syntax theme targets a token, and you may end up writing a rule that is not specific enough to override the syntax theme. But scope at cursor is indeed handy.
@Biff - What was the theme , have you completed your theme to the extent I could have a copy please?
@philshotton The syntax theme I used as a base was called Fizzy (used with ‘One Light’ UI theme). I made a few updates to my version and saved locally. I would happily share it with you, but can’t upload it with this message.
Might be worth deleting your email address from this public forum now!
Would I be able to get a copy of your modified theme also?
Well send me one too please: