dempfi/ayu

🎨🖌 Modern Sublime Text theme

ayu is a simple theme with bright colors and comes in three versions — dark, mirage and light for all day long comfortable work.

All screenshots use wonderful Pragmata Pro font

File Icons

ayu from version 3.0.0 supports customization via A File Icon package. Please install it and restart Sublime for better experience.

Custom UI fonts

Since verion 5.0.0 monospaced fonts options were removed. But it's still possible to use your favourite font in the user interface of the theme, just follow through these simple steps:

1. Pull up command pallete via cmd/ctrl + shift + p
2. Type in Browse packages
3. Navigate to the /User folder
4. Create a file named ayu-mirage.sublime-theme to modify mirage or ayu-light.sublime-theme and ayu-dark.sublime-theme
5. Open that file in Sublime
6. Copy and paste following content:

   [
     {
       "class": "sidebar_label",
       "font.face": "PragmataPro Mono Liga"
     },
     {
       "class": "sidebar_heading",
       "font.face": "PragmataPro Mono Liga"
     },
     {
       "class": "tab_label",
       "font.face": "PragmataPro Mono Liga"
     },
     {
       "class": "label_control",
       "font.face": "PragmataPro Mono Liga"
     },
     {
       "class": "quick_panel_label",
       "font.face": "PragmataPro Mono Liga"
     },
     {
       "class": "quick_panel_path_label",
       "font.face": "PragmataPro Mono Liga"
     }
   ]

7. Replace PragmataPro Mono Liga with the font of your choice
8. Save and enjoy :)

Screenshots

Light with ui_separator option on

---

Mirage with ui_separator option off

---

Dark with ui_separator option on

Settings

"ui_native_titlebar":       true, // use native titlebars on macOs
"ui_separator":             true, // separators between panels
"ui_wide_scrollbars":       true, // wider scrollbars

---

Installation

Recommended

You can install ayu via Package Control.

1. Press cmd/ctrl + shift + p to open the command palette.
2. Type install package and press enter. Then search for ayu

Manual

1. Download the latest release, extract and rename the directory to ayu.
2. Move the directory inside your sublime /Packages directory. (Preferences > Browse packages...)

---

Activation

Recommended

Open command palette via Tools > Command Palette (or cmd/ctrl + shift + p) and type ayu: Activate theme.

With Skins package

Skins provides a simple and efficient way to change themes, save your own presets and quickly try out new looks. Activation is as simple as opening up the command palette, running Select Skin and choosing Ayu - Dark or Ayu - Light from the list.

Via Preferences

Add these lines to your user settings Preferences > Setting - User:

For light theme:

"theme": "ayu-light.sublime-theme",
"color_scheme": "Packages/ayu/ayu-light.sublime-color-scheme",

For mirage theme:

"theme": "ayu-mirage.sublime-theme",
"color_scheme": "Packages/ayu/ayu-mirage.sublime-color-scheme",

For dark theme:

"theme": "ayu-dark.sublime-theme",
"color_scheme": "Packages/ayu/ayu-dark.sublime-color-scheme",

Sublime Text 3

ayu no longer supports Sublime Text 3. But you still can download and install manually latest supported version.

Sublime Text 2

ayu no longer supports Sublime Text 2. But you still can download and install manually latest supported version.

Related projects and ports

• ayu for Ace: https://github.com/ayu-theme/ayu-ace
• ayu colors as NPM package: https://github.com/ayu-theme/ayu-colors
• ayu for VSCode: https://github.com/teabyii/vscode-ayu
• ayu for XCode: https://github.com/vburojevic/ayu-xcode-theme
• ayu for Kakoune: https://github.com/icantjuddle/ayu-kak

^{made with ❤️ by @dempfi}

ayu's Issues

python code color

Is it supposed to be like so? I mean that the code is yellow.

It is a code inside a function:

@app.route('/', methods=['POST', 'GET'])
def home():
    if request.method == 'POST':
        form = AdvertResponseForm(request.form)

        if form.validate():
            advert_response = AdvertResponse()
            form.populate_obj(advert_response)
            db.session.add(advert_response)
            db.session.commit()

Tiny scrollbar at bottom

This theme is excellent but the scrollbar tend to be super tiny and unusable. How can it be fixed?

plans for Webstorm?

Thanks for your beautiful work, do you intend to port it to webstorm?

Plans for VSCode?

Your theme is excellent, and specially the color scheme! VSCode is a great text editor but sadly there is a lack of good themes for ES6. Would be great to have yours on VSCode too. 😀

