sublimetext/spacegray

A Hyperminimal UI Theme for Sublime Text

Spacegray

A set of custom UI themes for Sublime Text 2/3. It's all about hype and minimal. Comes in different flavors with accompanying Base16 color schemes.

---

Themes

Spacegray

Default flavor based on Base16 Ocean Dark color scheme.

Spacegray Light

Light variation based on Base16 Ocean Light color scheme.

Spacegray Eighties

A variation based on Base16 Eighties Dark color scheme.

The font used in the screenshots is Source Code Pro.

---

How to Install

Via Package Control

The easiest way to install is using Sublime Package Control, where Spacegray is listed as Theme - Spacegray.

1. Open Command Palette using menu item Tools -> Command Palette... (⇧⌘P on Mac)
2. Choose Package Control: Install Package
3. Find Theme - Spacegray and hit Enter

Manual

You can also install the theme manually:

1. Download the .zip
2. Unzip and rename the folder to Theme - Spacegray
3. Copy the folder into Packages directory, which you can find using the menu item Sublime Text -> Preferences -> Browse Packages...

---

How to Activate

Activate the UI theme and color scheme by modifying your user preferences file, which you can find using the menu item Sublime Text -> Preferences -> Settings - User (⌘, on Mac).

You can choose whichever flavor you like, but don't forget to change both color scheme and UI theme so they match.

Note: Don't forget to restart Sublime Text after activating the theme.

Settings for Spacegray

{
  "theme": "Spacegray.sublime-theme",
  "color_scheme": "Packages/Theme - Spacegray/base16-ocean.dark.tmTheme"
}

Settings for Spacegray Light

{
  "theme": "Spacegray Light.sublime-theme",
  "color_scheme": "Packages/Theme - Spacegray/base16-ocean.light.tmTheme"
}

Settings for Spacegray Eighties

{
  "theme": "Spacegray Eighties.sublime-theme",
  "color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme"
}

---

Settings

Tab labels font size

Copy and paste one of four options in your user preferences file:

  "spacegray_tabs_font_small": true

  "spacegray_tabs_font_normal": true

  "spacegray_tabs_font_large": true

  "spacegray_tabs_font_xlarge": true

Tabs size

Tabs height:

  "spacegray_tabs_small": true

  "spacegray_tabs_normal": true

  "spacegray_tabs_large": true

  "spacegray_tabs_xlarge": true

Tabs width:

  "spacegray_tabs_auto_width": true

Sidebar labels font size

  "spacegray_sidebar_font_small": true

  "spacegray_sidebar_font_normal": true

  "spacegray_sidebar_font_large": true

  "spacegray_sidebar_font_xlarge": true

Sidebar tree rows height

  "spacegray_sidebar_tree_xsmall": true

  "spacegray_sidebar_tree_small": true

  "spacegray_sidebar_tree_normal": true

  "spacegray_sidebar_tree_large": true

  "spacegray_sidebar_tree_xlarge": true

Hide navigation icons in Sublime Text 3

  "enable_tab_scrolling": false,

Enable sidebar fileicons (only works in Sublime Text 3)

  "spacegray_fileicons": true,

Disable custom OSX Title Bar in Sublime Text 3

Useful if you're using native OSX tabs since the custom Title Bar breaks the native tabs

  "disable_custom_title_bar": true,

---

Thanks

The Spacegray Eighties variation is contributed by Yoshua Wuyts.

spacegray's Issues

Extreme low contrast on some characters while typing.

When you're working on a HTML document and enter a "<" to start a tag, this character remains darker than the background color and becomes almost completely invisible. As soon as you continue typing, the opening bracket becomes visible.

Theme isn't applied completely on ST 3

Hi,

I installed the theme on Sublime Text 3 on OS X.

Only the 'editor part' is getting the theme. Why the navigation (left side menu) is still the same?

Thanks.

Sidebar bgcolor

Hi,
The sidebar bgcolor is different from the screenshot (lighter) you added that in your commit @c8568f363bdcda61785da6c4247d433eee66fede (The previous values were right)

Maybe it's not a bug and you really wanted to make the sidebar brighter, would it be possible to add a "dark sidebar" version of the theme ?

Find box text is not vertically aligned

First of all, great theme.
A minor issue (but a huge annoyance) is that the find field's text is not vertically aligned (most likely only a Windows issue as in your screenshot it looks right).

