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 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! :)
via Package Control, where Agila is listed as
Agila Theme.
Tools > Command Palette...or
CMD/CTRL + SHIFT + P
Package Control: Install Package
Agila Themeand hit
Enter
via installing the theme manually.
Agila Theme.
Agila Themefolder inside the Packages directory (
Preferences > Browse packages...)
Agila themes include Markdown syntax highlighting provided you have Markdown Extended package installed.
Skins provides an easy way to manage your themes for Sublime Text 3. Run its
Select Skincommand from the Command Palette
Tools > Command Palette...or
CMD/CTRL + SHIFT + Pand choose any of the various
Agilatheme variants from the list. No extra steps for activating Markdown syntax highlighting based on selected theme.
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:
color_schemevalue based on the last
color_schemesetting specific to theme below.
"theme": "Agila.sublime-theme", "color_scheme": "Packages/Agila Theme/Agila Oceanic Next.tmTheme",
"color_scheme": "Packages/Agila Theme/Markdown/Oceanic Next Markdown.tmTheme"
"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"
"theme": "Agila Dracula.sublime-theme", "color_scheme": "Packages/Agila Theme/Agila Dracula.tmTheme",
"color_scheme": "Packages/Agila Theme/Markdown/Dracula Markdown.tmTheme"
"theme": "Agila Monokai.sublime-theme", "color_scheme": "Packages/Agila Theme/Agila Monokai Extended.tmTheme",
"color_scheme": "Packages/Agila Theme/Markdown/Monokai Markdown.tmTheme"
"theme": "Agila Cobalt.sublime-theme", "color_scheme": "Packages/Agila Theme/Agila Cobalt.tmTheme",
"color_scheme": "Packages/Agila Theme/Markdown/Cobalt Markdown.tmTheme"
"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"
"theme": "Agila Light.sublime-theme", "color_scheme": "Packages/Agila Theme/Agila Light Solarized.tmTheme",
"color_scheme": "Packages/Agila Theme/Markdown/Light Solarized Markdown.tmTheme"
"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:
json "indent_guide_options": [ "draw_normal", "draw_active" ],
I've made some UI parts customizable e.g icon colors, sidebar items, etc.. :)
overrides default theme sidebar, scrollbars and tab background based on theme scheme background
json "theme_agila_camouflage": true,
overrides default theme sidebar and tab background only based on theme scheme background
json "theme_agila_camouflage_semi": true,
overrides all the themeagila* size settings; convenient for small laptops
json "theme_agila_nano_mode": true,
"theme_agila_compact_sidebar": true,
"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,
"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,
"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
"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,
"theme_agila_sidebar_light_icons": true,
if a plus/minus icon is preferred beside folder icon
json "theme_agila_sidebar_plus_minus": true,
"theme_agila_compact_tab": true,
"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,
"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,
"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,
"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,
"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,
meteor create --sample todos- screenshot code snippet :p
Have a color combination in mind or perhaps you also want to try and create your own? Check the
Agila.sublime-themesource code... I made it super easy for anyone to customize a sublime UI theme through my extensive comments. :p Enjoy! :)