Thursday, February 5, 2015

Sublime Text 3 Auto Complete Theme / Color Changes

After recently switching from Eclipse to Sublime Text 3 for my development work, I found the need to change some of the theme and element coloring options. One of the elements I wanted to change, but could not find any documentation for was the auto complete pop-up window. 

In the following screenshot you can see a pop up window with a list of auto complete options.  Let me explain how you might change these.  First off, the file you will need to edit is this one: ~/Library/Application Support/Sublime Text 3/Packages/Theme - Default/Default.sublime-theme




To change the background for the pop up window you would edit this element:
{
  "class": "popup_control",
  "layer0.tint": [64, 64, 64, 255],
  "layer0.opacity": 1.0,
  "content_margin": [2, 2]

},
{
  "class": "auto_complete",
  "row_padding": [2, 1],


  // White background
  "layer0.tint": [255, 255, 255],
  "layer0.opacity": 1.0,
  "dark_content": false

},


To change the color of text item is the pop up  window you would edit this element:

{
  "class": "auto_complete_label",


  // color of options in pop up window
  "fg": [72, 72, 72, 255],

  // red, the text color that you have typed that matches
  "match_fg": [255, 0, 0, 255],
  "bg": [255, 26, 26],


  // color of the text in the row that is selected 
  "selected_fg": [72, 72, 72, 255],

  // black, color of the matched text in the row that is selected
  "selected_match_fg": [0, 0, 0, 255],   
  "selected_bg": [156, 185, 223, 255]

},


To change the row highlight color you would edit this element

{
  "class": "table_row",
  "layer0.texture": "Theme - Default/row_highlight_wide.png”,


  // Blue highlight for the selected option
  "layer0.tint": [33, 90, 184],
  "layer0.opacity": 0.0,
  "layer0.inner_margin": [1, 1]

},
{
  "class": "table_row",
  "attributes": ["selected"],
  "layer0.opacity": 1.0,
},


No comments:

Post a Comment