+1,212
posted by Josh Bjornson, updated 3 days ago , 81
The background color of the sidebar is quite different than the rest of Sublime Text and stands out quite a bit with a dark color scheme. It would be nice if the sidebar coloring was consistent with the rest of the user interface.
Vote
+19
It'd be really cool to be able to specify the sidebar colours in the theme files too.
+2
Because of the cross platform nature of the program, I think this is the only option that makes sense.
+3

Check out my theme, which styles the sidebar to match the default dark scheme!



You can download it here: https://github.com/iGARET/sublimetext-defaultplus-theme

+12
I disable the sidebar completely right now since it's colour scheme is way out of wack compared to the rest of my system. +1 for this.
+3
I got used to the colour but a setting would be great.
+2
+1 for that. Would be nice to use current theme's background/foreground color for sidebar bg and text.

P.S. Top menu affected by theme colors is also a good thing to have.
-1
+1 for top menu. I can't hide it on Linux, so I'd like to theme it at least.
+64
It would be great if folders used a bold face, like TextMate. I also think icons make sense to help visually group files and folders. Compare:






+9

I think this is a different issue to the question of setting the sidebar theme colours. Might be worth a separate thread.


For my two cents I prefer the ST2 simple and clean layout over the TM one which is busier and uglier in my opinion. So if the TM option were to be implemented I would very much want it to be an option to choose between the two because I think Jon's current choice is the right one and wouldn't want to have it taken away and replaced with the TM one which I think is worse. 

+2

 I actually think Sublime's version looks a lot nicer and cleaner. Folders have a > next to them. The file-ending tells you what kind of file it is. No need for extra clutter.

+4
Edit User preferences and add this line:

"bold_folder_labels": true,

Source: http://wesbos.com/category/sublime-text/


+4
The current scrollbar is way too hard to see -- there is too little contrast between the thumb and the track. And why are there no scroll arrows?
+8
This is possible in most recent builds, see my sidebar:


+3
Care to share your sidebar-theme options?
Please share how you did this! :) Thanks :)
+1
Please, Please share how did you change it to black.
+2
I agree that the theme of the sidebar must change but I also feel that it's easier for the user to distinguish folders and files if they also have different icons. Right now it's difficult to navigate because of that.
+15
I don't care about actual themeabilty (is that a word?) of the sidebar as much as additional visual indicators (icons, bold folders) for the displayed items. So, +1 here.
+3
I would LOVE some icons!!!! like chocolate editor (nice) http://d.pr/Zx4a

Theming has been possible for a while, but this is the only published custom theme I've seen:


https://github.com/buymeasoda/soda-theme


Fortunately, I've never felt like I needed another one.

+18

You can set this for yourself.

Have a look in this file:
Packages/Theme - Default/Default.sublime-theme


You are seeking these settings:

    // Original settings

    {

        "class": "sidebar_container",

        "layer0.tint": [80, 80, 80],

        "layer0.opacity": 1.0,

        "layer0.draw_center": false,

        "layer0.inner_margin": [0, 0, 1, 0],

        "content_margin": [0, 0, 1, 0]

    },


    {

        "class": "sidebar_tree",

        "row_padding": [8, 3],

        "indent": 12,

        "indent_offset": 17,

        "layer0.tint": [214, 221, 230],

        "layer0.opacity": 1.0,

        "dark_content": false

    },


    {

        "class": "sidebar_heading",

        "color": [96, 110, 128],

        "font.bold": true,

        "shadow_color": [255, 255, 255],

        "shadow_offset": [0, 1]

    {

        "class": "sidebar_heading",

        "parents":

        [

            { "class": "tree_row", "attributes": ["selected"] }

        ],

        "shadow_color": [0, 0, 0] 

    },   



    {

        "class": "sidebar_label",

        "color": [0, 0, 0]

    },    Make a copy of those original settings so you can rollback if your experiments go wrong.

Then hack away at the settings until you get something you like. 

 
The bit you can't set there is the highlighting bar.For that you need to find this file:
Packages/Theme - Default/row_highlight_wide.png


Make a copy of that file to serve as a backup. (Safety first always!)


Then open the original file in your favourite image editor and change the colour to whatever you want.


If the changes you are making are not displaying then you may need to restart Sublime Text 2 to see the changes reflected.


Run amok and have fun. I've tried a few different ideas so far and am getting close to what I to be the permanent setting. The few hours of setting this up has been enough to convince me to buy Sublime Text 2 to reward developers who put so much control for this in my hands in such an elegant way. No nasty colour pickers etc etc. Just lovely settings I can change in the editor itself. An editor that knows its audience are savvy enough to want to use code to set things up. Simple brilliance.

Ah, this is exactly what I was looking for!  This feature should be marked as completed. 

+3

 I agree this is "done" IMHO.


The point I forgot to make in my posting is to remember to keep a copy of your preferred settings/files in case a future update overwrites them.


Jon may need to replace the files at some point so may wipe away your hacking and a copy will make it faster to get back to where you want to be.


+3

I have just realised that the 'right' way to do this is to copy the 'Default.sublime-theme' file into your 'Packages/User' folder and make changes in there. These changes will override the original default settings in a non-destructive way that should survive updates.


Learning, learning all the time.

+1

If you have multiple Default.sublime-theme files, they'll be merged together (in a similar fashion to how multiple CSS files are applied). You can make a User/Default.sublime-theme file, and place only your customised rules in there - that way, when Default.sublime-theme is updated, you'll still recieve the updated portions, while retaining your customisations.

Hello, Thanks for Info, this is working like a charm:) BTW I'm wondering is it possible create backup file when any text file is edited. I know its may be bit off topic int this thread but I am really looking for this feature :) Thanks :)
+107

