Atom One light UI theme
CSS CoffeeScript
Latest commit 4874a6c Jan 11, 2017 @simurai simurai Prepare 1.9.1 release

One Light UI theme Build Status

A light UI theme that adjusts to most syntax themes.


The font used in the screenshots is Fira Mono. Icons by file-icons.

Combine with other Syntax themes

There is a matching syntax theme, but most other syntax themes work fine as well.

one-light-ui + sepia

One light + Sepia

one-light-ui + chester

One light + Chester


This theme is installed by default with Atom and can be activated by going to the Settings > Themes section and selecting "One Light" from the UI Themes drop-down menu.


Theme settings

In the theme settings you can change the Font Size to scale the whole UI up or down.

Switch between 3 Layout Modes:

  1. Auto (default) - In Auto mode, the UI and font size will automatically change based on the window size.
  2. Compact - In Compact mode, the UI stays compact to leave more space for the editor.
  3. Spacious - In Spacious mode, the UI is expanded, giving some breathing room.

And pick a Tab Sizing mode:

  1. Auto (default) - In Auto mode, the tabs switch based on the window size.
  2. Minimum - In Mimimum mode, the tabs will be as small as possible.
  3. Even - In Even mode, all tabs will be the same size.


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-light-ui {
  .tab-bar { font-size: 18px; }
  .tree-view { font-size: 14px; }
  .status-bar { font-size: 12px; }


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 dark background color, it only uses its hue, but otherwise stays light. This lets you use light-dark combos.