Easy customizable interface and syntax themes for Sublime Text 3 3083+. Come in, both, light and dark variations. All color schemes are optimized for JavaScript syntax highlighter (including babel-sublime).
NOTE: Active tab has the same background color as the background of the active color scheme to fit it more gracefully.
If you have some problems, first search for a similar issue, and then report with new one.
Please read the Known Issues section before reporting a new one.
- Themes
- Installation
- Activation
- Customization
- Recommended Settings
- HiDPI Support
- References
- Contributing
- Design & Extras
- Known Issues
Best for light color schemes, especially good with Otto Yesterday & Base16 Tomorrow Light.
Best for dark color schemes, especially good with Otto Tomorrow & Zenburn.
Best for dark color schemes, especially good with Otto Oceanic, Solarized Dark & Cobalt2.
Best for dark color schemes, especially good with Monokai Extended & Monokai Neue.
The easiest way to install is using Sublime Package Control, where Otto is listed as Theme - Otto.
- Open Command Palette using menu item
Tools -> Command Palette...(OS X: ⌘ + ⇧ + P | Windows/Linux: Ctrl + Shift + P) - Choose
Package Control: Install Package - Find
Theme - Ottoand hit Enter
You can also install the theme manually:
- Download the .zip
- Unzip and rename the folder to
Theme - Otto - Copy the folder into
Packagesdirectory, which you can find using the menu itemPreferences -> Browse Packages...
Activate the UI theme and color scheme by modifying your user preferences file, which you can find using the menu item Preferences -> Settings - User.
DON'T FORGET TO RESTART SUBLIME TEXT AFTER ACTIVATING THE THEME.
// Otto Yesterday
// -----------------
"theme": "Otto Yesterday.sublime-theme",
"color_scheme": "Packages/Theme - Otto/schemes/Otto Yesterday.tmTheme",
// Otto Tomorrow
// -----------------
"theme": "Otto Tomorrow.sublime-theme",
"color_scheme": "Packages/Theme - Otto/schemes/Otto Tomorrow.tmTheme",
// Otto Oceanic
// -----------------
"theme": "Otto Oceanic.sublime-theme",
"color_scheme": "Packages/Theme - Otto/schemes/Otto Oceanic.tmTheme",
// Otto Monokai
// -----------------
"theme": "Otto Monokai.sublime-theme",
"color_scheme": "Packages/Theme - Otto/schemes/Otto Monokai.tmTheme",NOTE: Some of the options may not work properly due to these well-known bugs & suggestions
- Increasing font size of file tabs cuts off the font
- Sidebar improvements
- Quick panel font size
- Change font in quick panel
You can vote for these issues.
// By Default
// -----------------
"theme_otto_global_ui_medium": true,
// Available
// -----------------
"theme_otto_global_ui_small": true,
"theme_otto_global_ui_large": true,// By Default
// -----------------
"theme_otto_global_font_size_11": true,
// Available
// -----------------
"theme_otto_global_font_size_12": true,
"theme_otto_global_font_size_13": true,
"theme_otto_global_font_size_14": true,
"theme_otto_global_font_size_15": true,
// By Default
// -----------------
"theme_otto_accent_blue": true,
// Available
// -----------------
"theme_otto_accent_green": true,
"theme_otto_accent_orange": true,
"theme_otto_accent_purple": true,
// By Default
// -----------------
"theme_otto_tab_selected_default": true,
"theme_otto_tab_medium": true,
"theme_otto_tab_auto_width": false,
"theme_otto_tab_label_bold": false,
"theme_otto_tab_selected_label_bold": false,
"theme_otto_mouse_wheel_switches_tabs": false,
"theme_otto_tab_font_size_11": true,
// Available
// -----------------
"theme_otto_tab_selected_underlined": true,
"theme_otto_tab_selected_prelined": true,
"theme_otto_tab_selected_filled": true,
"theme_otto_tab_small": true,
"theme_otto_tab_large": true,
"theme_otto_tab_auto_width": true,
"theme_otto_tab_label_bold": true,
"theme_otto_tab_selected_label_bold": true,
"theme_otto_mouse_wheel_switches_tabs": true,
"theme_otto_tab_separator_hide": true,
"theme_otto_tab_font_size_12": true,
"theme_otto_tab_font_size_13": true,
"theme_otto_tab_font_size_14": true,
"theme_otto_tab_font_size_15": true,// By Default
// -----------------
"theme_otto_scrollbars_monochrome": false,
"theme_otto_scrollbars_wide": false,
// Available
// -----------------
"theme_otto_scrollbars_monochrome": true,
"theme_otto_scrollbars_wide": true,// By Default
// -----------------
"theme_otto_find_and_replace_close_hide": false,
"theme_otto_find_and_replace_small": false,
"theme_otto_find_and_replace_font_size_11": true,
// Available
// -----------------
"theme_otto_find_and_replace_close_hide": true,
"theme_otto_find_and_replace_small": true,
"theme_otto_find_and_replace_font_size_12": true,
"theme_otto_find_and_replace_font_size_13": true,
"theme_otto_find_and_replace_font_size_14": true,
"theme_otto_find_and_replace_font_size_15": true,// By Default
// -----------------
"theme_otto_status_bar_medium": true,
"theme_otto_status_bar_font_size_11": true,
// Available
// -----------------
"theme_otto_status_bar_small": true,
"theme_otto_status_bar_large": true,
"theme_otto_status_bar_font_size_12": true,
"theme_otto_status_bar_font_size_13": true,
"theme_otto_status_bar_font_size_14": true,
"theme_otto_status_bar_font_size_15": true,// By Default
// -----------------
"theme_otto_sidebar_medium": true,
"theme_otto_sidebar_folder_arrow": false,
"theme_otto_sidebar_hide_file_icons": false,
"theme_otto_sidebar_font_size_11": true,
// Available
// -----------------
"theme_otto_sidebar_small": true,
"theme_otto_sidebar_large": true,
"theme_otto_sidebar_folder_arrow": true,
"theme_otto_sidebar_hide_file_icons": true,
"theme_otto_sidebar_font_size_12": true,
"theme_otto_sidebar_font_size_13": true,
"theme_otto_sidebar_font_size_14": true,
"theme_otto_sidebar_font_size_15": true,You can customize themes via PackageResourceViewer. E.g. Due to Sublime Text 3 limitations related to the widget styling, you can find that colors of the cursor in the editor and find panel are different. That's why I always add similar changes to the theme manually. Let's say I want to change colors of the caret and selection:
"always_show_minimap_viewport": true,
"bold_folder_labels": true,
"caret_extra_bottom": 1,
"caret_extra_top": 1,
"caret_extra_width": 1,
"caret_style": "blink",
"fade_fold_buttons": false,
"indent_guide_options": ["draw_normal", "draw_active"],
"line_padding_bottom": 2,
"line_padding_top": 2,
"overlay_scroll_bars": "enabled",
"show_encoding": true,
"show_line_endings": true,The font used for the code is Fira Code.
These themes include @1x, @2x, @3x image assets. Sublime Text supports HiDPI in Mac OS (works like a charm), but have some issues in Windows & Linux. Here the dirty fix:
- download psd from Design,
- use PackageResourceViewer to extract the themes,
- manually change all @1x assets into needed versions.
These themes are heavily inspired by:
Color schemes are based on:
NOTE: I have no plans to add new themes, only the fixes and improvements to the existing ones. In such cases you're free to fork.
These themes use a custom Gulp builder. If you want to edit them you must install it first:
$ npm installthen run watcher by:
$ gulp watchYou can now edit the source files under sources folder that will be compiled (don't edit compiled files, all sources are inside sources).
If you'd like to add some rules and styles to the template of the color schemes, please, do it inside sources\templates\scheme.YAML-tmTheme. Run gulp build:schemes and then generate *.tmTheme files in schemes folder with such tool as PackageDev.
PRs welcome!😋
Also, you can download all assets in psd format and some extras: Otto Goodies
If you can't see the bottom panel (find/replace, rename, move, can't see the box inputs in SidebarEnhancement, etc..). Here the quick fix:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent