Plans for Atom?

[vilav]

Would be great to have this on Atom too.

[dempfi]

Yeah, I definitely will make a port for atom, but need more time to stabilize the sublime version.

[yduman]

Also a port for VS Code? Would really appreciate it!

[dempfi]

@yduman there is separate topic for VSCode https://github.com/dempfi/ayu/issues/10

[xpol]

:+1:

[lednhatkhanh]

+1 for a Atom port, thank you!

[MarcPorciuncula]

Temporarily, you can use atom's built in theme converter to turn the ayu textmate theme into an atom syntax theme.

Instructions:

1. clone the repo somewhere: open your terminal and run git clone https://github.com/dempfi/ayu.git
2. move into the repo cd ayu
3. make the conversion apm init --theme ayu-atom-converted --convert ./ayu.tmTheme This will create a directory inside the ayu repo called ayu-atom-converted
4. move into the atom theme folder cd ayu-atom-converted
5. link the folder to apm so atom can find it apm link
6. Launch atom and choose the ayu-atom-converted syntax theme

Don't forget to also install Roboto Mono. And if you want the light version of ayu, simply replace ayu.tmTheme with ayu-light.tmTheme.

Note this is only converts the syntax highlighting and color scheme, the UI theme has to be converted manually. For now, I'm using it with atom-material-ui.

You can also get Roboto Mono in your tree view, tabs, command palette, and tool panels by adding these styles to your styles.less.

.tab-bar .tab,
atom-panel {
  font-family: "Roboto Mono";
}

(edit: fix deprecated selectors)

[dbkaplun]

@MarcoThePoro can we get a screenshot?

[malonehedges]

@dbkaplun Here's what I have going:

[MarcPorciuncula]

@malonehedges You beat me to it! @dbkaplun here's the light version Atom Material UI lets you choose your accent colour btw, which affects the color of your scroll bar etc. (For some reason the invisibles are red when you convert the light version but it's less of a problem if you don't show invisibles anyway)

[lednhatkhanh]

This is my setup, I use Noto for tree view and Courier Prime Code for syntax fonts. UI is Nucleus Dark, very nice!

[lednhatkhanh]

But there are 2 deprecations with this port, I think we still need to wait for the owner to port the theme.

[MarcPorciuncula]

I don't think the first deprecation warning is from the theme. It's a deprecated javascript call, but the generated themes only have styling, no scripts, and none of them affect the position property of any elements. The second warning is my bad, I just used deprecated selectors. If you go to your styles.css and change it to this the deprecation should be gone.

.tab-bar .tab,
atom-panel {
  font-family: "Roboto Mono";
}

You're still right that the best solution is a proper port, as there are other issues like invisibles being coloured red in the light theme.

[zmts]

+1) For a Atom port

[dempfi]

Hi everyone. I started from the very beginning, from an organization https://github.com/ayu-theme. So the rough plan is next:

• [x] Light syntax
  • [x] Fix automated port issue (e.g. in screenshot shared by @MarcoThePoro)
• [ ] Dark syntax
• [ ] UI
  • [ ] Design
  • [ ] Development

Hopefully will get something to test in near feature.

[lednhatkhanh]

Awesome, thank you.

[wI2L]

Just fall in love with your theme, and I happilly see that you are working on a port for Atom ! Will be my next definitive theme to work with. Thank you very much for this excellent work.

[t2]

Any news here? Would still love to have this for Atom.

[licatajustin]

@t2, for a temporary solution, a gentleman ported over the Sublime theme to Atom. It mixes well with the Atom Material UI Theme.

https://atom.io/themes/ayu

[t2]

Thanks @licatajustin! The Atom Material UI theme is pretty bad though. Too clunky. Really like the minimalism of the Sublime Theme shots in the README.

[licatajustin]

Agreed for the default settings they give you. You can change some of the presets though, and it makes a world of difference.

For example:

• Compact tab bar: enable
• Compact tree view: enable
• Contrasting panels: enable

If you update these presets, it'll look more like the shots in the README.

[JWesorick]

Is this still happening? Any update on when it might happen?

[skbolton]

@dempfi I am willing to help on this if you would like?

[FNGR2911]

@malonehedges Thank you for your instructions! How do you got just the title bar in orange? I just get the effect if I colorize the tab bar too ;)

thank you!

