UI theme announcement and feedback request


#1

The last few days I have been working hard on Isotope UI. What started as a minimalized variation of One Dark UI, ended up as an exploration of customisability in a UI theme. With its 1.0.0 release it’s possible to go from flat and minimal all the way to garish and colourful. You can make it roomy and spacious on your 27", or tiny and compact on your 11".

I will be further exploring customisability, and am looking for your input. What do you look for in an editor’s UI? Is the default contrast ok, too little or too much? A specific font that you like?


#2

Very nice, altho i did have to restart atom to see the config settings.


#3

I really like the idea behind your UI-theme, seems quite nice!
However under linux, the scrollbars don’t hide (fedora 20, gnome 3.10/3.12), so it doesn’t look
as good as under OS X obviously. I hope that autohiding scrollbars will be a feature in atom-core in the future for all platforms (or having support on Gnomes side).

Besides that:

  • color contrast for fonts could be slightly higher for me


#4

I like the idea of a customizable UI theme very much! But the colors it chose just don’t do it for me:

This is the syntax theme I’m using: https://github.com/olmokramer/atom-dark-flat-syntax

I think there should be some sort of override in the settings for the base color


#5

Thanks, that’s a great idea… “why didn’t I think of that” :+1:


#6

@olmokramer I just published a patch that lets you set your own background color.

I’m looking into making contrast configurable (which is tough) or perhaps simply boosting it a bit (which is easy).


#7

Much better! The settings view remains an issue though:


#8

@nylki You could try to hide the scrollbars in your styles.less like this:

.scrollbars-visible-always ::-webkit-scrollbar {
  display: none;
}

You could still scroll with a mousewheel etc., you just wouldn’t see the scrollbars. But haven’t tested if the selector also works on Linux. Maybe the theme could have a setting for this too.


#9

I really like the “compact mode”. Great on smaller laptops.

The image as background is neat too… finally I can look at Justin Bieber the whole day!!! :smile: Just kidding… but some washed out, blurry background image should be nice.

I agree that the text could be slightly brighter. But it’s pretty relative in what environment you’re in. If you’re in a dark room at night, it’s probably fine. Daylight less. One day we’ll get ambient light media queries and then it could adapt automatically. Maybe already possible with JS: http://www.girliemac.com/blog/2014/01/12/luminosity/


#10

I can confirm that works on Linux, in the end it’s just CSS. You’ll want to add the /deep/ selector, though, to also hide the scrollbars in the editors, like this:

.scrollbars-visible-always /deep/ ::-webkit-scrollbar {
  display: none;
}

#11

Yes, that can’t really be helped at the moment. I can’t change variables in the less stylesheet, so only the background color of the application changes. There is some work on letting you play with variables in settings-view, and I’m hoping for that to enable custom colors, contrast, etc. throughout Isotope UI.



#12

I just published a patch (1.0.3) that improves the look without hiding the scrollbar. Would love to hear your feedback on that!


#13

What did you want to change in regards to the scrollbar? I don’t see a noticable difference, besides having a different text color.

Also, the color of the gutter on the left side, as well the color when a line is selected, seems to be overwritten by your theme, is that intended? (in the screenshot it should be a darker brownish background instead of only a darker line number 7, also the background of the gatter is a slightly darker brown tone in my syntax theme).
I understand that its easier to have the gutter same colored as the syntax theme background as you want to have a transition from treeview to text background. But I’d rather like that to be handled by the syntax theme. Maybe check the color of the gutter first, and transition to that (or making it optional).


#14

Well, I guess that didn’t work then. I’ll look into it.

The gutter is indeed intentionally part of the ui theme, but I recognise the preference to have it handled by the syntax theme. It’s now on my list to at least make that optional.


#15

I tried to separate the tree-view when scrollbars are always visible, but that didn’t work. Obviously… I’ve got a setup running with Ubuntu now, so I can test this better.

There is the option ‘Color Tree Selection’, I think switching that off looks better with non-hiding scrollbars.


#16

I just want to say thanks for this ui theme, it finally pushed me to think about what it is that bothered me about having a separate background color for the editor and the chrome around it. And the final result is this. As you can see I’ve made it so it all blends together seamlessly, which is something I’ve wanted to do for a long time in a editor.


#17

That’s awesome! Flat to the max.


#18

Nice, makes more sense now!


#19

This is the first theme I’ve actually liked aside from the stock Dark theme. My only critique is this: the purple popover when hovering over the file tabs is a bit grating (the purple is pretty bright when using a dark theme).


#20

Thanks for the compliment. I agree the accent color gets a bit much in those tooltips. Will look into it!