It would be great to do the same color scheme for OS X Terminal

Sidebar heading and tab bar vertical alignment

Hey there, loving your theme but one thing has really been bugging me - when selecting the first item in the sidebar it becomes apparent that it is not lined up perfectly with the tab bar, see below.

I've implemented a fix locally by adjusting the sidebar container margin to move the whole section down, and then offsetting the title text back up using the shadow_offset property, so the title is centred nicely:

    // Sidebar container
    {
        "class": "sidebar_container",
        // "layer0.texture": "",
        "layer0.opacity": 1,
        "layer0.tint": [35, 40, 48], // -01
        "layer0.inner_margin": [1,5,2,1],
        "content_margin": [0,7,0,0] // Push container down in line
    },

...

    // Sidebar heading
    {
        "class": "sidebar_heading",
        "color": [79, 91, 102], // 02
        "font.bold": true,
        "shadow_offset": [0,6], // Offset heading up to vertically centre
        "shadow_color": [35, 40, 48] // Make heading shadow match background
    },

I would have sent you a pull request for this fix if it did not have an unintended consequence - when multiple headings are shown, for instance when Sublime is in two columns, the alignment for other headings is slightly off with the previous selected item:

Hopefully you will know a lot more than me in terms of better ways to fix this, so I am just bringing it to your attention. I am going to keep using it like this for the time being, as it seems the lesser of two evils!

Thank you for making this theme awesome :)

Sublime Icon

Well done.

You've created such a beautiful theme and color scheme but alas there is one last remnant of ST's ugliness... the app icon.

A spacegray icon would kick ass, just sayin'.

Rendering bug when switching projects

hey there,
there is a nasty rendering bug with your theme when switching projects using cmd + ctrl+ p in ST3 OSX Build3059. I attached a screenshot of it. It works with the default theme and 'flatland', so it definitely is a theme issue.

File Changed Icon Being Removed

I change a file, switch to another without saving, then switch back, the unsaved file's icon is reverted to the X to close and more changes must be made before it is shown again. Even switching away and back does not bring the O for unsaved.

Sublime Text 2, v2.0.2 Build 2221

Code Folding support?

It seems you can't code fold (with the UI on the left by the line numbers) anymore when using this theme.

Base 16 Missing (Sublime Text 3 on Mac OSX)

I just installed your Theme using the package manager. I'm using Sublime Text 3 on Mac OS X 10.9. The About Sublime Text reports I am using Stable Channel, Build 3059.

I followed your directions to configure Sublime to use your Theme. When I save the settings file, Preferences.sublime-settings, I get the following error:

Error loading colour scheme Packages/Theme - Spacegray/base16-ocean.dark.tmTheme: Unable to open Packages/Theme - Spacegray/base16-ocean.dark.tmTheme

The Theme appears to load correctly. As mentioned in the output text, the colors aren't right. I've attached a screenshot showing what I see.

Digging in deeper, I notice that I don't actually see this Theme's files in my Packages directory. I assume I'd see a folder called Theme - Spacegray but it's not in there.

Any suggestion on what might be going wrong? Or, could this be an issue with something broken in either Sublime Text 3 or the Package Control package?

On Sublime Build 3059, the Default Sublime Tab-Switching Arrows Are Used

I'll preface this acknowledging that 3059 is a beta, but Spacegray doesn't seem to have icons optimized for the new tab switcher. I've attached a screenshot to show what I mean.

Color issue on scrollbars

https://github.com/kkga/spacegray/blob/master/Spacegray.sublime-theme#L241
I believe this should be: [60, 60, 60] as the vertical scrollbar is :) .. currently on a horizontal scrollbar it's impossible to see the puck.

Although personally I've changed the scrollbar backgrounds to: [35, 40, 48] and the pucks to: [52, 61, 70] so it blends nicely with the "folder view" sidebar.

Error Loading Colour scheme.

JSON - Font color for uncompleted Boolean value is hard to see

Using the dark theme,

1. Create a new file
2. Set language to JSON
3. Create an anonymous object. Eg. { "Boolean": true }

Expected: Boolean value should be more visible before typing is completed.
Actual result: color for uncompleted value blends with the background.

2 Column View Not Functional

I was unable to use the 2 column view (option + command + 2) with this theme. Switched back to flatland as a result since I use that view frequently.

Sidebar needs better file highlighting