[licatajustin]

@FNGR2911

Settings > Core > Title Bar > Custom.

[iam4x]

Made my own "custom" stylesheet to match ayu mirage theme

How-to:

• Use Atom Material theme
• Use Atom Dark Fusion syntax

These are the options of atom material theme:

And then use this custom stylesheet for Atom:

// TREE VIEW CUSTOM STYLES
// -----------------------
.list-group li:not(.list-nested-item), .list-tree li:not(.list-nested-item), .list-group li.list-nested-item > .list-item, .list-tree li.list-nested-item > .list-item {
  line-height: 25px;
}

.list-tree.has-collapsable-children .list-nested-item > .list-tree > li, .list-tree.has-collapsable-children .list-nested-item > .list-group > li {
  padding-left: 14px;
}

.list-group .selected::before, .list-tree .selected::before {
  height: 24px;
}

.list-group .icon::before, .list-tree .icon::before {
  margin-right: 0.5em;
}

// `;` opacity
// -----------
.syntax--punctuation.syntax--terminator.syntax--statement.syntax--js {
  color: #FFF;
  opacity: .3;
}

// ayu theme custom
// ----------------
.title,
.tree-view,
atom-panel-container.footer {
  font-family: 'Roboto Mono', monospace;
}

atom-text-editor,
.scroll-view,
.gutter,
.tree-view {
  background: #212733 !important;
}

.tree-view {
  padding-left: 10px;
  padding-top: 10px;
  z-index: 0;
}

li.list-nested-item.status-ignored > .list-item > span {
  color: #3e4b59 !important;
}

li.list-nested-item.collapsed:not(.status-ignored) > .list-item > span {
  color: #607080 !important;
}

li.list-nested-item:not(.collapsed) > .list-item > span,
li.list-item.selected > span {
  color: #ffffff !important;

  &::before {
    color: #ffcc66;
  }
}

li.list-item.selected::before {
  border-left: 3px solid #ffcc66;
}

.amu-tinted-tab-bar .tab-bar .tab.active::after {
  background: #ffcd5d;
}

.editor .cursor {
  border-left-width: 2px;
  border-color: #ffcd5d !important;
}

.tab-bar .tab:not(.active) {
  color: #607080;

  .title[data-path].icon::before {
    color: #607080 !important;
  }
}

// color syntax customization
// --------------------------
.syntax--keyword.syntax--control.syntax--module.syntax--js,
.syntax--storage.syntax--type,
.syntax--support.syntax--class {
  color: #ffcd5d;
}

.syntax--punctuation.syntax--definition.syntax--string.syntax--begin,
.syntax--punctuation.syntax--definition.syntax--string.syntax--end,
.syntax--string.syntax--unquoted.syntax--js,
.syntax--string {
  color: #bae67e;
}

.syntax--entity.syntax--name.syntax--function,
.syntax--variable.syntax--other.syntax--constant {
  color: #ffd580;
}

.syntax--variable.syntax--this,
.syntax--variable.syntax--super {
  color: #5ccfe6;
  font-style: italic;
}

.syntax--meta.syntax--class,
.syntax--console {
  color: #5ccfe6;
}

.syntax--constant {
  color: #d4bfff;
}

.syntax--string.syntax--regexp {
  color: #95e6cb !important;
}

.syntax--punctuation.syntax--key-value,
.syntax--variable.syntax--other.syntax--readwrite,
.syntax--variable.syntax--other.syntax--property,
.syntax--variable.syntax--other.syntax--object {
  color: #d9d7ce;
}

.syntax--comment {
  color: #5c6773;
}

.modal.overlay.from-top {
  background-color: #272d38;
  font-family: 'Roboto Mono', monospace;
  top: 25%;
  width: 700px;

  atom-text-editor .scroll-view {
    font-size: 1.3em;
    background: #272d38 !important;
  }

  .fuzzy-finder .primary-line {
    font-size: 1.3em;

    &::before {
      font-size: 1em;
    }

    .character-match {
      color: #ffd580;
    }
  }

  li.selected {
    background-color: #343f4c;
    border-left: 2px solid #ffd580;
  }
}

I will do a package or theme/syntax at some point, this is my first try 👍

[wI2L]

@iam4x Nice work ! If you go forward and create your own theme around that, I'd love to see the adaptation of the black theme as well.