arvi / agila-theme

A Sublime Text 3 UI Theme

Agila Theme

A Sublime Text 3 UI Theme

Couldn't find a theme I really dig, so I tried to make my own theme based on all the things/elements I like from wonderful themes I've used before. :)

---

Screenshots

Screenshots below are based on the default starting point of all Agila Themes wherein Font face: Inconsolata | Font size: 21*.

You can customize the UI to your liking (e.g camouflage workspace with the color scheme background, sidebar, tab, autocomplete, and scrollbar setup/color preferences) by referring to the "Settings" section of this documentation. Enjoy! :)

Agila Theme

Agila Origin Theme

Agila Dracula Theme

Agila Monokai Theme

Agila Cobalt Theme

Agila Classic Theme

Agila Light Theme

Agila Neon Theme

---

How to Install

Chill way

via Package Control, where Agila is listed as Agila Theme.

1. Open Command Palette using menu item Tools > Command Palette... or CMD/CTRL + SHIFT + P
2. Choose Package Control: Install Package
3. Find Agila Theme and hit Enter

Woooo way

via installing the theme manually.

1. Download the latest release .zip
2. Unzip and rename folder to Agila Theme.
3. Move Agila Theme folder inside the Packages directory (Preferences > Browse packages...)

---

Themes

Agila themes include Markdown syntax highlighting provided you have Markdown Extended package installed.

Activation

Chill way via Skins

Skins provides an easy way to manage your themes for Sublime Text 3. Run its Select Skin command from the Command Palette Tools > Command Palette... or CMD/CTRL + SHIFT + P and choose any of the various Agila theme variants from the list. No extra steps for activating Markdown syntax highlighting based on selected theme.

Woooo way

via User Preferences file (Sublime Text > Preferences > Settings - User). After setting up, don't forget to restart Sublime Text Editor for changes to take effect.

To also enable Markdown syntax highlighting based on selected theme:

1. Open a Markdown file
2. Go to Preferences > Settings - Syntax Specific and change color_scheme value based on the last color_scheme setting specific to theme below.

Default theme

"theme": "Agila.sublime-theme",
"color_scheme": "Packages/Agila Theme/Agila Oceanic Next.tmTheme",

"color_scheme": "Packages/Agila Theme/Markdown/Oceanic Next Markdown.tmTheme"

Origin theme

"theme": "Agila Origin.sublime-theme",
"color_scheme": "Packages/Agila Theme/Agila Origin Oceanic Next.tmTheme",

"color_scheme": "Packages/Agila Theme/Markdown/Oceanic Next Origin Markdown.tmTheme"

Dracula theme

"theme": "Agila Dracula.sublime-theme",
"color_scheme": "Packages/Agila Theme/Agila Dracula.tmTheme",

"color_scheme": "Packages/Agila Theme/Markdown/Dracula Markdown.tmTheme"

Monokai theme

"theme": "Agila Monokai.sublime-theme",
"color_scheme": "Packages/Agila Theme/Agila Monokai Extended.tmTheme",

"color_scheme": "Packages/Agila Theme/Markdown/Monokai Markdown.tmTheme"

Cobalt theme

"theme": "Agila Cobalt.sublime-theme",
"color_scheme": "Packages/Agila Theme/Agila Cobalt.tmTheme",

"color_scheme": "Packages/Agila Theme/Markdown/Cobalt Markdown.tmTheme"

Classic theme

"theme": "Agila Classic.sublime-theme",
"color_scheme": "Packages/Agila Theme/Agila Classic Oceanic Next.tmTheme",

"color_scheme": "Packages/Agila Theme/Markdown/Classic Oceanic Next Markdown.tmTheme"

Light theme

"theme": "Agila Light.sublime-theme",
"color_scheme": "Packages/Agila Theme/Agila Light Solarized.tmTheme",

"color_scheme": "Packages/Agila Theme/Markdown/Light Solarized Markdown.tmTheme"

Neon theme

"theme": "Agila Neon.sublime-theme",
"color_scheme": "Packages/Agila Theme/Agila Neon Monocyanide.tmTheme",

"color_scheme": "Packages/Agila Theme/Markdown/Neon Monocyanide Markdown.tmTheme"

Note: You can use active guide with these schemes by adding:

"indent_guide_options":
[
    "draw_normal",
    "draw_active"
],

---

Settings

I've made some UI parts customizable e.g icon colors, sidebar items, etc.. :)

