Feedback: how does this theme work for you?


#1

Hey guys! I’m a UI designer that happened to stumble upon web development. I never really found an Atom theme that suited my style so I created one. I worked really hard for the past few weeks and it’s finally stable enough to release!

I made this post because I’d love some feedback from the community and help improve this theme, because I poured so much effort and love into it.

Atom


GitHub



#2

From the screenshot, the file list looks super unreadable due to the excessively low contrast, and also the inactive tab titles as well as the line numbers or the status bar are really pushing it. I’m sure this works fine on bright expensive screens, but if people have a muddier screen they’ll have a lot of trouble reading those items, if not find them entirely unreadable.

Beautiful refreshing bold choice of colors for the syntax highlighting though!


#3

Thanks for the feedback!!!

You should try it and let me know. The panes fade away when the editor is focused, and everything brightens up while it’s being interacted with. It’s dynamic.


#4

@tjk I’ll try it out for the day and let you know this evening.


#5

I feel like the colors are too dark, as well. I like the idea of the focused element brightening, but I don’t want to have to move my mouse over to the tree view just to see what’s in my folder. The large scrollbars are a bit glaring since I’m used to much smaller sliders on other themes.

I like the animation and how it makes Atom feel more responsive, but fun transitions between states aren’t the main things I look for in a theme.


#6

Thanks for the feedback! I just released a somewhat large update. I did tweak the colors and opacity slightly to be a little more legible and a little less annoying. Let me know what you think! I think in the roadmap, I might make a user spec that lets you choose if you want the fading panels or not.


#7

I concur for the most part with @DamnedScholar. My general feels:

  1. I really like the colors and the high contrast content
  2. I do like the fade-in/fade-out transition between active sections of the application
  3. The status bar and minimap are for glancing at information when needed (like a clock on the wall), having to hover the mouse over it to read it is an additional unwelcome step
  4. Click targets are too small for my tastes (the status bar and tabs in particular)
  5. Even when hovering over the Tree View there is too little contrast
  6. In the syntax theme, quotes are too dim to be easily discernable between single quotes and backticks especially when sandwiched between other high-contrast symbols (for example the first single quote in, opts.on('-h')
  7. I like the font choice in the UI sections

#8

Can you or someone help me get some Theme preferences set up so I can make “Higher contrast” mode an option? I am not familiar with Jasmine but if someone can get me started, I’ll figure out the variables and stuff.


#9

I used it all day yesterday and a little bit this morning. I am in the same boat as the other people here.

  1. I really like the colors of the font and the font itself and the spacing of the lines ect. SPOT ON for me.
  2. I for the most part like the dimming for the focus. It took some getting used to but I think overall it adds a cool effect.
  3. I don’t like how dark the quotations are. It is hard to see when I have a double quote next to a single quote.
  4. I felt like the scroll bars were weird but not a deal breaker (mine would often show up white I don’t know if that was on purpose but i didn’t care for that color much).

All in all I will be switching back to my one Dark theme and syntax, but I don’t want my comments to discourage you. This is an amazing project and I am certainly impressed with the work you have put into it so far. You should be happy with your accomplishments so far and don’t let any one criticism get you distracted. Excellent work.


#10

Thanks so much for the feedback!!

I actually just updated the theme to fix the two biggest gripes I heard. The quotes are now much brighter:

And there are now styled scrollbars! 0.2.1 :slight_smile:


#11

Regarding theme preferences, you need to do these things:

  1. Add a configSchema section to your package.json (see my tabs-to-spaces package for an example and the documentation for more information)
  2. Add a bit of code in your package including an activate method that checks for your configuration setting and optionally adds a class to the atom-workspace element based on that configuration
  3. Build your stylesheets to detect that class on atom-workspace and present a different appearance

An example might be:

// Normal styles
.some-element {
  font-family: monospace;
  color: #ccc;
}

// High-contrast styles
.nebula-ui-high-contrast {
  .some-element {
    color: #fff;
  }
}

How to alter index.less file based on config option toggle
#12

Thank you! It worked like a charm. I released an update to this theme, fixing all the major issues people complained about and now allowing a preference to disable focus mode.

If you guys want to give the theme another shot and provide feedback, I’d love to know what it will take for it to become your main theme.


#13

Any chance you could make the comments properly high contrast too?

Comments are mainly meant for explaining the code and not for “disabling” or “hiding” code - unfortunately, the idea of code disabling seems to have lead to the weird misguided notion of making them low contrast / hard to read in way too many of Atom UI themes… (which has even led me as far as to always have a manual comment color override in styles.less to override the comment color on all themes since >90% of themes appear to do this)

Edit: adding an example of how comments look like for me right now:

I’m sure there can be found some middle-ground, but “super greyish low contrast” isn’t really usable for me…


#14

I have a similar setup, with CadetBlue for my comments. It’s a grayish teal, so it makes sense for disabled blocks of code as well as contrasting well with the gray background. One interesting interaction I’ve found is that the nebula cursor line changes color, so I can tell at a glance which line I’ve got my cursor on. Some people might find this annoying, but I do not.


#15

Update the syntax to 0.3.0 and the UI theme to 0.4.1 and Disable Focus Mode (theme configuration). :slight_smile:


#16

That was definitely a bug and shouldn’t happen in the latest version. Try it out and let me know?


#17

Hey, I am really liking these themes so far! Some amazing work here! I thought I would dislike the focus mode but I love it. I will use this for a few days and report back with more things if I can find any. But here are the comments after testing using the latest nebula-ui and nebula-syntax installable via the settings-view today.


#18

Thanks for the feedback. You had some great ideas there. Let me address your points in the order they were given:

  1. Tab closing: Update to 0.4.2 :slight_smile:
  2. Markdown quotes: I’m not able to replicate this issue. Can you send me your file and verify if it’s another plugin messing with the syntax?
  3. Color-coded find/replace: Update to 0.4.2 :slight_smile:
  4. Highlight-selected support: Update to 0.4.2 :slight_smile:
  5. I see a blue drop indicator, so I guess it’s Electron 1.4. I’ll be happy to make the change if Atom changes the way the indicator works upon release of 1.4.

#19

Wow thanks so much for the update :zap: :sparkles:

For the markdown quote issue. I tried to disable all community packages clear my stylesheet and init script and still see the issue. To reproduce I copied this in to a new untitled tab and changed the language to GitHub Markdown. If I disable Focus Mode all lines look normal.

> hi this is a markdown quote  
> hi this is the second line of a markdown quote  
> hi this is the third line of above  
> hi again focus mode is fourth line  
> is this fifth line or

#20

Found the cause of the markdown quote issue. It’s a bug in language-gfm: