atom/one-dark-ui

Atom One dark UI theme

One Dark UI theme

This package is now a part of the core Atom repository, please direct all issues and pull requests there in the future!

A dark UI theme that adapts to most syntax themes.

The font used in the screenshot is Fira Mono.

Install

This theme comes bundled with Atom and can be activated by going to the Settings > Themes section and selecting "One Dark" from the UI Themes drop-down menu.

Settings

In the theme settings you can:

• Change the Font Size to scale the whole UI up or down.
• Choose between 3 Tab Sizing modes.
• Hide the dock buttons.

To make changes, go to Settings > Themes > One Dark UI > Settings or the cog icon next to the theme picker.

Customize

It's also possible to resize only certain areas by adding the following to your styles.less (Use DevTools to find the right selectors):

.theme-one-dark-ui {
  .tab-bar { font-size: 18px; }
  .tree-view { font-size: 14px; }
  .status-bar { font-size: 12px; }
}

FAQ

Why do the colors change when I switch Syntax themes? This UI theme uses the same background color as the chosen syntax theme. If that syntax theme has a light background color, it only uses its hue, but otherwise stays dark. This lets you use dark-light combos.

one-dark-ui's Issues

Move base font-size

If https://github.com/atom/one-dark-ui/blob/master/styles/ui-variables.less#L187 is inside ui-variables it gets used in all the packages that import the variables.

Better to use a variable in /styles/atom.less or so.

This is the perfect UI!!!

Thank you, thank you, THANK YOU!!! 👍 👍 👍

Padding of tree-view project node is "wrong"...

... in Spacious mode

Changing the padding-top value from 0.75em to 0.5em seems to fix it, but not entirely sure that looks like what you intended. For reference, it looks fine in Compact mode.

Add CHANGELOG

Use if/else instead of contrast()

... to detect if a Syntax theme is light or dark.

@braver Ohh.. snap! That's how you do if/else in Less. I think I tried something like

& when (luma(@syntax-background-color) < 50%) {
  @base-background-color: @syntax-background-color;
}
& when (luma(@syntax-background-color) >= 50%) {
  @base-background-color: #333;
}

but didn't seem to work with variables. Then (mis)used the contrast() function instead.

btw. I also like the foreground/background naming and the modular scales. Saw modularscale.com the other day which is a nice tool.

The "Find file" prompt has spacing issues

Hitting CMD + P to raise the file prompt, noticed there's a bigger gap between file name and path since the recent updates:

Related: not sure if this overlay is narrower now too, but (in Magento) paths are super deep and redundant (lots of theme inheritance). It's often hard to select the correct file because the path overflows the window. Could this overlay be wider by 200px or relative to the content?

Tab close icon is too weak

... when hovering for light Syntax themes.

Hard to tell what the current-result is

The way search results in an editor are highlighted, it's hard to tell the current-result from all the other results. This is important because if you exit the search, that's where your cursor is at. Also, walking through the results with find-next is easier if you know where to look.
I think this is mostly a concern of the syntax theme, but I don't think many syntax themes pay attention to this and the UI theme should provide a good default. Haven't figured out how to handle that myself yet, but I figured I'd at least report it here and share this thought.

Edit: Sublime uses a yellow background, Safari (OS X in general) also uses a yellow highlight.

Tabs: Bad text rendering during hoover transition

When hoovering over the file tabs, there's a .1s transition showing the x to close the tab.

During this short time, the text in the tab 'shakes' a little, but enough to freak me out...

I've solved it locally by adding the following to my stylesheet:

.theme-one-dark-ui {
  .tab-bar {
    .tab {
      .close-icon {
        transition: transform .0s;
      }
    }
  }
}

Is there a way of keeping the transition without affecting the text rendering?

transparent scrollbar track in editor

Would look even better if the scrollbar was transparent or take on the background color of the editor area.

(image on the right is in isotope by the way)

Can't change layout mode in theme settings

The README and the changelog say I can switch between three layout modes (auto, compact and spacious) right in the theme settings panel. I haven't found such a switch.

Style bootstrap alerts?

I really like how this styles the settings view, but the alerts a bit out of place now in it.

The error one is also used when a package/theme fails to install/update.

project-find progress indicator mis-aligned

The "0 paths searched" doesn't align well.

markdown-preview table text is too light

The markdown-preview less file has a white (or light in the case of zebra) override for tables. Before this package started messing with text and background colours that was fine as the default was black or some dark text colour. However, this package overrides the default text colour to be a light grey on top of a dark grey. That's fine for normal text, but with the table background override to white, the text is light grey on top of white.

I'm not sure if this is the place to post this issue or not - realistically this package breaks the original working code, but at the same time the responsibility may be in the hands of the background colour override. So there are two solutions:

• This package changes styles/packages.less to add a table tr rule that defines the background to be the default, or text colour to something darker.
• markdown-preiew changes styles/markdown-preview.less to specify a text colour with the background colour override. This is actually more correct in terms of best practices I guess - if you change a background, you should specify a foreground as you can't rely on whatever it was before, but I think the fact that this package overrides markdown-preview's own styles in the first place suggests that we're not necessarily following absolute best practices here.

MarkdownPreviewView tabs are not seamless

This is another data-type you can style! Also, git-control has a different background (I think it takes the tool-panel background), so you could consider styling that with GitControlView.

... I'm not sure how to manage this exactly, hope the variations don't get out of hand ;)

braver/isotope-ui@8712cec

Increase text contrast

The original plan for these themes was configurable settings but since that's being pushed back, what do you think about increasing the contrast slightly? Personally I find the default colour for the tree-view/tab/status-bar text to be quite dark and hard to read.

I think changing the max lightness for @ui-fg to 70% is a subtle change but helps legibility a lot:

before:

after:

This is using one-dark-syntax, btw.

Dropdown menus are cut off

Tree view ignored color has very lower contrast in Atom Dark Syntax

Compact mode

Would remove extra padding. Like it was pre 0.6.0.

Either:

• could be changed in the settings.
• or automatically based on window size (media queries).

Recent update broke git-tab-status tab coloring

I haven't quite pinpointed which commit did it, but one of the recent updates (since Atom 0.189.0 was tagged) broke git-tab-status - it now no longer colors the tabs based on their files' git status. It does still work with Atom Dark and Light and other themes though.

(Also applies to One Light UI)

Add tree-view focus indicator

There's currently no way to visually tell if the tree-view is focused - it would be great if there was some kind of indication of whether or not the tree-view is focused.