THEME OVERRIDE

overrides default theme sidebar, scrollbars and tab background based on theme scheme background

"theme_agila_camouflage": true,

overrides default theme sidebar and tab background only based on theme scheme background

"theme_agila_camouflage_semi": true,

overrides all the theme_agila_* size settings; convenient for small laptops

"theme_agila_nano_mode": true,

SIDEBAR COMPACT TREE STRUCTURE - NO INDENTATION

"theme_agila_compact_sidebar": true,

SIDEBAR TREE SIZE (default: medium)

"theme_agila_sidebar_mini": true,
"theme_agila_sidebar_xsmall": true,
"theme_agila_sidebar_small": true,
"theme_agila_sidebar_medium": true,
"theme_agila_sidebar_large": true,

SIDEBAR HEADING (default: theme-based color)

"theme_agila_sidebar_heading_white": true,
"theme_agila_sidebar_heading_gray": true,
"theme_agila_sidebar_heading_lightblue": true,
"theme_agila_sidebar_heading_yellow": true,
"theme_agila_sidebar_heading_pink": true,

SIDEBAR ENTRY/ITEM FONT SIZE (default: 13)

"theme_agila_sidebar_font_xsmall": true, //font-size: 11
"theme_agila_sidebar_font_small": true, //font-size: 12
"theme_agila_sidebar_font_big": true, //font-size: 14

SIDEBAR SELECTED ENTRY/ITEM (default: pink)

"theme_agila_sidebar_selected_entry_white": true,
"theme_agila_sidebar_selected_entry_gray": true,
"theme_agila_sidebar_selected_entry_lightblue": true,
"theme_agila_sidebar_selected_entry_yellow": true,
"theme_agila_sidebar_selected_entry_pink": true,

SIDEBAR LIGHT ICONS (default: dark)

"theme_agila_sidebar_light_icons": true,

SIDEBAR FOLDER PLUS/MINUS ICONS

if a plus/minus icon is preferred beside folder icon

"theme_agila_sidebar_plus_minus": true,

COMPACT TAB - REDUCED TAB HEIGHT

"theme_agila_compact_tab": true,

ACTIVE TAB - TEXT COLOR (default: pink)

"theme_agila_active_tab_entry_white": true,
"theme_agila_active_tab_entry_gray": true,
"theme_agila_active_tab_entry_lightblue": true,
"theme_agila_active_tab_entry_yellow": true,
"theme_agila_active_tab_entry_pink": true,

MODIFIED TAB - ICON MARKER COLOR (default: light blue)

"theme_agila_modified_tab_marker_white": true,
"theme_agila_modified_tab_marker_gray": true,
"theme_agila_modified_tab_marker_lightblue": true,
"theme_agila_modified_tab_marker_yellow": true,
"theme_agila_modified_tab_marker_pink": true,

AUTOCOMPLETE - KEYWORD COLOR (default: white)

"theme_agila_auto_complete_white": true,
"theme_agila_auto_complete_gray": true,
"theme_agila_auto_complete_lightblue": true,
"theme_agila_auto_complete_yellow": true,
"theme_agila_auto_complete_pink": true,

SCROLLBAR COLORS (default: theme based color)

"theme_agila_vertical_scrollbar_white": true,
"theme_agila_horizontal_scrollbar_white": true,

"theme_agila_vertical_scrollbar_gray": true,
"theme_agila_horizontal_scrollbar_gray": true,

"theme_agila_vertical_scrollbar_lightblue": true,
"theme_agila_horizontal_scrollbar_lightblue": true,

"theme_agila_vertical_scrollbar_yellow": true,
"theme_agila_horizontal_scrollbar_yellow": true,

"theme_agila_vertical_scrollbar_pink": true,
"theme_agila_horizontal_scrollbar_pink": true,

SCROLLBAR THINNESS (default: 4)

"theme_agila_vertical_scrollbar_thickest": true,   //width: 6
"theme_agila_horizontal_scrollbar_thickest": true,

"theme_agila_vertical_scrollbar_thicker": true,   //width: 5
"theme_agila_horizontal_scrollbar_thicker": true,

"theme_agila_vertical_scrollbar_thinner": true,    //width: 3
"theme_agila_horizontal_scrollbar_thinner": true,

"theme_agila_vertical_scrollbar_thinnest": true,   //width: 2
"theme_agila_horizontal_scrollbar_thinnest": true,

