Updated color schemes

[dempfi]

In this PR:

• Use ayu colours from dedicated package;
• Updated syntax colours to match those of recent versions in sublime theme;
• Updated ui colours to reduce contrast of unimportant parts (divider lines, activity bar icons) and improve focus on editor;

[dempfi]

@teabyii, @pahen guys I would appreciate if you would be able to test these updates and provide feedback. I think some changes might be controversial (e.g. removal of some borders).

[pahen]

Great work! :D Looks awesome! I'll give it a try!

[designorant]

This looks amazing, particularly that bright search/selection border.

For those who want to test this version now:

On the command line:

git clone https://github.com/teabyii/vscode-ayu.git
cd vscode-ayu
git fetch origin pull/60/head:updated-colors
git checkout updated-colors
npm install
npm run build
npm run package

Then, in VSCode:

Extensions > ... > Install from VSIX... > Reload

[pahen]

I tried it now and I really like the changes so far :) Note that you can use tab.activeBorderTop and tab.unfocusedActiveBorderTop instead of tab.activeBorder and tab.unfocusedActiveBorder to get the border on the top of the tab like the sublime theme.

[posthardcode]

Looking pretty good, great job! When you have a chance, can you also make Python methods and dots similar to ST (bottom image)?

[dempfi]

@nscmnto fixed :)

[skbolton]

Can we get rid of the underline for js classes? I don't remember that being in the sublime version but I could be wrong

[skbolton]

Also it would be nice to get more of the reddish orange colors in to match the sublime version. I initially was doing some work on this and have screenshots at #34 highlighting a sublime/vscode comparison that I was working on

[posthardcode]

@dempfi perfect, thanks!

[dempfi]

@skbolton I've fixed underline issue. Not sure what you mean by more "reddish orange colours". Could you please elaborate on that?

[dempfi]

@pahen, @teabyii what is your experience so far guys? Any issues to fix?

[designorant]

I have been using it with JavaScript and React, and find all the tweaks made in this PR sublime. Thank you @dempfi!

[pahen]

I think all changes are very nice :) I'm also using it mostly for React. The only thing I would like to change is to move the tab border to the top instead of the bottom. The original theme looks like that now right? @dempfi

[designorant]

Spoke too soon, just spotted a case with unnecessary italics:

stories.add("Default", () => {
  Object.keys(endpoints).forEach(label => {
    console.log(label);
  });

  const location = boolean("Empty location", false)
    ? null
    : encodeURIComponent(
        select(
          "Content endpoints",
          Object.keys(endpoints),
          Object.keys(endpoints)[0]
        )
      );

  return (
    <AjaxContent
      location={location}
      loadingContent={<Block text="loading..." />}
      failedContent={<Block text="failed to retrieve content" />}
    >
      <Block text="default content" />
    </AjaxContent>
  );
});

[teabyii]

I have tried this version, it looks very good to me. Nice job.
What about the italics @designorant mentioned, and the tab.activeBorderTop @pahen mentioned?

[skbolton]

sorry @dempfi here is a screen shot talking about the reddish orange color. This screenshot is from sublime text the mirage theme. I am referencing the require statement color. In your update this color is showing up more often but hasn't shown up yet for require/imports like it does in sublime. Thanks for updating this repo btw!

[skbolton]

@dempfi sorry I feel like I am being the pickiest person on this thread. I can also help on any of this and not just put it on you.
Anyway can we get the activity indicators to be one of the theme colors to help them pop more?

[pahen]

We should probably update titleBar.activeForeground to use the same colors as the sublime theme too @dempfi :)

VSCode:

Sublime:

[dempfi]

@skbolton regarding activity bar. I think theme accent colours will make them too contrasty compared to the editor.

Regarding red color, I think we already have more of it, perhaps some improvements can be done specific to some languages in future updates;

[dempfi]

@pahen fixed title bar foreground. I tried active top border but that didn't look good with breadcrumbs and borders. Bordering in this theme is a halfbreed between full border (active top border) and no borders (active bottom border) versions so there are some UI stuff that doesn't work like in sublime.

@designorant fixed italics

[dempfi]

@pahen, @teabyii guys, if there are no big issues with latest updates, what do you think about merging this PR?

[teabyii]

Done, I will release a new version soon.

[pahen]

Thanks for awesome improvements! @dempfi