107

People occasionally post screenshots with modelines that have solid colors and triangles: enter image description here

How do I replicate this effect?

Dan
  • 32,584
  • 6
  • 98
  • 168
Tikhon Jelvis
  • 6,152
  • 2
  • 27
  • 40
  • 2
    I've actually been asked this question a few times on other sites, so I thought I'd preemptively ask it here too :). – Tikhon Jelvis Sep 25 '14 at 22:11
  • 1
    See also http://www.whattheemacsd.com/appearance.el-01.html for tips on changing the text, not just the look, of the mode-line. – mankoff Sep 25 '14 at 22:53
  • mankoff: See also http://www.emacswiki.org/emacs/DelightedModes and https://github.com/Bruce-Connor/rich-minority – phils Dec 01 '14 at 19:49

4 Answers4

91

This can be achieved with two packages:

  1. smart-mode-line.
  2. powerline.

Overall, smart-mode-line is more powerful than powerline (pardon the pun), in the sense that it offers more features to control the mode-line's behaviour and more customizability in the appearance. The Readme has a great list of features, but in short it offers width-control, string replacement in the file path, hiding of the minor modes, among other things.

  • If all you want is to achieve the screenshot, powerline is the best choice.
  • If you want a suite of other features combined with that, give smart-mode-line a try.

Since powerline has been very well explained on another answer, I'll focus on how you can achieve that appearance with smart-mode-line.

First Install

You can install smart-mode-line from Melpa, Melpa-Stable, or download it manually. Assuming you decide to use the package manager, just do

M-x package-install RET smart-mode-line

Once you turn it on with M-x sml/setup, your mode-line should look similar to one of these two.
Dark Theme Screenshot Light Theme Screenshot

Powerline Theme

smart-mode-line has several themes built-in, the one that achieves the requested appearance is provided separately in the themes/ directory. Note that this theme is still in beta, so customizing it might not work perfectly just yet.

Install the theme from Melpa 

M-x package-install RET smart-mode-line-powerline-theme

If you want to install it manually, it's here, but you'll also need to install powerline.

Finally you can turn on the theme with M-x sml/apply-theme RET powerline. And your mode-line should then look like this.
Powerline Theme Screenshot
As you can see, the order of elements is not quite the same, but the overall appearance is there.

To use this theme every-time, add the following to your init file. You can also customize any of the powerline configuration variables, and they should have the same effect here.

;; These two lines are just examples
(setq powerline-arrow-shape 'curve)
(setq powerline-default-separator-dir '(right . left))
;; These two lines you really need.
(setq sml/theme 'powerline)
(sml/setup)
Malabarba
  • 22,878
  • 6
  • 78
  • 163
48

This can be achieved with a package called "powerline". There are several variants available, including at least one you can install through package.el.

Personally, I use this one. Here's a screenshot from the package's README:

A powerline example.

You can configure the color by setting the face of the mode-line:

(set-face-attribute 'mode-line nil
                    :foreground "Black"
                    :background "DarkOrange"
                    :box nil)

You can also configure different shapes, rather than just triangles:

(setq powerline-arrow-shape 'curve)

Emacs powerline with curves instead of arrows.

Tikhon Jelvis
  • 6,152
  • 2
  • 27
  • 40
  • 3
    FWIW - If you have an issue with getting the separators' colors to be totally seemless like I did, I found [this powerline fork](https://github.com/unic0rn/powerline) where you can `(setq powerline-default-separator 'utf-8)` which allows you to use any of the [powerline patched fonts here](https://github.com/Lokaltog/powerline-fonts). – waymondo Sep 28 '14 at 18:06
  • @thepalmcivet: good to know, but I'm not entirely clear what you mean by getting the colors seamless. Do you have a screenshot of the problem or something? Thanks! – Tikhon Jelvis Sep 28 '14 at 20:25
  • 2
    No problem, [here's what I get](https://www.dropbox.com/s/eoxuzw1nx3x442i/Screenshot%202014-09-29%2018.05.31.png?dl=0) with `(setq powerline-default-separator 'arrow)`. I am installing Carbon Emacs with Homebrew with the `--srgb` flag and `(setq ns-use-srgb-colorspace t)` in my .emacs.d. – waymondo Sep 29 '14 at 22:08
  • Tikhon, that's one lovely mode line you have there. Could you post the full mode-line-format section which you've partially screenshotted? Thanks :-) – Ivan Vučica Jul 23 '15 at 16:52
  • 2
    @IvanVučica: Thanks! It's on GitHub, in two parts: a [modified powerline.el](https://github.com/TikhonJelvis/dotfiles/blob/master/.emacs.d/packages/powerline.el) which contains a bunch of shapes to choose from (`curve` is nice, but I use `diagonal` now) and my [.emacs](https://github.com/TikhonJelvis/dotfiles/blob/master/.emacs#L225) itself, which has some misc settings I got somewhere. If you're so inclined, you can make your own copy of `powerline.el` and add your own separator shapes through ASCII art to get the exact effect you need :). – Tikhon Jelvis Jul 23 '15 at 22:33
13

As other people have mentioned, powerline is the package that formats the modeline that way. Most emacs themes however, don't define colours for powerline (which is not great). One theme that does is the colourful (and comprehensive) moe-theme. It even has a mode that changes colour in the evening to be easier on the eyes. It looks like this:

moe-theme in glorious magenta mode, theming the powerline modeline

My arrows in the powerline look strange because I'm using an unpatched version of Luxi Mono font.

William Roe
  • 239
  • 2
  • 3
2

My arrows in the powerline look strange because I'm using an unpatched version of Luxi Mono font.

William Roe, judging from your screenshot you are on macOS. As stated in this issue comment, you will need to add

(setq powerline-image-apple-rgb t)

to your init file(s). This should correct the colouring issue with the separators ("arrows"). Worked for me at least.