Soda Theme - New Sublime Text 2 UI theme

[jbrooksuk]

I agree with @rdougan, it would be great to have access to the background color of the app with no files open through the theme.

+1 make it consistent! A nice grey background (gradient?) would be sexy!

Actually Jon, you have to make it accept gradient ranges! That would just be beautiful!

[buymeasoda]

That wasn’t what i meant Here the close button is only visible by rollover and the text fades out at the right side of the tab (both are new features for versions 2081 and 2082)

Ah, now I see what you mean. I’ve adjusted the theme with the details Jon provided on the new options, and moved to running the latest dev builds.

A summary of the changes

This is awesome Jon, thanks for all the details. Made updating the theme to accommodate those new features very easy.

Also, the buttons in 2084 should now pick up the label colour as desired - they’re no longer hard coded to white

Nice!

it would be great to have access to the background color of the app with no files open through the theme.

I would like to be able to set this as well. Working with a light setup, then closing files and seeing the large black square is a bit jarring.

And I have some new questions that came up during recent theme work:

• Is there are setting to configure text background colour to be transparent in places like the tab labels, quickpanels text and code completion suggest text? For situations where UI text sits on top of shaded graphics, having the background colour causes it to show up. The sidebar labels look to be render without having to have the background colour showing.

• Is there a setting to be able to control the text background colour and text colour of the text that renders in the input fields of the UI, like the Find / Replace fields and quickpanels? It is currently drawn from the code highlighting scheme.

To accompany the questions above, I’ve updated the “Theme challenges and ideas” wiki page over at github with some additional screenshots of those questions: https://github.com/buymeasoda/soda-theme/wiki/Theme-challenges-and-ideas

And I’m now a proud Sublime Text 2 licensed user Just finished my self-imposed two week “switcher” trial (I was previously a TextMate user), and it’s all looking good.

[natebeaty]

And I’m now a proud Sublime Text 2 licensed user Just finished my self-imposed two week “switcher” trial (I was previously a TextMate user), and it’s all looking good.

If this theme had been available when I became a licensed user, also making the switch from TextMate to ST2, it would have been that much easier of a decision. No offense to Jon, but the default Find dialog is an eyesore on the Mac version, and it’s something you use a lot.

The soda icons make it much easier to see at a glance what options are selected (regex, case sensitive, wrap, etc).

[ekolguy]

This is awesome Jon, thanks for all the details. Made updating the theme to accommodate those new features very easy.

I just tried the latest version of the theme and it does not seem to obey show_tab_close_buttons setting, ie still displays close buttons on tabs no matter what my setting is. Could you fix that please?

[buymeasoda]

Is there a setting to be able to control the text background colour and text colour of the text that renders in the input fields of the UI, like the Find / Replace fields and quickpanels? It is currently drawn from the code highlighting scheme.

Actually, thinking about this some more, maybe the solution is in the question.

If the text input fields are built to render using colour scheme rules, allowing a theme configuration to specify and use a separate / custom colour scheme file (one that the theme developer could design and include in the theme bundle), could perhaps be a way to achieve the desired result without having to change the input file text rendering implementation.

[jps]

btw, it’ll be a bit of time before I can code up extra theming support - adding support for the new features in OS X Lion is taking priority for the moment.

Is there are setting to configure text background colour to be transparent in places like the tab labels, quickpanels text and code completion suggest text? For situations where UI text sits on top of shaded graphics, having the background colour causes it to show up. The sidebar labels look to be render without having to have the background colour showing.

There are a few different types of label controls used, and the ones used in these locations only work properly on opaque backgrounds. I’d like to remove this restriction at some point, but there’s a considerable amount of work to do so while keeping sub-pixel antialiasing working correctly.

Is there a setting to be able to control the text background colour and text colour of the text that renders in the input fields of the UI, like the Find / Replace fields and quickpanels? It is currently drawn from the code highlighting scheme.

You can do this via adding a Widget.sublime-settings in your theme package, and overriding the colour scheme in there. Widget.sublime-settings accepts the same keys as Base File.sublime-settings, will override the settings in Base File.sublime-settings, and only applies to widgets. Take a look at the one in the Default package - it’s used to turn off things like line numbers and the line highlight, which don’t make sense for widgets to have.

[jps]

To accompany the questions above, I’ve updated the “Theme challenges and ideas” wiki page over at github with some additional screenshots of those questions: https://github.com/buymeasoda/soda-theme/wiki/Theme-challenges-and-ideas

Thanks for being so thorough with this btw - it’s very helpful!

[iamntz]

@jps: talking of theming, can you add a way of customizing bracket highlight look & feel? I would like to make bolder bracket and with a slight bg change (the underline is hard to notice sometimes and i have to stay like this: )
Thanks!

[buymeasoda]

btw, it’ll be a bit of time before I can code up extra theming support

Sure, I can understand that. Getting the Search / Replace button text change was the main one I was really keen on, and that’s in already

There are a few different types of label controls used, and the ones used in these locations only work properly on opaque backgrounds.

Good to know. Will save me from continuing to throw random settings at it, hoping to unlock the secret combination for alpha 0

You can do this via adding a Widget.sublime-settings in your theme package, and overriding the colour scheme in there.

I’ll have a play around with the Widget settings.

Thanks Jon.

[jbrooksuk]

btw, it’ll be a bit of time before I can code up extra theming support - adding support for the new features in OS X Lion is taking priority for the moment.

Not even being able to set a solid background color instead of black? Perhaps use an already existent setting?

[buymeasoda]

I just tried the latest version of the theme and it does not seem to obey show_tab_close_buttons setting, ie still displays close buttons on tabs no matter what my setting is. Could you fix that please?

When you say “still displays close buttons”, do you mean:

1. They are always visible on the tab, at all times, regardless of the setting
2. They are not visible, then when you hover over the tab, they become visible

Number 2 is what I have implemented at this time for the theme, but if I’m following along correctly with the most recent changes Jon has made to the default theme, the behaviour looks to have changed in the most recent dev build to be:

3. Never show the close button on tabs, even when hovering, unless “show_tab_close_buttons” is true, in which case show it all the time.

Is 2 what you are experiencing?

And at this time, is 3 the current, preferred / canonical behaviour for the close button?

[jps]

3 is the preferred behavior for the moment.

Implementing show-close-button-on-hover via the theme leads to artifacts, as it can cause the label to move around (as showing the close button on the tab makes the contents of the tab more congested, which will push the label out towards the edge). I’d like to add a way to do this where the label doesn’t move around in the future, but until then it’s better not to have the functionality IMO.

[buymeasoda]

I’ve now added a dark theme called “Soda Dark” to the theme code.

It’s available in the same git repo: github.com/buymeasoda/soda-theme

There’s a couple of things I’m hoping to address, such as the background colour in input fields (see earlier posts above). And I’ve noted a few more points on the “Theme challenges and ideas” wiki page (github.com/buymeasoda/soda-them … -and-ideas) that came up during the process of building the theme.

Enjoy

[Kronuz]

I love it! It looks so polished and nice. Makes ST2 look even more elegant! Thank you!!!

[Kronuz]

buymeasoda, could you make Soda Dark be just a little tiny bit darker? (particularly the panes look whitish, they’re a bit washed out.) Maybe just match the tone and contrast of the status bar a bit… and perhaps the background behind the tabs, it could match the tone of the sidebar, what do you think?

[guillermooo]

Great job with these themes! I find the light version too bright, but the dark one looks beatiful!

One remark, though:

At least on Windows, when you’re typing into Goto Anything, the highlighting of matching text in the paths is hardly visible.

See: imageshack.us/photo/my-images/225/winqi.png/

[iamntz]

There is any chance of releasing psd images on github as well? Thanks.

[natebeaty]

At least on Windows, when you’re typing into Goto Anything, the highlighting of matching text in the paths is hardly visible.

you can tweak these in Soda Dark.sublime-theme in lines 381-398:

{ "class": "quick_panel_label", "fg": [204, 204, 204, 255], "match_fg": [255, 255, 255, 255], "bg": [33, 33, 33, 255], "selected_fg": [204, 204, 204, 255], "selected_match_fg": [255, 255, 255, 255], "selected_bg": [30, 30, 30, 255] }, { "class": "quick_panel_path_label", "fg": [102, 102, 102, 255], "match_fg": [130, 130, 130, 255], "bg": [33, 33, 33, 255], "selected_fg": [102, 102, 102, 255], "selected_match_fg": [130, 130, 130, 255], "selected_bg": [30, 30, 30, 255] },

i also wanted a slightly brighter match color.

thanks for putting together a dark theme! really easy on the eyes, very much appreciated.

[Anomareh]

The dark theme is amazing! Should be the new default theme imo.

My only complaint is the status bar. The gradient really doesn’t look good there. Should be flat or a much subtler gradient.

[buymeasoda]

Thanks for the feedback

If people don’t mind, for those having any issues, can you post the basics of your operating environment? So I can understand if certain problems or differences are only occurring with certain OS setups. For example, one of the developers at my work has text rendering with a black background in the goto anything results text on Ubuntu, but in other setups it is fine.

If you can, please include: Operating System and OS Version. So far, the theme design and development process has been done on machines running Mac OS X Lion and Snow Leopard.

And screenshots are really welcomed if the issue is tricky to describe.

Ian