Scanning the current source tree makes it very difficult to identify between folders, files and filetypes. The current situation may be clean but this is form in favor of function. Form should enhance or compliment function not exclude it.


I propose a sidebar theming option to add icons based on filetype. Something in the like of the following:


- Folder names are bold

- Each filetype has a unique icon and preferably a unique colorcode

- Any filetype is supported but only the most common are actually themed


{"class": "sidebar_items","content_padding": [0, 0, 0, 20],"content_background_width": [16],"content_background_height": [16],"content_background_image": {"filetype:css": "Packages/Theme - Default/stylesheet.png","filetype:js": "Packages/Theme - Default/javascript.png","filetype:json": "Packages/Theme - Default/json.png"}}


+16
Awesome! This is exacly the thing i'm missing in ST2 right now. It makes it so much more clearer what the files in the sidebar represent. Now just the support for version control in the context menu and i'm all happy :)
+7

Thanks!


But I'm not into integrating version control.


As VCSs are moderately complex and different from one another it would be impossible to satisfy everybody's VCS needs making you settle for a half baked solution. Use the right tool for the job, an editor for writing your code and a dedicated VCS app for versioning your code.

+1
I would like version control ability, but I agree, there are many different types and it would be hard to make everyone happy.
I think a good solution would be to integrate a bash/command prompt that follows the file you are currently editing or the folder you have highlighted in the sidebar. This way you can do VCS from the terminal without leaving sublime (as long as your VCS supports command line controls, which I think most do, even in windows)
+4
What about a very lightweight integration? i.e. only adding overlays to your file icons based on status (added, modified, in sync).

I agree the actual operations are better managed from a dedicated client, but having visual cues is really useful to me.
Is there somewhere we could download the icon pack you used?
+1
Fully agree: this is so much more legible and usable like this.
+3
Hello!

Could you help me?
I'd like to insert these icons to Sublime, but I don't know where to paste the config you posted here.

Thx!
+1
Hello,

i need to have this on a PC, how could i do this??????
+2

Hi, I love this so so so much. Can you share it? add the code above is not work, how to do it? Thank you.

+1

I assume this is a mockup, else how did you manage to get this working in sublime text 2? This would be far more than ideal to have in ST2.

Does not work with Sublime Text 3. Can you update this code for ST3?

I've made a plugin to list files and folders in a view taking profit of ST2 color capabilities. It displays different colors by extension and a sort of "icons".
It doesn't look as beautiful as your screenshot but is way better than flat colors.


Feel free to try it, it's on github: https://github.com/estufa8/miFil.git
+1
I really think it should look like this by default. I spent a few hours hacking away at the sublime.theme file and came up with this: http://cl.ly/D3ji
I think it's awesome, personally, and I code with a light-on-dark theme as well. I just wonder if there'd be a way to automatically switch the sidebar to the other, lighter theme if your colour scheme was one of the dark-on-light ones...
+1
Ooh, nice!

Can we have the source, please?
+1

That's pretty :) With that scheme, it would be nice if the background melted into the sidebar

+5
Some nice screenshots there. Inspired me to just hack away for 5 minutes and create mine, inspired by Austin's and uid's screenshots.