I saw the same question for Atom but I assumed that it's better for you to have separate issues for the different ports (in case you consider a VSCode port).

Special folder recognition

Please consider adding special folder recognition.
It helps to see src|dist|bin|typings|etc. having different icons, just like:

Warn/Errors from SublimeLinter

Could be warns/errors from SublimeLinter showedd in a more standar way (yellow/red)?
Actually it is showed in blue:

Nice theme!

Top tabs padding issue

First of all, this theme is so good!

But I have a little issue.
I am working with

• macOS X
• Sublime3
• ayu v1.3.1

Screenshots:

How to hidden the title bar at the top?

How to hidden or remove the title bar at the top above?

Thanks.

rename textbox almost not visible

when renaming a file, the bottom textbox is almost not visible.
here's the attachment

Tab label padding & sidebar layout.

Love this theme, particularly the light version.
Just a couple of minor issues:

• Label text on tabs is slightly too large, so certain letters get cut off.
  
• In the sidebar, the headings are not styled and the 'Open Files' heading is overlapped by the File/Edit bar above.
  

Apart from that, the theme is perfect!

Titlebar

On the screenshots there is not titlebar. Is something not working for me, or am I missing something? Are those screenshots just mockups, or there should be no title bar after I activate the theme? I don't know how to get rid of the titlebar because without it it looks so much nicer :(

Provide setting to use another UI font

Hey thanks for the nice work on the theme.

I’m not a big fan of Roboto and would prefer to use Input for example. Is there a way that you can provide a setting for that? :)

Make a atom version!

First, this theme is amazing, please make an Atom version, or someone please fork it. Thank you.

Plans for terminal?

Active tab close button looks like the dirty tab indicator

Hey,

I think it would be better if the close button of the active tab has the same color as the other close buttons because I get always confused if I saved my file already.

No icons in the sidebar

Hey, I just installed the theme and unfortunately it doesn't look like the icons in the sidebar are showing:

As you can see it looks quite different from the screenshot in the README:

These are my settings:

I'm on Windows 10, running Sublime Text 3 Stable build 3126.

How can I make my Sublime look more like the screenshot in the README?

Change selection text color?

Is there a way to change the selection text color? I can change the background color, but not the text color. Maybe this isn't possible with Sublime Text.

Tab Text is Illegible

I am on Win10, the tab text is very faint and with the 2.0 upgrade almost looks like a drop shadow is being applied...

Display issue when renaming a file

Hello,

I'm using Ayu mirage theme on my sublime text installation, and I have noticed a little issue but quite annoying. When you try to rename a file, the bar at the bottom when you specify the new file name is half-hidden behind the status bar of sublime text.

Here is a screenshot to illustrate the issue:

My sublime text configuration is pretty straightforward, here it is in case you need it:

{
	"always_show_minimap_viewport": true,
	"bold_folder_labels": true,
	"color_scheme": "Packages/ayu/ayu-mirage.tmTheme",
	"font_size": 12,
	"ignored_packages":
	[
		"Vintage"
	],
	"indent_guide_options":
	[
		"draw_normal",
		"draw_active"
	],
	"line_padding_bottom": 3,
	"line_padding_top": 3,
	"overlay_scroll_bars": "enabled",
	"skin": "ayu/ayu mirage",
	"theme": "ayu-mirage.sublime-theme"
}

Let me know if you need any other information.

Files not found after Upgrade

Sublime revoked my color scheme saying that .tmTheme and .sublime-theme files not found after the Package was upgraded.

Inactive tabs are hard to see

It is hard to see inactive tabs, how can i tweak the color ?

• Sublime 3 x64 (latest beta)
• Ubuntu 16.04 x64
• Dark theme

Tab padding

Can you add property like "ui_separator" for bigger tabs (tabs with bigger padding)?

Publish the colors to npm?

Hey,

would be great if you could do a package with all the colors included and publish it to npm like @yeun does it with https://github.com/yeun/open-color. I would love to use the colors on my website if this is not a problem for you.

How to remove OS X border/menu-bar

How did you get rid of the grey OS X menu bar?

Here's how it looks for me right now:

New folder/rename file don't show the whole input

with or without "ui_separator": true,

I git cloned the repo to test this.

Plans for Atom?

Would be great to have this on Atom too.

Unreadable tab label under Linux HiDPI

Hello,

Thank you for creating this theme! I've been enjoying it a lot since installed!

It seems that recently there has been an update that is affecting how tab labels are rendered. I've only tested Linux (Ubuntu) with a HiDPI screen:

