Settings
HOME ▸ SETTINGS
There are dozens of options that enable you to personalize your experience with Boxy Theme.
BAR ▪️ TABS ▪️ FIND PANELS ▪️ QUICK PANELS ▪️ SIDEBAR ▪️ STATUS BAR ▪️ SCROLLBARS ▪️ TOOLTIPS ▪️ ADVANCED
Global options enable you to control some aspects of UI appearance at once.
Generally, there are four kinds of global options which you can use:
// Reduce size of all UI controls to extra small
"theme_size_xs": true,// The default size of all UI controls
"theme_size_sm": true,// Increase size of all UI controls to medium
"theme_size_md": true,// Increase size of all UI controls to large
"theme_size_lg": true,// Increase size of all UI controls to extra large
"theme_size_xl": true,// Reduce font size of all UI controls to 10 px
"theme_font_xs": true,// The default font size of all UI controls is 11 px
"theme_font_sm": true,// Increase font size of all UI controls to 12 px
"theme_font_md": true,// Increase font size of all UI controls to 13 px
"theme_font_lg": true,// Increase font size of all UI controls to 14 px
"theme_font_xl": true,// The default accent of all UI controls
"theme_accent_blue": true,// Set green accent color
"theme_accent_green": true,// Set orange accent color
"theme_accent_orange": true,// Set purple accent color
"theme_accent_purple": true,// Set tangerine accent color
"theme_accent_tangerine": true,// Set cyan accent color
"theme_accent_cyan": true,// Set lime accent color
"theme_accent_lime": true,// Set pink accent color
"theme_accent_pink": true,// Set sky accent color
"theme_accent_sky": true,// Set monochrome accent color
"theme_accent_mono": true,// Enable a beautiful Material UI icons
"theme_icons_materialized": true,// Enable a beautiful Atom UI icons
"theme_icons_atomized": true,// Enable the same background color for UI components
"theme_unified": true,Each one of them (except accent & background options) may be overridden by setting a similar option specific to UI control.
For example, you want to increase font size of all UI controls via setting a global font size option. But due to this issue you can find that lower half of the tab label is cut off. In such cases just override font size by setting a font size option specific to the tab:
"theme_font_xl": true,
"theme_tab_font_sm": true,Or, if you want to increase the size of all UI controls but leave a small status bar, you can set these options:
"theme_size_md": true,
"theme_statusbar_size_sm": true,Bar options enable you to control some aspects of tabs' and sidebar's appearance at once.
You can enable a beautiful bar for your Boxy Theme. The color tint fits automatically the theme accent color you chose if you want to use colored bar.
// Enable a beautiful bar based on your theme
"theme_bar": true,// Enable a beautiful colored bar
// Works only with `theme_bar: true,`
"theme_bar_colored": true,// Enable a Material UI logo
"theme_bar_logo_materialized": true,// Enable an Atom UI logo
"theme_bar_logo_atomized": true,// Hide bar shadow
"theme_bar_shadow_hidden": true,Also you can add a top margin to the tabs and sidebar, especially useful with the rounded tabs.
// Increase top margin of the tabs and sidebar to small
"theme_bar_margin_top_sm": true,// Increase top margin of the tabs and sidebar to medium
"theme_bar_margin_top_md": true,// Increase top margin of the tabs and sidebar to large
"theme_bar_margin_top_lg": true,Tab options enable you to control appearance of the tabs.
// Reduce size of the tabs to extra small
"theme_tab_size_xs": true,// The default size of tabs
"theme_tab_size_sm": true,// Increase size of tabs to medium
"theme_tab_size_md": true,// Increase size of tabs to large
"theme_tab_size_lg": true,// Increase size of tabs to extra large
"theme_tab_size_xl": true,// Increase size of tabs to extra extra large
"theme_tab_size_xxl": true,// Auto adjust tab width from the name
"theme_tab_width_auto": true,Due to this issue you can find that lower half of the tab label is cut off. Vote for this bug.
// Reduce font size of tabs to 10 px
"theme_tab_font_xs": true,// The default font size of tabs is 11 px
"theme_tab_font_sm": true,// Increase font size of tabs to 12 px
"theme_tab_font_md": true,// Increase font size of tabs to 13 px
"theme_tab_font_lg": true,// Increase font size of tabs to 14 px
"theme_tab_font_xl": true,// Make tab labels bold
"theme_tab_label_bold": true,// Make selected tab label bold
"theme_tab_selected_label_bold": true,// Add rounded corners to the tabs
"theme_tab_rounded": true,// Set underlined style to the selected tab
"theme_tab_selected_underlined": true,// Set prelined style to the selected tab
"theme_tab_selected_prelined": true,// Set filled style to the selected tab
"theme_tab_selected_filled": true,// Set transparent style to the selected tab
// Especially good with accompanying `theme_tab_selected_underlined`
"theme_tab_selected_transparent": true,// Set size of the tab lines to small
// When `theme_tab_selected_prelined` or `theme_tab_selected_underlined` is true
"theme_tab_line_size_sm": true,// Set size of the tab lines to large
// When `theme_tab_selected_prelined` or `theme_tab_selected_underlined` is true
"theme_tab_line_size_lg": true,// Hide left arrows
"theme_tab_arrows_hidden": true,// Enable tab switch via mouse wheel
"theme_tab_mouse_wheel_switch": true,// Show tab separators
"theme_tab_separator": true,// Disable tab background highlighting on hover
"theme_tab_highlight_text_only": true,// Starting 3.0.0 by default close button of the inactive tabs is visible on hover only,
// this option enables you to show it always
"theme_tab_close_always_visible": true,// Enable a beautiful Material UI dirty pencil icon
"theme_dirty_materialized": true,// The default accent of the dirty state
"theme_dirty_accent_blue": false,// Set green accent color for the dirty state
"theme_dirty_accent_green": false,// Set orange accent color for the dirty state
"theme_dirty_accent_orange": false,// Set purple accent color for the dirty state
"theme_dirty_accent_purple": false,// Set tangerine accent color for the dirty state
"theme_dirty_accent_tangerine": false,// Set cyan accent color for the dirty state
"theme_dirty_accent_cyan": false,// Set lime accent color for the dirty state
"theme_dirty_accent_lime": false,// Set pink accent color for the dirty state
"theme_dirty_accent_pink": false,// Set sky accent color for the dirty state
"theme_dirty_accent_sky": false,// Enable a beautiful Material UI dropdown icon
"theme_dropdown_materialized": true,// Enable a beautiful Atom UI dropdown icon
"theme_dropdown_atomized": true,Find panel options enable you to manage appearance of the misc UI components such as buttons, labels, find panel & etc.
// Reduce size of the find panel to extra extra small
"theme_find_panel_size_xxs": false,// Reduce size of the find panel to extra small
"theme_find_panel_size_xs": true,// The default size of the find panel
"theme_find_panel_size_sm": true,// Increase size of the find panel to medium
"theme_find_panel_size_md": true,// Increase size of the find panel to large
"theme_find_panel_size_lg": true,// Increase size of the find panel to extra large
"theme_find_panel_size_xl": true,// Reduce font size of the find panel to 10 px
"theme_find_panel_font_xs": true,// The default font size of the find panel is 11 px
"theme_find_panel_font_sm": true,// Increase font size of the find panel to 12 px
"theme_find_panel_font_md": true,// Increase font size of the find panel to 13 px
"theme_find_panel_font_lg": true,// Increase font size of the find panel to 14 px
"theme_find_panel_font_xl": true,Starting 3.2.0
// The default padding of the find panel
"theme_find_panel_padding_xs": true,// Increase padding of the find panel to small
"theme_find_panel_padding_sm": true,// Increase padding of the find panel to medium
"theme_find_panel_padding_md": true,// Increase padding of the find panel to large
"theme_find_panel_padding_lg": true,// Increase padding of the find panel to extra large
"theme_find_panel_padding_xl": true,// Hide find panel close button
"theme_find_panel_close_hidden": true,// Make round buttons
"theme_button_rounded": true,// Highlight icon buttons in find panel
"theme_icon_button_highlighted": true,// Invert the background color of the buttons
"theme_button_inverted": true,// Enable beautiful Material UI find panel icons
"theme_find_panel_materialized": true,// Enable beautiful Atom UI find panel icons
"theme_find_panel_atomized": true,Quick panel options enable you to control the appearance of the Command Palette, Goto Anything, Quick Switch Project & etc.
// Reduce size of the quick panels to extra small
"theme_quick_panel_size_xs": true,// The default size of the quick panels
"theme_quick_panel_size_sm": true,// Increase size of the quick panels to medium
"theme_quick_panel_size_md": true,// Increase size of the quick panels to large
"theme_quick_panel_size_lg": true,// Increase size of the quick panels to extra large
"theme_quick_panel_size_xl": true,// Starting 3.0.0 quick panel selected item has no colored background,
// this option turns it back
"theme_quick_panel_item_selected_colored": true,Sidebar options enable you to control appearance of the sidebar UI components.
// Reduce size of the sidebar to extra extra small
"theme_sidebar_size_xxs": true,// Reduce size of the sidebar to extra small
"theme_sidebar_size_xs": true,// The default size of the sidebar
"theme_sidebar_size_sm": true,// Increase size of the sidebar to medium
"theme_sidebar_size_md": true,// Increase size of the sidebar to large
"theme_sidebar_size_lg": true,// Increase size of the sidebar to extra large
"theme_sidebar_size_xl": true,// Reduce font size of the sidebar to 10 px
"theme_sidebar_font_xs": true,// The default font size of the sidebar is 11 px
"theme_sidebar_font_sm": true,// Increase font size of the sidebar to 12 px
"theme_sidebar_font_md": true,// Increase font size of the sidebar to 13 px
"theme_sidebar_font_lg": true,// Increase font size of the sidebar to 14 px
"theme_sidebar_font_xl": true,// Reduce indent of the sidebar rows to extra small
"theme_sidebar_indent_xs": true,// Reduce indent of the sidebar rows to small
"theme_sidebar_indent_sm": true,// Reduce indent of the sidebar rows to medium
"theme_sidebar_indent_md": true,// The default indent of the sidebar rows
"theme_sidebar_indent_lg": true,// Increase indent of the sidebar rows to extra large
"theme_sidebar_indent_xl": true,// Hide file icons
"theme_sidebar_file_icons_hidden": true,// Change folder icon to arrow
"theme_sidebar_folder_arrow": true,// Show disclosure tree controls like in the default Sublime Text theme
"theme_sidebar_disclosure": true,// Starting 3.0.0 `theme_sidebar_folder_monochrome` -> `theme_sidebar_folder_mono`
// Change folder color to monochrome
"theme_sidebar_folder_mono": true,// Starting 3.0.0 by default close button of the opened files is visible on hover only,
// this option enables you to show it always
"theme_sidebar_close_always_visible": true,// Enable a beautiful Material UI folder icon
"theme_sidebar_folder_materialized": true,// Enable a beautiful Atom UI folder icon
"theme_sidebar_folder_atomized": true,// Reduce the saturation level of the sidebar icons to low
"theme_sidebar_icon_saturation_lw": true,// Reduce the saturation level of the sidebar icons to medium
"theme_sidebar_icon_saturation_md": true,// Reduce the saturation level of the sidebar icons to high
"theme_sidebar_icon_saturation_hg": true,// The default saturation level of the sidebar icons (extra high)
"theme_sidebar_icon_saturation_xh": true,// Show right border of the sidebar
"theme_sidebar_border": true,// Disable sidebar heading indents
// Useful when you want to optimize the space used by the sidebar
"theme_sidebar_indent_top_level_disabled": true,// Disable sidebar row background highlighting on hover
"theme_sidebar_highlight_text_only": true,// Disable sidebar row background highlighting on selected items
"theme_sidebar_highlight_selected_text_only": true,// Starting 3.0.0 sidebar labels have regular font weight by default,
// this option make them bold again
"theme_sidebar_heading_bold": true,Status bar options enable you to control the size and font size of the status bar.
// Reduce size of the status bar to extra small
"theme_statusbar_size_xs": true,// The default size of the status bar
"theme_statusbar_size_sm": true,// Increase size of the status bar to medium
"theme_statusbar_size_md": true,// Increase size of the status bar to large
"theme_statusbar_size_lg": true,// Increase size of the status bar to extra large
"theme_statusbar_size_xl": true,// Make status bar labels bold
"theme_statusbar_label_bold": true,// Reduce font size of the status bar to 10 px
"theme_statusbar_font_xs": true,// The default font size of the status bar is 11 px
"theme_statusbar_font_sm": true,// Increase font size of the status bar to 12 px
"theme_statusbar_font_md": true,// Increase font size of the status bar to 13 px
"theme_statusbar_font_lg": true,// Increase font size of the status bar to 14 px
"theme_statusbar_font_xl": true,// This option enables you to colorize the status bar
"theme_statusbar_colored": true,// Enable a beautiful Material UI panel switcher icon
"theme_panel_switcher_materialized": true,// Enable a beautiful Atom UI panel switcher icon
"theme_panel_switcher_atomized": true,Scrollbars options enable you to control the appearance of the scrollbars.
// Set line scrollbars
"theme_scrollbar_line": true,// Make colored scrollbars
// Works only with `theme_scrollbar_line: true`
"theme_scrollbar_colored": true,// Enable rounded scrollbars
"theme_scrollbar_rounded": true,// Enable semi overlayed scrollbars
// Works only with `"overlay_scroll_bars": "disabled"`
"theme_scrollbar_semi_overlayed": true,Tooltips options enable you to control the font size of the tooltips.
// Reduce font size of the tooltips to 10 px
"theme_tooltips_font_xs": true,// The default font size of the tooltips is 11 px
"theme_tooltips_font_sm": true,// Increase font size of the tooltips to 12 px
"theme_tooltips_font_md": true,// Increase font size of the tooltips to 13 px
"theme_tooltips_font_lg": true,// Increase font size of the tooltips to 14 px
"theme_tooltips_font_xl": true,Grid options enable you to control the border size of the grid.
// Set border size of the grid to 1px
"theme_grid_border_size_xs": true,// Set border size of the grid to 4px
"theme_grid_border_size_sm": true,// Set border size of the grid to 6px
"theme_grid_border_size_md": true,// Set border size of the grid to 8px
"theme_grid_border_size_lg": true,// Set border size of the grid to 10px
"theme_grid_border_size_xl": true,// Starting 3.0.0 autocomplete selected item has no colored background,
// this option turns it back
"theme_autocomplete_item_selected_colored": true,// Add popup border (also affects autocomplete border)
"theme_popup_border_visible": true,You can customize themes via PackageResourceViewer. E.g. Due to Sublime Text 3 limitations related to the widget styling, we can't add options to its customization. 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,
▪️ INSTALLATION
▪️ ACTIVATION
▪️ GLOBAL
▪️ ACCENTS
▪️ BAR
▪️ TABS
▪️ FIND PANELS
▪️ QUICK PANELS
▪️ SIDEBAR
▪️ STATUS BAR
▪️ SCROLLBARS
▪️ TOOLTIPS
▪️ ADVANCED
▪️ RECOMMENDED
▪️ EXTRAS
▪️ ADDONS
▪️ CONTRIBUTING