Oceanic Next Color Scheme

Sublime Text 2/3 color scheme ready for ES6/ES7 and optimized for babel-sublime package.

import React from 'react';

// This is comment...
class MyComponent extends React.Component {
    constructor() {

        this.state = {
            title: 'World'

    componentDidMount() {
        console.log('MyComponent is mounted!');

    clickHandler(title) {
        this.setState({ title });

    render() {
        let { title } = this.state;

        return (
                <h1>Hello, {title}!</h1>
                <button onClick={() => this.clickHandler('React')}>
                    Change title

export default MyComponent;


Color scheme highlights syntax properly for:


You can use Package Control or just manually get latest version of Oceanic Next from GitHub and move Oceanic Next.tmTheme file into /Packages/User directory (path depends on your OS). Then select it from Preferences -> Color Scheme -> User.
Important note: You need to have JavaScript (Babel) syntax definitions from babel-sublime package enabled in order to have all new features highlighted properly!

Color Palette

There is a list of colors used in Oceanic Next:
Check them before porting the color scheme to another environments.

Other Environments

Oceanic Next was already ported to:

Companion UI Themes

There are several Sublime UI themes that look nice with Oceanic Next:
If you have more themes to share join the discussion in this GitHub thread.


Since its' creation Oceanic Next was adopted by a lot of developers including such rockstars as Sebastian McKenzie, Paul Irish and Dan Abramov that popularized it across community since the day one.
Thanks everybody for appreciation and tweets! If you have any question or proposal please raise an issue!
Fork on Github