Powerline style for Atom

README.md

How to

1. Download powerline.less into ATOM_HOME (default: ~/.atom/)
2. Add @import './powerline.less'; into your styles.less in ATOM_HOME.
3. Enjoy! :D

Warning

Powerline could not work on some themes.
Officially supported themes:

• Atom Dark
• Atom Light
• Atom Material
• One Dark
• One Light
• Seti UI

Changelog

• v1.0:
  Added license, fixed powerline is not working on some themes.
• v1.1:
  Added Theme support.
• v2.0:
  Rewrited codes, now it supports recent versions of Atom.
• v2.1:
  Added new theme: sugar
• v2.2:
  Fixed not working non-transparent themes
• v2.3:
  Added vim-mode support

Preview

powerline.less

/*
	Name: Atom Powerline Style
	Version: v2.3
	Author: Khinenw (@HelloWorld017)
	License: MIT
*/

// ............................................................
// User Variables
// ............................................................
@powerline-skip-left: 0; //Skipping-Linter
@powerline-skip-right: 0;
@linter-patch: false;

// Theme
@theme: "solarized";
@applicator:
	status-bar-vim-mode-visual #ffc107,
	status-bar-vim-mode-insert #2196f3,
	status-bar-vim-mode-normal #8bc34a;

// ............................................................
// Linter-patch
// ............................................................
.linter-patch(@linter-patch) when (@linter-patch = true){
	linter-bottom-container {
		position: fixed;
		top: 0;
		right: 0;
	}
}

.linter-patch(@linter-patch);

// ............................................................
// Default Theme
// ............................................................
@theme-default-black: #212121;
@theme-default-white: #f5f5f5;
@theme-default-info: #2196f3;
@theme-default-anchor-light: #c0c1c2;
@theme-default-anchor-light-hover: #e0e1e2;
@theme-default-anchor: #455a64;
@theme-default-anchor-hover: #263238;
@theme-default-background: #424242;

//Left Status Background
@theme-default-left: #2196f3, #757575, #616161;

//Right Status Background (From right items to left items)
@theme-default-right: #ffff00, #ffc107, #f9a825, #616161, #424242, #212121;

// ............................................................
// Borealis Theme
// ............................................................
@theme-borealis-black: #212121;
@theme-borealis-white: #f5f5f5;
@theme-borealis-info: #2196f3;
@theme-borealis-anchor-light: #c0c1c2;
@theme-borealis-anchor-light-hover: #e0e1e2;
@theme-borealis-anchor: #455a64;
@theme-borealis-anchor-hover: #263238;
@theme-borealis-background: #f5f5f5;

//Left Status Background
@theme-borealis-left: #2196f3, #1976d2, #0d47a1;

//Right Status Background (From right items to left items)
@theme-borealis-right: #1de9b6, #009688, #00796b, #004d40, #424242, #212121;

// ............................................................
// Solarized Theme
// ............................................................
@theme-solarized-black: #002b36;
@theme-solarized-white: #fdf6e3;
@theme-solarized-info: #268bd2;
@theme-solarized-anchor-light: #eee8d5;
@theme-solarized-anchor-light-hover: #fdf6e3;
@theme-solarized-anchor: #002b36;
@theme-solarized-anchor-hover: #586e75;
@theme-solarized-background: #002b36;

//Left Status Background
@theme-solarized-left: #dc322f, #cb4b16, #b58900;

//Right Status Background (From right items to left items)
@theme-solarized-right: #073642, #094959, #586e75, #657b83, #758085, #839496, #93a1a1, #ccc8b5, #fdf6e3;