Just place this in the Packages/User folder and save as 'Default.sublime-theme'


My Sublime Text sidebar theme




If you want the sidebar border back, just change the tint of the sidebar_container class to whatever colour you desire (snippet below).


    {        "class": "sidebar_container",        "layer0.tint": [38, 38, 38],        "layer0.opacity": 1.0,        "layer0.draw_center": false,        "layer0.inner_margin": [0, 0, 1, 0],        "content_margin": [0, 0, 1, 0]    },


+15
As a workaround, I put folder icons in the disclosure icon images.  It's a hack, but at least I can visually navigate the sidebar now :)

You can download my modified files here: SodaWithFolders.zip
-6
Nice one Ricci, that "almost" makes it bearable to use ST2, that is the biggest stick I have with ST2. I could be wrong, but I have a feeling due to the nature of cross-platform, we lose some core OS features that are built into using native components (like interface builder provides to OS X).
Nice work.That looks clear now.
I know i am a noob, but where do i put this theame on a PC?? running win 7
+1

I downloaded your zip but got same errors.


I changed the Soda original theme, copied your images and created a Github repository: https://github.com/leonardofaria/soda-theme

+8
Hey guys, I'm a dark theme user so I decided to also do some folder icons.


As easy to drag and drop the images as their width and height are the same as original. So no theme modification is needed.


You can get them here  Soda-Folder-Icons.zip 




I just copied these icons and it looks excellent with the dark Soda Theme. Thanks a lot!

@Austin Condiff - Can you share you config please :)?
I've made changes to both Packages/Theme - Default/Default.sublime-theme and User/Default.sublime-theme and have restarted Sublime but I'm not seeing anything taking effect. I'm using the (default) color scheme – does that have any connection to the "theme" file?
+5
I've created something thanks to this post, you can grab a dark sidebar here  http://samuelbran.com/descargas/sublime-text-2-dark-sidebar/ 


This is excellent!!! Thanks for sharing Samuel!

Yes, thanks very much.  Just great.

Thanks everyone for the helpful posts.

Cheers!


Hello. I also think that the sidebar should have a better look by default.


I personally don't care because I use soda dark light theme, but, when I take a look at the desktop of my co-workers that didn't took time to properly configure their sublime text, it's just ugly and aggressive for the eyes (all of us need to activate the sidebar, we're working on a quite big program).

Here's a version that works with the most recent version of Sublime Text 2 (as of today, 2013-02-19): download via DropBox.


(Note that only the Soda Light theme has been updated.)

Theme - Nil has a nicely themed sidebar and its .sublime-theme is commented well explaining what each of the elements do if you want to look at an example.

I use Theme - Nil, but then paste in the sidebar folder icons code from Phoenix Dark (replace all class "disclosure_button_control" entries and include file group-closed.png and group-open.png). This will give you nice folder open and closed icons.



+1

Could you share your modified Nil theme somewhere? 

Thanks in advance!

Thanks! Much better now :)

+13

What do y'all think of this new UI concept? This design incorporates a new sidebar design and consolidates the tab and title bars allowing more screen real estate for your code. Click the image to see a more detailed view of the design.



New UI Concept

+2

Awesome! Where can I get it?!?  :D 

It's beautiful. I would like to create a theme based on this if you can also make command palette, status and search bar. Unfortunately it's impossible to merge tab and title bar.

+1

What a clean look! Is it possible to skin ST2/3 that much though? It should really be made as a default out of the box. Your design makes me reconsider whether I really need the footer bar.

+1

I will just say that I would pay well to get icons on the sidebar and a better GUI for the settings. It's really frustrating.

-2

I'd like an "educational theme" for coding with Sublime. Here's my example: 


I posted this specific sidebar theme feature here: 

http://sublimetext.userecho.com/topic/216947-/


VOTE IT UP! 

I wrote a nice little theme that re-styles the sidebar to match the default theme better.

You can download it here: https://github.com/iGARET/sublimetext-defaultplus-theme

Wow, I really like the design and the complete user interface.
It would be great to change the colour based on filetype, or even give the folder a colour manually. This will allow the user to make navigating the sidebar on a large project much more intuitive.
I would like to see treelines, vertical lines that indicate the folders indentation level, so it would be visualy easy to spot the parent folder of a folder or file list
Here's my current Sublime Text 2 setup, original theme was Deep Blue See from Color Sublime. I edited the tabs and almost everything else, heh. Custom grid layout too.