Both active an inactive tabs shows the same issue.

This might be related to #28 since was working yesterday without issues.

• Sublime Text 3, Dev Channel build 3125
• Ubuntu GNOME 15.10 x64
• Roboto Mono font installed

Settings:

{
    "color_scheme": "Packages/ayu/ayu.tmTheme",
    "theme": "ayu.sublime-theme"
}

Let me know any other information that might help out debugging this issue.

Thank you
❤️ ❤️ ❤️

Command palette icon warped

As you can see in the screenshot, the magnifying glass icon is warped into a squished shape on the x axis. I have restarted ST3.

Information:
ST3 Dev channel build 3125
Windows 10
3440x1440 display (perhaps aspect ratio matters, idk)

I'm also using this theme on ST3 on a macbook pro, but not on a dev build. The icon looks fine there. Not sure if it's because of the OS, screen resolution or ST3 version difference.

Color Scheme Error

Hi.

I followed the manual install method.
Copied the files,
edited the preferences as the following

{
    "font_size": 12,
    "theme": "ayu2.sublime-theme"
    "color_scheme": "Packages/ayu/ayu.tmTheme"
}

But I get the following error.

Help?

Sidebar Label Margin Error

First off: amazing theme! Really nice and clean.

I found after installing Ayu today that in the sidebar, the "Open Files" label at the top was being cut off, as if there was a negative margin. using PRV I went into the themes options, and in both ayu.sublime-theme and ayu-light.sublime-theme and found the setting for this on line 515 and 522:

"content_margin": [0, -10, 0, 0],

After setting the -10 to 0 or 10, the label behaved as predicted and wasn't getting cut off. I wasn't sure if this was a by design setting or a behavior based off of the system you're working on.

A different default color besides straight black for the sidebar labels would also be a suggestion for the dark theme.

Console print out from events.py

As the console print out from events.py doesn't include the package name and I generally prefer status bar feedback, I suggest changing the code to:

--- events.py
+++ events.py
@@ -4,22 +4,25 @@
 package_name = 'ayu'


+def status_msg(msg):
+    sublime.status_message(package_name + ': ' + msg)
+
 def plugin_loaded():
     from package_control import events

     if events.install(package_name):
-        print('Installed %s' % events.install(package_name))
+        status_msg('Installed %s' % events.install(package_name))
     elif events.post_upgrade(package_name):
-        print('Upgraded to %s' % events.post_upgrade(package_name))
+        status_msg('Upgraded to %s' % events.post_upgrade(package_name))


 def plugin_unloaded():
     from package_control import events

     if events.pre_upgrade(package_name):
-        print('Upgrading from %s' % events.pre_upgrade(package_name))
+        status_msg('Upgrading from %s' % events.pre_upgrade(package_name))
     elif events.remove(package_name):
-        print('Removing %s' % events.remove(package_name))
+        status_msg('Removing %s' % events.remove(package_name))


 # Compat with ST2

or maybe you want to keep the print but add the package name:

--- events.py
+++ events.py
@@ -4,22 +4,25 @@
 package_name = 'ayu'


+def print_msg(msg):
+    print(package_name + ': ' + msg)
+
 def plugin_loaded():
     from package_control import events

     if events.install(package_name):
-        print('Installed %s' % events.install(package_name))
+        print_msg('Installed %s' % events.install(package_name))
     elif events.post_upgrade(package_name):
-        print('Upgraded to %s' % events.post_upgrade(package_name))
+        print_msg('Upgraded to %s' % events.post_upgrade(package_name))


 def plugin_unloaded():
     from package_control import events

     if events.pre_upgrade(package_name):
-        print('Upgrading from %s' % events.pre_upgrade(package_name))
+        print_msg('Upgrading from %s' % events.pre_upgrade(package_name))
     elif events.remove(package_name):
-        print('Removing %s' % events.remove(package_name))
+        print_msg('Removing %s' % events.remove(package_name))


 # Compat with ST2

Parens of function calls with arguments looks different then without arguments in JavaScript (Babel)

They should have probably the same color. 🤔

Srollbar width?

Hi, I like your theme but the width of the scrollbar is waaaaay to small. How can I increase it?

"New folder" tab is overflowed

I am using:

• macOS X
• Sublime3
• ayu v1.3.1

Settings:

    "color_scheme": "Packages/ayu/ayu.tmTheme",
    "font_size": 16,
    "theme": "ayu.sublime-theme",
    "ui_font_size_small": false,
    "ui_separator": false

I have also git plugin installed.

