Atom Packages Directory

a package directory for a text editor of the 21st Century

Yoceanic Next Syntax

Install with:
    apm install yoceanic-next-syntax
  

Yoceanic Next Syntax Theme

For Best Results

Firstly, this colourful theme is optimized for atom’s language-babel, JavaScript syntax highlighter. Now for the big question..

“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:

Design Consistency

These days we write JavaScript in our HTML (Angular), HTML in our JavasScript (JSX), CSS in either, and anything in between. The experience from jumping in and out of HTML templates or React components should be seamless. Syntax highlighting is really a powerful tool and so the colours should express the intent or behavior of your code. Enough of the theory… just let me some examples already, right!

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.

A screenshot of your theme

CSS & JS - Primitives such as strings and numbers are consistent. This is most obvious when creating stylesheets for React Native apps.

A screenshot of your theme

White Space

“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).

A screenshot of your theme

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?

Keywords: syntax, theme Suggest keywords
Fork me on GitHub