(Also applies to one-light-ui, atom-dark-ui, and atom-light-ui but I'm too lazy to open issues in all of those repos at the moment)

Add saturation limit

This issue was reported in https://discuss.atom.io/t/how-to-control-theme-tinting-from-syntax-themes/15557 by @smlombardi.

Problem:

When combining One UI with other Syntax themes, sometimes the UI is too saturated. An example is the Printen theme.

Possible Solution:

Add some sort of "saturation limit". So that it uses a Syntax theme's hue, but doesn't overshoot with too much saturation. Although it conflicts with #17 so increasing contrast at the same time would be good too.

too yellow-ish/warm?

it is just me or dark (ui) theme became more yellow-ish/warm after introducing syntax theme color adaptation?

Massive update button

@simurai Not sure if you're still working out the component sizing issues from #37 et al., but I noticed this with the recent refresh:

Fallback color for @ui-syntax-color doesn't work

When the variable syntax-background-color isn't used in a syntax theme the fallback color for ui-syntax-color doesn't work.

I'm not using that variable in my theme because I'm using mixin guards to detect the base-background-color lightness to see if the theme is dark or light.

As a temporary work around this, I'm putting syntax-background-color to hsl(220,0.1%,20%) and changing the One Light UI tab colors but would like to not use it entirely and leave the background color to the theme.

Can't read message in select list

If you cmd-t and type some gibberish to to filter the list to no items, the message does not display saying there are no items.

Modal overlay borders are a bit messed up

Hey,

Firstly, thanks for the great theme!

The left inner border of the modal overlay seems to be missing. See the image below.

Thanks in advance 😄

Active tab color conflicts with timecop pane

Not sure if this is a theme issue or a timecop issue, but the active tab color doesn't match the background for the timecop pane. It looks strange compared to regular editors where the active tab color matches the background color.

This is atom 0.190.

Weird overlap when dragging tab to active tab position

When dragging a tab to the left of the active tab, the two indicators overlap and look sort of strange. (Also applies to one-light-ui)

Could we try a longer max length on tab titles?

Loving the increased padding overall, but I wonder if we could show more of the tab title before resorting to ellipses. Seems like it might be nice to let the tabs breathe a bit horizontally if we have the space.

I've got miles of tab bar here but I can't read my file extensions.

Color options

atom/settings-view#275 will add support for configurable base color options.

@simurai what do you think are a good 5-10 base color options for this theme to use?

Plans for integration

Whats the plan for making these the default? I see a couple options:

Default becomes One

• we publish these as one-*-*, and bundle them by default
• when we go 1.0, we switch the defaults to the one-*-*
• All new users get the one themes.

Questions

• After 1.0, do we still bundle atom-dark and atom-light?
• Do we unpublish atom-dark and atom-light?
• Do users using the atom-dark and atom-light get pushed into one?

One becomes atom dark / light

• we publish these as one-*-*, and bundle them by default
• when we go 1.0, atom-dark and atom-light gets the one-*-* code
• Unpublish one-*-* themes
• Publish the old atom-light gets the one-*-* themes as atom-light-legacy
• All users, new and using atom-dark/light get the one themes.

What do you think?

Option one is cleaner, management wise, but it leaves the old themes named atom-light-*, which the new ones really are.

Auto Layout Mode doesn't respect chosen font-size

I recently updated Atom and suddenly the text in the sidebar and settings screen became way too big because of the new Auto Layout Mode. I understand that there could be some extra spacing on big screens, but scaling the font-size makes the interface look a bit weird when the user has chosen a smaller font-size. This is what it looks like:

As you can see, the font-size in the sidebar and tabs is bigger while the font-size of the code itself doesn't change. I would prefer if only the spacing changed while the chosen font-size remained the same. A good example of this would be the Gmail interface, which also gives you the option to choose between a more spacious or compact layout.

Find in selection button to big

The find in selection button size is wrong with the current version. Only happens when the option-selection class is applied. Thanks 👍

UPDATE
I also just noticed that "no results" isn't centered ;)

Empty select list shows as 1 pixel

'Paths searched' label in project search misaligned

Really minor thing, but the 'paths searched' label is not aligned with the rest of the content.

editor[mini] font-size is quite large

To me this feels a bit off-balance. The font-size for the mini editor, e.g. in find&replace is much larger than that of the surrounding ui (14px vs 11px in this case). A matter of taste perhaps, but I'm just putting it out there.

Tab corners are a bit crummy with ligt syntax theme

With a light syntax theme you kinda lose the nice rounded corners.

Inactive tabs are hard to distinguish since "framed" update

Since the 0.6.3 "framed" update, inactive tabs no longer have a bounding box. I'm finding it very difficult to distinguish between tabs with many files open (reality). With a hard divider between tabs the padding could be decreased significantly. It's just not usable as-is.

Along the same lines, a minimum tab width would be welcome with an overflow mechanism.

Customizing font size

The read.me states that we can override the textsize used for the UI with the following code:

.theme-one-dark-ui {
    font-size: 14px;
}

but that doesn't work for me.

It also states that we can change the text size in the tabs by the following code:

.theme-one-dark-ui {
  .tab-bar {
      font-size: 14px;
   }
}

but that doesn't work either.

To change the text size, I need to use the following code:

.theme-one-dark-ui {
  .tab-bar {     
      .tab {
          font-size: 14px;
      }
  }
  .tree-view { font-size: 14px; }
  .status-bar { font-size: 12px; }
}

If I use the !important directive, the first example does in fact change all areas, but it also gives a less compilation error, so I guess that's not the right solution..

1px border on the left of first tab in compact mode

Visible mostly with a light syntax theme in the dark ui theme.

Keep UI monochrome if Syntax BG has no saturation

Came up in this discussion: https://discuss.atom.io/t/what-color-in-a-theme-is-causing-the-ui-to-get-pink-text/16016

no cursor in rename modal on Linux with Adobe Source Code Pro font

I'm not sure if this is the platform (ArchLinux) or the font (Source Code Pro) to blame, but this doesn't occur with the Atom Dark theme.

Steps to reproduce:

1. right-click on file in Tree View and then click Rename
2. click or use the arrow keys to re-position the cursor within the Rename modal dialog
3. notice that there is no indication of where the cursor is positioned

what's wrong with colors?

I have other editor colors than in the repo screenshots, both light and dark theme, what's wrong with colors?

atom-0.175.0-696c795 (Linux)

// oops, sorry, that's issue must be in syntax repo, not ui.

Background color defaulting with Solarized-Dark syntax theme

Before the 0.190 update, One Dark UI with Solarized Dark Syntax meshed well and the UI was a dark bluish color... now its more grey.

See:

Consider publishing to npm

I hope to use this outside the scope of Atom. npm would be a good fit.

Scrollbars are extremly big in latest version.

The new update of the theme looks good, i like it, but i also liked the flat-style ui.

Its just an opinion, but aren't the scrollbars extremly large now? They are a way thicker than the default OSX Scrollbars.

Revert:

.scrollbars-visible-always /deep/ ::-webkit-scrollbar {
  width: 1em;
  height: 1em;
}

Make mini editors work with shadow dom

There is some styling in the mini editors that doesnt work with the new shadow dom code :( :

Turn on the shadow dom with this then reload:

Then you have two options for updating to use the shadow dom:

• atom-text-editor.mini::shadow:
  https://github.com/atom/find-and-replace/blob/master/stylesheets/find-and-replace.less#L11
• Add a new file for mini editors (though will get loaded into all text editors): https://github.com/atom/decoration-example/blob/master/stylesheets/decoration-example.atom-text-editor.less

Message 1px too high

It kinda sticks out one pixel.

Font sizing issues

Updated Atom from 0.189 to 0.190, and One Dark UI causes some font sizes to blow up.

Here's autocomplete-plus with go-plus:

Here's the list of deprecated calls: