Home Download Buy Blog Forum Support

Theming the Command Palette

Theming the Command Palette

Postby rtalexander on Tue Feb 07, 2012 8:05 pm

Is there any way to theme the Command Palette (e.g., change font size, background color)?
rtalexander
 
Posts: 8
Joined: Thu Nov 17, 2011 5:30 pm

Re: Theming the Command Palette

Postby C0D312 on Tue Feb 07, 2012 8:40 pm

Preferences > Browse Packages > Theme - Default > Default.sublime-theme.

Sublime's theming works similar to CSS, so you can just create a blank file called Default.sublime-theme in Packages/User and anything you add will override the default theme.
C0D312
 
Posts: 1063
Joined: Sun Jul 10, 2011 3:23 am

Re: Theming the Command Palette

Postby ChuckH on Wed Jan 30, 2013 2:22 pm

Sorry to necro this thread, but the OP's question wasn't answered. I'm aware of overriding defaults, but I need to know the property name to override in this case, and there's nothing about the command palette in Default.sublime-theme.
ChuckH
 
Posts: 2
Joined: Wed Jan 30, 2013 2:12 pm

Re: Theming the Command Palette

Postby appsforartists on Tue May 28, 2013 6:14 pm

Like many other users, I'm trying to scale the UI to be more readable for me. In my case, I'm using a high DPI screen. I've been able to use the Soda Dark theme's retina assets to mostly resolve this issue, but I haven't learned how to theme the command palette or the tab font size.

Here's the theme I'm using to scale the Sublime UI:

https://github.com/appsforartists/pixel ... lime-theme

And here's an issue to scale the entire UI from one setting:

http://sublimetext.userecho.com/topic/1 ... -displays/
appsforartists
 
Posts: 2
Joined: Tue May 28, 2013 6:08 pm

Re: Theming the Command Palette

Postby sneila on Wed May 29, 2013 12:54 pm

is there a way to know the label's value, so i can put some diff colors based on extension?
That is to make colored tabs, for different file types.

I know i can skin the tabs, but only general hover, active, disabled etc.

Could be nice to have some sort of way to color code the tabs based on *.js, *.css, and so on.
sneila
 
Posts: 12
Joined: Mon May 27, 2013 2:52 pm

Re: Theming the Command Palette

Postby familymangreg on Wed Sep 04, 2013 9:36 am

Hi all,

I'm new to Sublime text, coming from TextMate only a couple of hours ago.

I've create a custom setting file and a copy of the sunburst theme in my user packages area and have been able to override a few setting, things are looking pretty good.

One thing I'm now struggling to work out how to do is change the colour of the highlight bar in the commands (and similar) palette. Its currently a very similar colour to the background and thus difficult to see.

Any further tips on theming palettes would be much appreciated.

Many thanks,
familymangreg.
familymangreg
 
Posts: 1
Joined: Wed Sep 04, 2013 9:24 am

Re: Theming the Command Palette

Postby briano on Tue Jul 01, 2014 11:56 pm

Greg,

Did you ever figure out how to fix the colors in the Command Pallete? As you say, the selection color is almost identical to the background color.

Thank you,

Brian O
briano
 
Posts: 9
Joined: Tue Jul 01, 2014 11:52 pm

Re: Theming the Command Palette

Postby BUGMENOT! on Tue Oct 28, 2014 11:21 pm

Hi all, I figured it out (because my theme had a very distinct color for the command pallete background)

To not bore you, here the sweet stuff:

The following works for Sublime Text 2! I haven't tested in ST3!

The section in your theme file that controls the command palette is called quick_panel. Here's what my theme file looks like. The values are pretty much self explanatory.

Code: Select all
//
// QUICK PANEL
//

    {
        "class": "quick_panel",
        "row_padding": [5, 2],
        "layer0.tint": [49, 52, 55],
        "layer0.opacity": 1.0
    },
    {
        "class": "quick_panel_row",
        "layer0.texture": "Theme - Flatland/Flatland Dark/quick-panel-row.png",
        "layer0.inner_margin": [2, 2, 2, 2],
        "layer0.opacity": 1.0
    },
    {
        "class": "quick_panel_row",
        "attributes": ["selected"],
        "layer0.texture": "Theme - Flatland/Flatland Dark/quick-panel-row-selected.png"
    },
    {
        "class": "quick_panel_label",
        "fg": [144, 146, 147],
        "match_fg": [36, 150, 233, 255],
        "selected_fg": [255, 255, 255, 255], //selected foreground
        "selected_match_fg": [255, 255, 255, 255]
    },
    {
        "class": "quick_panel_path_label",
        "fg": [104, 106, 107, 255],
        "match_fg": [16, 130, 213, 255],
        "selected_fg": [215, 215, 215, 255],
        "selected_match_fg": [57, 60, 63, 255]
    },
    {
        "class": "quick_panel_score_label",
        "fg": [43, 151, 237, 255],
        "selected_fg": [43, 151, 237, 255]
    },


Now, here's how it works

fg stands for foreground color. To theme the background, put a bg key into the respective curly brackets, like so:

Code: Select all
{
        "class": "quick_panel_row",
        "attributes": ["selected"],
        "bg": [0, 255, 0, 255]          // this makes the selected row green (just for demostration purposes)
}


To style the text itself, use this:

Code: Select all
    {
        "class": "quick_panel_label",
        "fg": [144, 146, 147],                     // text color
        "match_fg": [36, 150, 233, 255],           // matched text color
        "selected_fg": [255, 255, 255, 255],       // color of the text in the row that is selected
        "selected_match_fg": [255, 255, 255, 255]  // color of the matched text in the row that is selected
    },


Good luck and enjoy!
BUGMENOT!
 
Posts: 20
Joined: Thu Sep 19, 2013 1:54 pm


Return to Technical Support

Who is online

Users browsing this forum: Exabot [Bot], Google [Bot], Yahoo [Bot] and 20 guests