ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Brackets Color Scheme

by jwortmann ST3 Trending

Color scheme for Sublime Text inspired by Adobe Brackets

Labels color scheme

Details

Installs

  • Total 39K
  • Win 25K
  • Mac 7K
  • Linux 6K
Apr 16 Apr 15 Apr 14 Apr 13 Apr 12 Apr 11 Apr 10 Apr 9 Apr 8 Apr 7 Apr 6 Apr 5 Apr 4 Apr 3 Apr 2 Apr 1 Mar 31 Mar 30 Mar 29 Mar 28 Mar 27 Mar 26 Mar 25 Mar 24 Mar 23 Mar 22 Mar 21 Mar 20 Mar 19 Mar 18 Mar 17 Mar 16 Mar 15 Mar 14 Mar 13 Mar 12 Mar 11 Mar 10 Mar 9 Mar 8 Mar 7 Mar 6 Mar 5 Mar 4 Mar 3 Mar 2
Windows 7 12 11 11 6 8 6 11 9 11 7 10 5 12 13 13 12 8 6 5 7 14 12 19 10 14 6 11 5 10 13 6 11 7 8 5 10 11 9 13 10 6 6 10 8 7
Mac 0 5 4 5 2 1 4 1 1 1 3 1 0 1 1 1 2 2 1 0 0 4 2 1 1 3 1 1 3 5 2 2 2 1 3 6 1 0 2 2 0 2 5 1 2 4
Linux 1 5 5 2 2 3 0 3 5 1 2 4 2 5 3 3 1 2 1 2 4 4 2 3 4 2 5 3 4 2 2 1 2 3 2 7 3 4 4 4 1 3 1 1 1 3

Readme

Source
raw.​githubusercontent.​com

Brackets Color Scheme

License Version Downloads

This package for Sublime Text provides two color schemes (light and dark) that are similar to the built-in themes of Adobe Brackets.

Installation

The color scheme can be installed via Sublime Text's package manager Package Control. From the command palette select Package Control: Install Package and search for Brackets Color Scheme.

Alternatively you can download and unzip the files from this repository and put them into a folder in the packages directory of Sublime Text, e.g. the Packages/User/ folder. To access the packages directory, select Preferences > Browse Packages… from the Sublime Text menu. Note that there won't be automatic updates for this package if not using Package Control.

The color scheme can then be activated from the menu under Preferences > Color Scheme… or via the UI: Select Color Scheme command from the command palette.

Preview

Brackets Light

Brackets Dark

Color palette

Color variable Brackets Light Brackets Dark Example usage
background #f8f8f8 background #1d1f21 background
textcolor textcolor #535353 textcolor #dddddd plain text, variables, constants, operators, punctuations
grey grey #949494 grey #767676 comments
blue blue #446fbd blue #6c9ef8 keywords, intrinsic/library functions and classes, tags
orange orange #e88501 orange #d89333 strings, built-in constants, arguments in function definitions
green green #6d8600 green #85a300 numbers, HTML/XML tag attributes
violet violet #8757ad violet #b77fdb user defined functions, mapping keys, CSS property names
purple purple #6c71c4 purple #8087e5 preprocessor directives, macros
pink pink #d33682 pink #d85896 annotations, headings in markup languages
red red #dc322f red #dc322f invalid syntax
green2 green2 #229922 green2 #229922 diff inserted
red2 red2 #dd4444 red2 #dd4444 diff deleted

Customization

This color scheme uses color definitions and highlighting rules based on a JSON format, which was introduced in Sublime Text 3.1 (Build 3170). The color scheme format allows to customize color variables and override or add user-specific highlighting rules by creating a Brackets Light.sublime-color-scheme and/or Brackets Dark.sublime-color-scheme file in the Packages/User/ folder, see this example in the official documentation. For the color variable names used by this scheme, refer to the color palette above.

Usage in Sublime Merge

The color schemes can be used in Sublime Merge as well and contain special rules which provide a tweaked style for certain elements of the diff and merge conflict views. For now, adjusting the color scheme in Sublime Merge requires a bit of manual configuration to the default light and dark themes:

From the Sublime Merge menu select Preferences > Browse Packages… and navigate into the User folder. Then, for the light theme, create new settings files with names

  • Commit Message - Merge.sublime-settings
  • Diff - Merge.sublime-settings
  • File Mode - Merge.sublime-settings

and with the following content in each of the files:

{
  "color_scheme": "Brackets Light.sublime-color-scheme"
}

Correspondingly, for the dark theme create the files

  • Commit Message - Merge Dark.sublime-settings
  • Diff - Merge Dark.sublime-settings
  • File Mode - Merge Dark.sublime-settings

with the following content:

{
  "color_scheme": "Brackets Dark.sublime-color-scheme"
}

Differences from the Adobe Brackets themes

In general, the color schemes are intended to reproduce the style of the built-in themes in Adobe Brackets, but there are a few minor differences.

  • Deviations in syntax highlighting are possible due to the different highlighting engines in the editors. The highlighting for certain elements was slightly extended and better support was added for programming languages which are not focused on web development. If you find a bug or possible improvement, feel free to let me know by creating an issue in this repository.

  • In Adobe Brackets, matching tags and brackets are highlighted with a green background color when the caret is next to one. Adjustments of the background color for matching tags or brackets aren't possible in Sublime Text, so they are drawn underlined instead.

  • Sublime Text uses a subtle border and rounded corners for text selections in its built-in color schemes. I chose to follow this style here, but the original style of selections in Adobe Brackets with squared corners and without border can be achieved via the following customization:

{
    "globals": {
      "selection_border_width": "0",
      "selection_corner_style": "square"
    }
  }