It would be helpful to have the structure highlighted of the active file. So if I have a structure like this:

Root
| Folder 1
| | Sub Folder 1
| | - File 1
| | - File 2
| | Sub Folder 2
| Folder 2
| Folder 3
| File 3
| ReadMe.md

And I was working on File 2, Root, Folder 1, Sub-folder 1, and File 2 would be highlighted, like the hover state there is now. Otherwise sometimes it is a bit hard to parse where you are if you have a larger project open.

I am mostly talking about the Dark theme here as I have not used the light theme.

Padding still not fixed.

Related to #35 and #34

This still isn't fixed with the latest changes. Changing the "content_margin" back to 6 works perfectly.

"content_margin": [4,4,4,4]

"content_margin": 6"

Still not completely lined up with 6, but it's a lot better than [4,4,4,4].

Font type?

Hello, what is the font type you are using on the screenshots?

Restore search buttons and input field to original form

Now that the search buttons and input field have become the same color as the background they've become impossible to distinguish from one another. I get that you're trying to build an even more minimal version, but when form undoes function you might be taking it too far.

Compare the two screens below and try to do the following tasks:

• Find and focus on the search field
• Properly anticipate where your text will start in the search field
• Click the find button

You'll notice that the visual surface for interaction is drastically limited when blending in buttons with the background (they become ~1/4 the size they originally were, visually). Buttons become visual stressing by having a small surface and being a distinct color they distract from the actual task: providing input.

Your first design (as seen on your splash page seems like a better UI. It might not be the best solution (there were some issues with contrast, were there not?) but it's definitely better than the way we're heading now.

So I'm asking you to undo this change and provide a better experience for the user.

Contrast & colors

Howdy. Do you, by any chance, plan to support additional color schemes for this excellent theme? The default color scheme doesn't provide quite enough contrast I think. If you're willing to accept a PR containing the tomorrow night eighties settings I'd be more than happy to help you out.

Highlight current file in sidebar

Thanks for creating this great theme for Sublime.

I'm using Sublime 3 and I feel hard to find which file I'm editing in the sidebar. It's not highlighted as default Sublime theme. I think you should add this, a small but useful improvement.

Thanks.

Syntax Highlighting Ruby

There's a problem with syntax highlighting in ruby not being correct when using:

puts "hello #{name}"

to create strings.
This happens with all the colorschemes provided by the theme.
Here's a picture of how it looks:

Integration with Base16 builder

Would it be possible to create a Base16 template so the whole theme can be generated using the Base16 color schemes?
This way we would have a general flat ST theme with multiple matching color schemes.

Padding in the bottom input fields are off a bit.

It's quite noticeable. Not a huge deal, but is a minor aesthetic annoyance.

Overlay Scrollbars: the active color of 'puck_control' is same with 'scroll_bar_control'.

I think it's better if they are different.

So I modifed the color of puck_control as below:

[52,61,70] // the origin color of both puck_control and scroll_bar_control
=>
[28,31,38] // the color of tabset_control

selectionBackground/selectionForeground color

I see a difference between selectionBackground/selectionForeground colors of screenshot in http://kkga.github.io/spacegray/ (yellow back, black front) and the one installed in dark/eighties scheme (gray #515151 back/light gray front).
In my screen the contrast of two gray is really poor and the pair of colors in screenshot seems really better.
Could we have a scheme like the original in screenshot?

Font used in screenshots

Hi,

What font face has been used in the screenshots?

Thanks in advance,

--larsw

alignment and color error in find/replace bar

I'm using Sublime Version 2.0.2 (Build 2221) and the following is what the find/replace bar looks like:

It appears the line-height/alignment is wrong and the buttons and input bar are not colored appropriately (same color as the rest of the bar). This is not how it appears in example screenshots.

Empty window color wrong in Eighties scheme

It looks like the standard Spacegray color theme's empty window color 43, 48, 59 got put in the Eighties theme on line 324.

Should the sidebar color be modified by the Theme?

I'm comparing my Sublime Text appearance with the one you have shown in your screenshot in the README.md file.

My side-bar is still the typical Sublime Text gray. Should this have been changed by installing your theme?

I've included a screenshot for comparison purposes. It shows your screenshot next to my running instance of Sublime Text 3.

Monokai version

It would be awesome a Monokai adaptation for this :)

dose not look same like screenshot

wrong please delete this issue my mistake

