Sublime Forum

Soda Theme - New Sublime Text 2 UI theme

#15

That wasn’t what i meant :wink:

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):

If i change to your theme it looks like this. The text fades at the right side but the close button is always visible:

After i restart sublime text it looks like this. The text doesn’t fade anymore but includes an ellipses ("…"):

0 Likes

#16

I suspect this comes from Soda.sublime-theme being derived from the default theme that shipped with build 2076, but there have been a few changes to the default theme in the dev builds since then, to fade the tab labels and do a few other things.

A summary of the changes:

tab_control

Changed the content margin, and added the max_margin_trim, which allows it to shrink the content margin when space is tight:

"content_margin": [20, 4, 20, 4],
"max_margin_trim": 4,

tab_label

Added the fade property, which will cause the labels to fade rather than elide:

"fade": true

tabset_control

This has been setup to assign the mouse_wheel_switch property based on the mouse_wheel_switches_tabs setting:

{
    "class": "tabset_control",
    ...
    "mouse_wheel_switch": false
}

{
    "class": "tabset_control",
    "settings": "mouse_wheel_switches_tabs"],
    "mouse_wheel_switch": true
},

tab_close_button

Now uses unpadded_cross.png, and the content margin has changed from [8, 8] to [5, 8, 4, 8], i.e., it’s now 9px wide rather than 16px wide.

Also, tab close buttons are now hidden by default, and shown only if the show_tab_close_buttons setting is true. This is done via:

{
    "class": "tab_close_button",
    ....
    "content_margin": [0, 0]
}

{
    "class": "tab_close_button",
    "settings": "show_tab_close_buttons"],
    "content_margin": [5, 8, 4, 8]
}
0 Likes

#17

Note that if you apply these changes to the theme, then it’ll require build 2083 or later to work as expected. The next non-dev build will be out in a week or two.

0 Likes

#18

There’s a further change in 2084 now: the sidebar headings now have their font style assigned by the theme, so if you’d like them to remain bold, you’ll need:

{
    "class": "sidebar_heading",
    "color": [96, 110, 128],
    "font.bold": true
},

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

0 Likes

#19

Great theme. Good work!

@jps

Is it possible to add some text-shadow to some of the text properties? (sidebar_label, sidebar_heading, label_control, etc.). Would finish it off nicely.

Also, right now I don’t think you can change the main window background color:

0 Likes

#20

Good job!

0 Likes

#21

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.

0 Likes

#22

+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!

0 Likes

#23

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.

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

Nice!

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 :smiley: Just finished my self-imposed two week “switcher” trial (I was previously a TextMate user), and it’s all looking good.

0 Likes

#24

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).

0 Likes

#25

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?

0 Likes

#26

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.

0 Likes

#27

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.

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.

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.

0 Likes

Interface Suggestions Discussion: Style console output
#28

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

0 Likes

#29

@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: :open_mouth: )
Thanks!

0 Likes

#30

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 :wink:

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

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

Thanks Jon.

0 Likes

#31

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

0 Likes

#32

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:

  1. 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?

0 Likes

#33

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.

0 Likes

#34

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 :smile:

0 Likes