Yoceanic Next Syntax
apm install yoceanic-next-syntax
Yoceanic Next Syntax Theme
For Best Results
“Why another oceanic next theme?”
A Visual Language of Sorts
Two reasons, design consistency and white space. I think the design and implementation of the ocean next theme for ES6 is great! Especially the colour palette.
However there is two areas I wanted to extend:
HTML (top) & JSX (bottom) - The experience of writing HTML or JSX is the same. Now this isn’t a new concept to the oceanic next theme, as the current port of the theme to atom currently does this. Where yoceanic differs becomes apparent in the next example.
CSS & JS - Primitives such as strings and numbers are consistent. This is most obvious when creating stylesheets for React Native apps.
“If everything is important, nothing is important”. I think this rings true especially when it comes to syntax highlighting. The less colour is used, the more meaning and importance a subject has when it is highlighted. I really try to use no colour where possible. Now this sounds counterintuitive, but look at the next screenshot.
Here is a comparison of oceanic next (top) compared to this theme, yoceanic next (bottom).
By embracing the plain nature of the colour white, you can now more effectively parse through the JSX in this example.
this, methods, attributes, numbers, strings, components
All these elements that make up the html or jsx have a single responsibility. For example, I can quickly find every instance of the keyword
this because it is the only word highlighted in red. Same goes for
methods, only words highlighted in blue are methods being called. This is really a methodology that is consistent throughout the theme.
What’s Next for Yoceanic?
- Thoroughly test the theme with all features of Sass and Less. Continue using it with React and Angular to make sure it works as expected.
- Abstract a lot of the syntax keywords into Less variables so that aspects of this theme can be easily overwritten by the you, the atom user.