Not enough contrast for opening < character

Hi,

I've found only one little issue with this awesome theme. On a html document, when I start a new tag with "<" the text is nearly black. It would be better with the same color as the "finished" tags (light gray).

I wanted to make a pull request but can't find what key is used to color this.

Visual Improvements

Loving the simplicity of this theme.

A few suggestions though:

• Option to add more vertical space to the files in the sidebar
• Option to have bigger height tabs
• Better presentation for the Command Palette

This last one might need explanation. What bothers me with the current form is that the options are pretty close to the dialog edges. I guess that bigger padding or a border around the entire dialog would be an improvement here.

Cheers.

Side bar has light background on ST3

Not sure if I did something wrong or if there is something I need to change, but my left side bar is light background. I've included in the screen shot my settings and my about window so you can see version number.

Any way to integrate this theme into a Jetbrains IDE?

This is a little off topic, but is it possible to import this theme into a Jetbrains IDE, such as Rubymine or Webstorm?

Sidebar issues when trying to use default Ocean Dark theme/color scheme

When trying to switch my theme over to the Ocean Dark theme, my side bar showing all my project files is getting really screwed up. Here's a few screenshots of what's happening:

The first 2 happen when I just add the theme preference (but still keep the color_scheme preference) and restart Sublime, and the 3rd happens when I start adjusting the size of the sidebar.

I've tried restarting Sublime a few times with no luck. I'm using Sublime 2 and Mac OSX if that helps at all.

If there's any other details I can provide let me know.

EDIT: I've just tried using the Light and Eighties themes, and the same problem is occurring in those themes as well (color_scheme working alright, but when trying to add the theme variable in the preferences, things stop working)

Possible to change background of terminal output as well?

Love the theme! My terminal output is still pure black, however. Is it possible to update the background color there as well?

Highlighted item consistency.

I love this theme - but I think there is an inconsistency with the select/highlight colour, which can cause confusion.

In most places - the highlighted item is a lighter colour, see the screen shots:

Whereas in the package manager or file switcher - the highlight colour is darker - which causes confusion. Especially when faced with two items.

Java source hightlighting

Spacegray is a great theme.
I'm not sure if this is intended to be, but there seems some tiny issue about displaying Java source.
As the attached images showed, all of the normal words and brackets become yellow.(Same color as the class name)
And after I've deleted "meta.class, " from the Classes key in the file base16-ocean.dark.tmTheme, things look good.
Maybe the Classes key should be designed more specific?

before deleting "meta.class, " from base16-ocean.dark.mod.tmTheme:

after deleting:

Visibility of Scroll bar should be improved.

Scroll bar isn't visible properly in both color scheme base16.ocean.dark and base16.ocean.light.

Space between syntax and tabs

There is no space between language and tabs settings.

I chose the Spacegray Theme, but the Tabs and the Find Toolbar aren't Flat

I chose the Spacegray Theme, but the Tabs and the Find Toolbar aren't Flat as seen on this screenshot:

Inverted Code Folding Arrows

The code folding arrows seem to be inverted.

The arrow next to the collapsed code points downwards while the one next to expanded code points towards the code.

It should be the other way around. The way it is in the sidebar and as depicted in this dribbble shot here

A little more contrast would be nice too.

Not Responding When Opening Command Palette

Is this happening to anyone else? If I do Cmd + Shift + P, Sublime Text 2 locks up and crashes. This could be a conflict with something else.

What font are you using in the demo?

Not really an issue, but was curious to know what font you're using in the demo screenshots.

Better handling of many tabs

Firstly, thanks for an awesome Sublime Text theme. :)

I tend to work with a few too many tabs open at any given time (note to self: get better at this).

While doing so, I noticed that the design of the tabs doesn't minimize too gracefully, with the text floating outside of the tab. Perhaps this was intentional?

http://cl.ly/image/2N2j3t1B0P2T

Perhaps having the minimum width of the tabs be slightly wider, and the text only popping out from the left (rather than from both sides) would be a more elegant solution?

Thanks, again, for a great Sublime Text theme. :)

Not enough contrast in Spacegray Light

Usually light themes being used during the daylight. "Spacegray Light" lacks contrast to use it when days are sunny.

Syntax highlighting

Where can I edit the syntax highlighting rules? I've noticed that it doesn't highlight the delete keyword in JS files.

I'm using Spacegray.