// ............................................................
// Sugar Theme
// ............................................................
@theme-sugar-black: #212121;
@theme-sugar-white: #fafafa;
@theme-sugar-info: #268bd2;
@theme-sugar-anchor-light: #eeeeee;
@theme-sugar-anchor-light-hover: #f5f5f5;
@theme-sugar-anchor: #212121;
@theme-sugar-anchor-hover: #303030;
@theme-sugar-background: linear-gradient(to right, #3494e6, #ec6ead);

//Left Status Background
@theme-sugar-left: rgba(0, 0, 0, .5), rgba(0, 0, 0, .4), rgba(0, 0, 0, .3), rgba(0, 0, 0, .2);

//Right Status Background (From right items to left items)
@theme-sugar-right: rgba(0, 0, 0, .1), rgba(0, 0, 0, .15), rgba(0, 0, 0, .2), rgba(0, 0, 0, .25), rgba(0, 0, 0, .3),
						rgba(0, 0, 0, .35), rgba(0, 0, 0, .4), rgba(0, 0, 0, .45), rgba(0, 0, 0, .5),
						rgba(0, 0, 0, .55);

// ............................................................
// Apply Theme
// ............................................................
@status-bar-left-colors-key: "theme-@{theme}-left";
@status-bar-left-colors: @@status-bar-left-colors-key;

@status-bar-right-colors-key: "theme-@{theme}-right";
@status-bar-right-colors: @@status-bar-right-colors-key;

@background-key: "theme-@{theme}-background";
@background: @@background-key;

@anchor-key: "theme-@{theme}-anchor";
@anchor: @@anchor-key;

@anchor-hover-key: "theme-@{theme}-anchor-hover";
@anchor-hover: @@anchor-hover-key;

@anchor-light-key: "theme-@{theme}-anchor-light";
@anchor-light: @@anchor-light-key;

@anchor-light-hover-key: "theme-@{theme}-anchor-light-hover";
@anchor-light-hover: @@anchor-light-hover-key;

@info-key: "theme-@{theme}-info";
@info: @@info-key;

@white-key: "theme-@{theme}-white";
@white: @@white-key;

@black-key: "theme-@{theme}-black";
@black: @@black-key;

// ............................................................
// Edit default Status Bar
// ............................................................
.footer {
	height: 26px !important;
	.panel-footer {
		border: 0 !important;
		padding: 0 !important;
	}
}

.status-bar-right, .status-bar-left {
	height: 100% !important;
}

status-bar {
	background: @background !important;
	height: 26px !important;
	min-height: 0 !important;

	.text-info {
		color: @info !important;
	}

	.flexbox-repaint-hack {
		padding: 0 !important;
	}
}

// ............................................................
// Define Powerline Mixins
// ............................................................
.powerline-item-common {
	height: 100% !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
	position: relative !important;
	overflow: visible !important;
	line-height: 26px !important;
	vertical-align: top !important;
}

.powerline-item(@type) when (@type = left){
	.powerline-item-common;
	margin-left: -20px !important;
	margin-right: 20px !important;
}

.powerline-item(@type) when (@type = right) {
	.powerline-item-common;
	margin-left: 20px !important;
	margin-right: -20px !important;

	&:last-child {
		margin-right: 0 !important;
	}
}

.powerline-tip-common(@background) {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	line-height: 25px;
	//width: 18.5px;
	//height: 18.5px;
	display: inline-block;
	position: absolute;
	z-index: 1;
}

.powerline-tip(@type, @background, @next) when (@type = left) {
	.powerline-tip-common(@background);
	transform: rotate(45deg) translateX(-8.5px);
	right: -15px;
	bottom: -0.5px;

	border-width: 0 18.5px 18.5px 0;
	.opacity-test-left()
		when (red(@background) = red(@next))
		and (green(@background) = green(@next))
		and (blue(@background) = blue(@next))
	{
		border-color: transparent rgba(
				red(@background),
				green(@background),
				blue(@background),
				alpha(@background) - alpha(@next)
			) transparent transparent;
	}

	.opacity-test-left() when (default()) {
		border-color: transparent rgba(
			red(@background),
			green(@background),
			blue(@background),
			alpha(@background)
		) transparent transparent;
	}

	.opacity-test-left()
}

.powerline-tip(@type, @background, @next) when (@type = right) {
	.powerline-tip-common(@background);
	transform: rotate(45deg) translateX(8.5px);
	left: -15px;
	top: 0;

	border-width: 18.5px 0 0 18.5px;
	.opacity-test-right()
		when (red(@background) = red(@next))
		and (green(@background) = green(@next))
		and (blue(@background) = blue(@next))
	{
		border-color: transparent transparent transparent rgba(
				red(@background),
				green(@background),
				blue(@background),
				alpha(@background) - alpha(@next)
			);
	}

	.opacity-test-right() when (default()) {
		border-color: transparent transparent transparent rgba(
			red(@background),
			green(@background),
			blue(@background),
			alpha(@background)
		);
	}

	.opacity-test-right()
}

.powerline-text(@background) {
	color: contrast(@background, @black, @white) !important;
	z-index: 2 !important;
}

.powerline-text-tip(@type, @isFirst) when (@type = left) {
	.equals(@type, left, 1, -1); .-return(@numType) {
		.equals(@isFirst, true, 1, -1); .-return(@numFirst) {
			@size: 25px + 5px * @numType * @numFirst;
		}
	}
	padding-@{type}: @size !important;
}

.powerline-text-tip(@type, @isFirst) when (@type = right) {
	padding-left: 10px;
	padding-right: 10px;
}

.powerline-anchor(@background) {
	color: contrast(@background, @anchor, @anchor-light) !important;
	&:hover {
		color: contrast(@background, @anchor-hover, @anchor-light-hover) !important;
		text-decoration: underline !important;
	}
}

// ............................................................
// Apply Powerlines
// ............................................................

.set-powerline-content(@type, @background) {
	background: @background;
	.powerline-item(@type);

	a {
		.powerline-anchor(@background);
	}

	&>* {
		.powerline-text(@background);
	}

	&>*:first-child {
		.powerline-text-tip(@type, true);
	}

	&>*:last-child {
		.powerline-text-tip(@type, false);
	}
}

.set-powerline(@type) {
	.status-bar-@{type} {
		overflow: visible;

		@colors-key: "status-bar-@{type}-colors";
		@colors: @@colors-key;

		@skip-key: "powerline-skip-@{type}";
		@skip: @@skip-key;

		.for(length(@colors)); .-each(@i) {
			@j: @i + @skip;
			@background: extract(@colors, @i);


			&>a:nth-child(@{j}) {
				.powerline-anchor(@background);
			}

			&>*:nth-child(@{j}) {
				.set-powerline-content(@type, @background);

				&::after {
					.next-test-left(@i) when (length(@colors) <= (@i + 1)) {
						.powerline-tip(@type, @background, rgba(0, 0, 0, 0));
					}

					.next-test-left(@i) when (default()) {
						.powerline-tip(@type, @background, extract(@colors, @i + 1));
					}

					.next-test-right(@i) when ((@i - 1) <= 0) {
						.powerline-tip(@type, @background, rgba(0, 0, 0, 0));
					}

					.next-test-right(@i) when (default()) {
						.powerline-tip(@type, @background, extract(@colors, @i - 1));
					}

					.next-test(@type) when (@type = left) {
						.next-test-left(@i)
					}

					.next-test(@type) when (@type = right) {
						.next-test-right(@i)
					}

					.next-test(@type);
				}
			}
		}

		.for(@applicator); .-each-of(@applicator-item) {
			@applicator-name: extract(@applicator-item, 1);
			@applicator-color: extract(@applicator-item, 2);

			&>a.@{applicator-name} {
				.powerline-anchor(@applicator-color);
			}

			&>*.@{applicator-name} {
				.set-powerline-content(@type, @applicator-color);

				&::after {
					.powerline-tip(@type, @applicator-color, rgba(0, 0, 0, 0));
				}
			}
		}
	}
}

.set-powerline(left);
.set-powerline(right);

// ............................................................
// Helper Mixins
// ............................................................

// .for
// From seven-phrases-max/less.curious
.for(@i, @n) {.-each(@i)}
.for(@n)     when (isnumber(@n)) {.for(1, @n)}
.for(@i, @n) when not (@i = @n)  {
	.for((@i + (@n - @i) / abs(@n - @i)), @n);
}

// .for-each
.for(@array)   when (default()) {.for-impl_(length(@array))}
.for-impl_(@i) when (@i > 1)    {.for-impl_((@i - 1))}
.for-impl_(@i) when (@i > 0)    {.-each-of(extract(@array, @i))}

// .equals
.equals(@value, @same, @true, @false) when (default())		{.-return(@false)}
.equals(@value, @same, @true, @false) when (@value = @same)	{.-return(@true)}

man i'm loving it, thanks for making this! I'm playing with the colors, now is it possible to change colors depending on the status (Normal / Insert / Visual) ? so far i can only change it to one color no matter what mode is in, would like it to change depending on the mode if possible

Not using the vim mode, I am so afraid that I can't help you. T_T I'm so sorry for not being help.

I have searched about vim-mode and created @applicator variable, which enables users to define custom colors for classes. But, it is NOT tested on vim-mode.

Hi thank you, I will try it shortly, thank you so much for taking time to do it, I appreciate you