"theme_agila_vertical_scrollbar_invisible": true,  //width:  0
"theme_agila_horizontal_scrollbar_invisible": true,

---

My Sublime Settings :p

https://gist.github.com/arvi/b71cd26b7a20944a7d53607213d56c20

---

Ports

• Visual Studio Code by whtsky

---

Thanks to

• Preap Theme - UI inspiration and .sublime-theme source code :)
• Spacegray Theme - UI inspiration and .sublime-theme source code :)
• amCoder Theme - UI inspiration and .sublime-theme source code :)
• Neka Theme - Icons
• Oceanic Next Color Scheme - where Default and Classic theme color scheme are based
• Solarized Color Scheme - where Light theme color scheme is based
• Dracula Color Scheme
• Monokai Extended Color Scheme
• Monocyanide Color Scheme
• Cobalt2 Scheme
• Colorhexa - color combinations
• meteor create --sample todos - screenshot code snippet :p
• Contributor(s): davidmatas, Cldfire, polyvertex, mikedcook, kcmr, davidhcefx

---

Fun Experiments :p

Have a color combination in mind or perhaps you also want to try and create your own? Check the Agila.sublime-theme source code... I made it super easy for anyone to customize a sublime UI theme through my extensive comments. :p Enjoy! :)

agila-theme's Issues

Icons not loading

I seem to have issues with the icons. Seem they are not loaded correct

Agila is installed in the user folder but has the name "Agila-Theme-2.2.0". Do i need to change this to Agila Theme?

Request thicker scroll bar

Hi Arvi,

I see little problem with horizontal scroll bar when searching.

Because scroll bar too thin, so cursor often change to resize instead of scoll.

http://i483.photobucket.com/albums/rr200/ngoncom/2016-06-18_220242_zps5k3nxcxu.jpg

Thank so much!

For more perfect

Hi Arvi!

Thank you so much for this theme, Agila Oceanic Next really impressed me.

But can you edit a bit 2 things:

• Reduce tab height
• Change scroll bar to another color (ex: dark color instead of skyblue) because skyblue too much highlight make me cant focus to code.

P/S for people: you can using font face "Monaco" 5.1 (support unicode) in here.

• http://www.gringod.com/2006/11/01/new-version-of-monaco-font/
• https://github.com/vjpr/monaco-bold (for bold style)

Disable default icons

Hi there,

I like this theme, I prefer it instead Material or any other, my thing is: Is there a way to disable the built-in icons or override them? I'm using A File Icon which seems pretty good.

PD: I think the best thing is just override folder icons and let the others by default or ready to override by the user (using another package)

For other ed

Hi, good theme. Possible to 'port' to CudaText maybe?

Autocomplete problem

Hello, I find a problem with the autocomplete suggestion.

When you use autocomplete, this not has diference into selected item and not selected items.

padding issues on side menu items

compare below...

SUGGESTION - add ability to choose what symbol you want for folders on the sidebar

currently you can have + and - symbols on your sidebar however there are some assets i do not see used. that i was wondering if you could add the option to use these as an alternative to the + and - symbols. the assets in question are fold-open.png and fold-closed.png. alos, if you add this could you also make it so you can choose their color?

Smaller/Compact sidebar

Swtiched from Material theme to this theme. Only thing I'm missing is the compact/smaller sidebar. Current ST3 sidebar is huuge on my small laptop display.

Close Icon not showing in dracula theme

the close icon is working in cobalt and classic themes only, for the rest of themes it doesn't appear under linux OS

Error after uninstall

I have uninstalled the theme and this error appears every time.

Every time I open a new window or file it happens. It's as if I still want to use the deleted theme.

And yes, I have tried restarting sublime text.
I hope you can help me, thanks

not table to change the tab text color

tab color is always its showing red not able to change it
and ya one thing more ..
can we have option to change the active tab background color it will be very helpful

Thanks in advance

"overlay_scroll_bars"

make some fixes to change"overlay_scroll_bars" to enable and do scroll invisible

[Agila Classic Oceanic Next] Do not target `meta.*` scopes

You're targeting meta.function-call for functions: https://github.com/arvi/Agila-Theme/blob/master/Agila%20Classic%20Oceanic%20Next.tmTheme#L110

But that results in entire call arguments also being blue. Please remove meta.function-call from that selector.

Provide an extra compact sidebar padding

Can you please provide an extra small sidebar padding?
At this time, I've edited the theme file, adding this directive:
{ "class": "sidebar_tree", "settings": ["theme_agila_sidebar_mini"], "row_padding": [20, 5] },
But my customizations gone when the package manager update Agila Theme.

add: agila theme based on popular color schemes

Priority 😁

• https://packagecontrol.io/packages/Monokai%20Extended (DONE)
• https://packagecontrol.io/packages/Dracula%20Color%20Scheme (DONE)
• https://packagecontrol.io/packages/Theme%20-%20Cyanide (DONE)
• https://github.com/wesbos/cobalt2/tree/master/Cobalt2 (DONE)
• https://packagecontrol.io/packages/1337%20Color%20Scheme (ABORT 😛 )
• https://packagecontrol.io/packages/Tomorrow%20Color%20Schemes (ABORT 😛 )
• https://github.com/mbixby/facebook-color-scheme (ABORT 😛 )
• https://packagecontrol.io/packages/Base16%20Color%20Schemes
• https://daylerees.github.io/

add: markdown support based on theme

Recently using sublime for markdown stuff 😄

Please Remove File Extension Preferences

The files at https://github.com/arvi/Agila-Theme/tree/master/preferences/Ext/ mess with the standard extension mapping.

It would be preferable to instead add a readme entry teaching people to use the View > Syntax > Open all with current extension as… menu.

material-theme/vsc-material-theme#682

Agila Theme Sidebar Icons

Hello,

I have installed "Agila Theme" successfully but there are some issues like,

1. No sidebar icons - folder icons, file type icons etc.
2. Tab Height is not getting reduced.

I'm sending you the screenshot for your reference.

Please help me with this. Thank you :D

Color Palette

I really love this theme
Please can you share the colour palette(specific hexcodes for the colours), so i can port this theme to iTerm2 on MacOS as well as Atom and Vim?

Missing scope for `variable.function` and `message.error`

Description

I used to stick with the Default Monokai color scheme, but not until discovering your Agila Monokai Extended scheme. It is really an awesome scheme, but recently I found some issues with it.

TLDR

Default Monokai

Agila Monokai Extended

Long Explanation

As you can see from the screenshots above, Agila Monokai Extended (AME) failed to highlight several parts of the code or the console message, while the Default Monokai was able to handle. As described in Sublime Text's official document on Scope Naming:

MINIMAL SCOPE COVERAGE

The following is a recommended minimal set of scopes to highlight. Adding extra may result in a slightly improved experience, however being too specific will result in a color scheme that often only looks good for one or two syntaxes.

• ...
• variable.function

Therefore, it is important to have highlightings for the variable.function scope. Aside from that, I was wondering could there be more cases that the Default Monokai could handle but not AME? So I compared AME's color scheme side-by-side with the Default Monokai's, and found that the following scopes were also ignored by AME:

punctuation.definition.annotation
variable.function, variable.annotation
entity.name.filename
message.error
variable.other.dollar.only.js
entity.name - (entity.name.filename | entity.name.section | entity.name.tag | entity.name.label)
variable.parameter - (source.c | source.c++ | source.objc | source.objc++)
string.unquoted.yaml
markup.underline.link
markup.italic markup.bold | markup.bold markup.italic
punctuation.definition.thematic-break
markup.quote punctuation.definition.blockquote
markup.list.numbered.bullet
markup.list.unnumbered.bullet | (markup.list.numbered punctuation.definition)
markup.raw punctuation.definition.raw
text & (punctuation.definition.italic | punctuation.definition.bold | punctuation.definition.raw | punctuation.definition.link | punctuation.definition.metadata | punctuation.definition.image | punctuation.separator.table-cell | punctuation.section.table-header | punctuation.definition.constant)
constant.numeric.line-number.find-in-files - match
diff.deleted
diff.deleted.char
diff.inserted
diff.inserted.char

• The first two scopes, punctuation.definition.annotation and variable.function, variable.annotation, correspond to the first and third screenshot (Python). These affect the annotation (@) and the function invocation.
• The entity.name.filename and message.error scopes correspond to the second and fourth screenshot. These are the make output in the build panel, which could be replicated by first open a folder with Makefile, and then run build.

Status (bottom) bar missing items

Hi,

When I enable this theme with ST3 as follows:

"theme": "Agila.sublime-theme",
"theme_agila_auto_complete_yellow": true,
"theme_agila_camouflage_semi": true,
"theme_agila_compact_sidebar": true,
"theme_agila_compact_tab": true,
"theme_agila_horizontal_scrollbar_thinnest": true,
"theme_agila_modified_tab_marker_yellow": true,
"theme_agila_sidebar_font_big": true,
"theme_agila_sidebar_heading_gray": true,
"theme_agila_sidebar_large": true,
"theme_agila_sidebar_selected_entry_yellow": true,
"theme_agila_vertical_scrollbar_gray": true,
"theme_agila_vertical_scrollbar_thinnest": true

I lose almost everything previously available in the status bar. All that remains is that button on the left that yields a menu with Console, Find, Find in Files, and Replace. I lose the row and column, the indentation quick-settings, and filetype syntax quick-settings.

php syntax highlighting issue

setting:

        "theme": "Agila Origin.sublime-theme",
        "color_scheme": "Packages/Agila Theme/Agila Origin Oceanic Next.tmTheme",

A semicolon is not necessary when using a function the way it is used below (i.e. embedding php in HTML as a one-liner).

Above should look like below even when the semicolon is removed.

feature request - port to jetbrains ide

Port Agilia to work with IDE's from Jetbrains.

Agila Theme for Pycharm

Hey ,
Thanks for Awesome work .
i used sublime and pycharm both
how can i use Agila theme in pycharm

Display JS file icon for .mjs file extensions

Hey there!

ES Modules are starting to receive native support for Node as you can read here: https://nodejs.org/api/esm.html

Long story short, most JS files in Node projects will now be using the .mjs file extension instead of just .js - to enable use of ES Modules. Is there a way to display the JS icon next to .mjs files in the sidebar? Right now there's just a generic star icon.

Thanks for all the great work!

Active Tab Background Color missing*

please add

active tab background color
or
active tab border top or border bottom

Thanks in advance

Alignment Issue in Find and Replace Panel

I just installed it today, newest stable build of Sublime Text 3. Running on ubuntu.

[Agila Classic Oceanic Next] When "highlight_line" is set to true in Preferences.sublime-settings, it's very hard to read the comments

I think in general the color of comments is too close to the background color.

The font in the tabs are not the same as the font in settings

blend sidebar and tab bar backgrounds with that of coding space (feature request)

consider: porting to other editors

• Atom Editor
• JetBrains Editor

P.S Probably will take months before I can make time to experiment on these things. 😛

Readme Screenshot Question

Hi, sorry for using an issue to contact you, but I didn't find any other way.
The screenshots of the (great!) Agila Theme show an icon toolbar at the bottom of the sidebar containing typographic tools of some sort. What toolbar is this? How do I enable it?

Thanks for the great work! Best,
Ole.

Reduce left and top margins in sidebar

Hi,

The sidebar features some wasted space along the left and top edges.

Here's a screenshot of Spacegray's sidebar:

And here's a screenshot of Agila's, with both sidebar_small and compact_sidebar enabled:

Override UI font with config value

Hi,

I've been using Spacegray for the UI theme, but this looks like a great replacement, thank you!

Is it possible to add a setting for the UI font, to override the default used by the theme?

add: theme_agila_accent option

Options are:

• theme_agila_accent: one color for active tab entry, autocomplete, sidebar selected entry, find panel active icons, and ellipsis (which is currently always pink)
• theme_agila_accent_semi: one color for only active tab entry, autocomplete, and sidebar selected entry

So I won't have to do this on my own sublime settings 😅

    "theme_agila_active_tab_entry_yellow": true,
    "theme_agila_auto_complete_yellow": true,
    "theme_agila_sidebar_selected_entry_yellow": true,

Error loading colour scheme

Just found out that the "Chill way" (Package Control > Install Package > Agila Theme) has a bug since been made public by wbond two weeks ago. Just tried it few days ago and finally got the time to fix it. :)

Paths have to be changed from Theme - Agila to Agila Theme since it is the filename created via "Chill way" installation.

Error using markdown

I just tried installing the theme and following instructions on the main page. BUt i get this error when i added the markdown line.

Im new to sublime and find it quite an awkward app how to install stuff. Im using it on OSX 10.11.6

I installed Agila in the packages folder > user. When i install it in the root of the packages folder it doesnt appear or work.

More support for scopes

Hi - I found this package via the vs code port, Just seeing if you still support the theme. If so, I was wondering if you could add color to markup.raw.block.markdown and meta.paragraph.markdown markup.quote.markdown specifically in Agila Classic Oceanic Next?