Here's the screenshot:

Theme labels text error

With the release of Ayu 2.0, the theme labels (not scheme) are all messed up. The screenshots below demonstrates what I've been able to reproduce on Windows 10 and CentOS 7. Also, did you remove the labels from the sidebar (by matching the color to the background)?

Sidenote: Coming from Agila, the Ayu-Mirage theme is much appreciated!

new folder name input does not display properly

On Mac

Theme applying only on the settings page (body)

Settings as follow:

{
    "theme": "ayu.sublime-theme",
    "color_scheme": "Packages/ayu/ayu.tmTheme",
    "ui_separator":       true, // separators between panels
    "ui_font_size_small": true, // smaller UI font size(sidebar, statusbar etc)
    "detect_indentation": false,
    "font_size": 11,
    "ignored_packages":
    [
        "Package Control",
        "Vintage"
    ],
    "tab_size": 4,
    "translate_tabs_to_spaces": true
}

Folder has been renamed. Sublime 3.

Hide macOS Top Bar

Hey,

in you screenshots (https://camo.githubusercontent.com/fb5f7fda1b259389eff3674449772fee34a5af5f/687474703a2f2f692e696d6775722e636f6d2f30434c493344482e706e67) there is no macOS window top bar. Are these screenshots faked or is there a way to hide this top window bar?

Thank you,
Martin

Tabs' text is getting cut off

The text in the tab bar is a little cut off:

Sublime 2 compatibility

Normal

With ayu

Should note that it isn't compatible with Sublime 2.

Ayu is overlapping AdvancedNewFile

Hey,

I just noticed that Ayu is overlapping the Advanced​New​File dialog. I think it's a problem with Ayu because with the default theme AdvancedNewFile is not hidden. If that's not a problem with Ayu I am happy to file an issue at AdvancedNewFile

Plans for vim?

Replace not visible

The replace field for all files is not visible. See screenshot

Only "body" changed to the theme

Using latest Sublime 3 on Ubuntu 14.04LTS

My settings

{
    "always_show_minimap_viewport": true,
    "animation_enabled": false,
    "binary_file_patterns":
    [
        "*.min.js",
        "*jquery*.js"
    ],
    "bold_folder_labels": true,
    "color_scheme": "Packages/ayu/ayu.tmTheme",
    "draw_minimap_border": true,
    "ensure_newline_at_eof_on_save": true,
    "file_exclude_patterns":
    [
        "*.pyc",
        "*.pyo",
        "*.exe",
        "*.dll",
        "*.obj",
        "*.o",
        "*.a",
        "*.lib",
        "*.so",
        "*.dylib",
        "*.ncb",
        "*.sdf",
        "*.suo",
        "*.pdb",
        "*.idb",
        ".DS_Store",
        "*.class",
        "*.psd",
        "*.db",
        "*.sublime-workspace",
        "*.log"
    ],
    "folder_exclude_patterns":
    [
        ".svn",
        ".git",
        ".hg",
        "CVS",
        "tmp",
        "coverage",
        "public/assets"
    ],
    "font_size": 12,
    "highlight_line": true,
    "highlight_modified_tabs": true,
    "ignored_packages":
    [
        "SublimeLinter",
        "Vintage"
    ],
    "index_exclude_patterns":
    [
        "*.log"
    ],
    "index_files": true,
    "index_workers": 2,
    "match_brackets_angle": true,
    "scroll_speed": 10.0,
    "show_encoding": true,
    "show_line_endings": true,
    "tab_size": 2,
    "translate_tabs_to_spaces": true,
    "tree_animation_enabled": false,
    "trim_trailing_white_space_on_save": true
}

Overlapping statusbar

The status bar is overlapping on Linux, ST Build 3126:

Maybe related to #4?

Awesome theme, btw.

Side Bar bug

Open files (or Folders when Open files are disabled) are overlapping with menu bar on Linux. Same when menu bar is hidden.

Problems with latest macOS sierra BETA + Sublime DEV channel

sorry to bother, have some problems installing the theme.

• Sublime: 3125
• macOS: 16B2338c

what it looks like when activating:

from the console:

error: Error loading colour scheme Packages/ayu/widgets/Widget - ayu.stTheme: Unable to open Packages/ayu/widgets/Widget - ayu.stTheme

maybe it's my mistake? Sublime configuration?

File Link Colors

I have to say I love the colors for the code side. However, sidebar and tab links are real hard to read. How can I edit them to lighten them up more against the background?
Note that the hover and active "white" is great and easy to read.

Icon is not centered