Making the Emacs built-in tab-bar Look Like Vim’s Tab Bar

4.5/5

If you’re an Emacs user who appreciates the appearance of Vim, you might frequently attempt to incorporate some of Vim’s minimalist elements into Emacs. One such element is the color scheme, especially how Emacs built-in tab-bar tabs are displayed.

The Emacs built-in tab-bar feature, which enables users to manage multiple buffers through a visual interface at the top of the Emacs window, is available in Emacs version 27 or higher. In this article, you will discover a function I developed called my-tab-bar-vim-like-colors, designed to modify the appearance of the tab-bar in Emacs to mimic the color scheme of Vim.

This is how the tabs will appear if you execute the function below or add it to your init.el after the theme is loaded. More screenshots below.

The Emacs Lisp (Elisp) code below customizes the appearance of the tab bar and makes sure that its appearance remains consistent with the overall color scheme of the current theme.

;; Description: Making the Emacs Tab Bar Look Like Vim's Tab Bar
;; License: MIT
;; Author: James Cherti
;; URL: https://www.jamescherti.com/emacs-tab-bar-vim-style-colors/

(defun my-tab-bar-vim-name-format-function (tab i)
  "Add a space on the sides of every tab."
  (let ((current-p (eq (car tab) 'current-tab)))
    (propertize
     (concat " "
             (if tab-bar-tab-hints (format "%d " i) "")
             (alist-get 'name tab)
             (or (and tab-bar-close-button-show
                      (not (eq tab-bar-close-button-show
                               (if current-p 'non-selected 'selected)))
                      tab-bar-close-button)
                 "")
             " ")
     'face (funcall tab-bar-tab-face-function tab))))

(defun my-tab-bar-vim-like-colors ()
  "Apply Vim-like color themes to Emacs tab bars."
  (let* ((fallback-light "white")
         (fallback-dark "#333333")
         (bg-default (or (face-attribute 'default :background) fallback-light))
         (fg-default (or (face-attribute 'default :foreground) fallback-dark))
         (bg-modeline-inactive (or (face-attribute 'mode-line-inactive :background)
                                   fallback-dark))
         (fg-modeline-inactive (or (face-attribute 'mode-line-inactive :foreground)
                                   fallback-light))
         (bg-tab-inactive bg-modeline-inactive)
         (fg-tab-inactive fg-modeline-inactive)
         (fg-tab-active fg-default)
         (bg-tab-active bg-default))
    (setq tab-bar-tab-name-format-function #'my-tab-bar-vim-name-format-function)
    (setq tab-bar-format '(tab-bar-format-tabs tab-bar-separator))
    (setq tab-bar-separator "\u200B")  ;; Zero width space to fix color bleeding
    (setq tab-bar-tab-hints nil)  ;; Tab numbers of the left of the label
    (setq tab-bar-new-button-show nil)
    (setq tab-bar-close-button-show nil)
    (setq tab-bar-auto-width nil)
    (custom-set-faces
     ;; The tab bar's appearance
     `(tab-bar
       ((t (:background ,bg-tab-inactive
                        :foreground ,fg-tab-inactive
                        :box (:line-width 3 :color ,bg-tab-inactive :style nil)))))
     ;; Inactive tabs
     `(tab-bar-tab-inactive
       ((t (:background ,bg-tab-inactive
                        :foreground ,fg-tab-inactive
                        :box (:line-width 3 :color ,bg-tab-inactive :style nil)))))
     ;; Active tab
     `(tab-bar-tab
       ((t (:background ,bg-tab-active :foreground ,fg-tab-active
                        :box (:line-width 3 :color ,bg-tab-active :style nil))))))))

;; Customize the appearance of the tab bar
;; Make sure to load your theme using 'load-theme' before
;; calling 'my-tab-bar-vim-like-colors'.
(tab-bar-mode 1)
(my-tab-bar-vim-like-colors)
Code language: Lisp (lisp)

Here are a few more screenshots showing how the Elisp function above adapts Emacs tab-bar colors to any loaded theme:

The above theme is the Tomorrow Night Deepblue Emacs theme

For those who have never used Vim and are curious about the appearance of Vim tabs, here is a screenshot:

Vim theme: tomorrow-night-deepblue, a refreshing color scheme with a deep blue background

5/5

The Vim color scheme jamescherti/vim-tomorrow-night-deepblue is a beautiful deep blue variant of the “Tomorrow Night” colorscheme, which is renowned for its elegant color palette. It is pleasing to the eyes and is easy to read (The colorscheme was previously called tomorrow-night-seablue).

The “Tomorrow Night Deepblue” color scheme features a deep blue background color that creates a calming atmosphere. The contrasting colors make it easy to distinguish between different elements of your code. The tomorrow-night-deepblue colorscheme is also a great choice for programmer who miss the blue themes that were trendy a few years ago.

The Vim theme: Tomorrow Night Deepblue

The theme was inspired by classic DOS text editors such as QuickBASIC, RHIDE, and Turbo Pascal, which featured blue backgrounds by default. There’s something special about the early days of programming and the tools we used that brings back fond memories.

Install the tomorrow-night-deepblue colorscheme with Vim’s built-in package manager (Vim 8 and above)

mkdir -p ~/.vim/pack/jamescherti/start
cd ~/.vim/pack/jamescherti/start
git clone --depth 1 https://github.com/jamescherti/vim-tomorrow-night-deepblue
vim -u NONE -c "helptags vim-tomorrow-night-deepblue/doc" -c qCode language: Bash (bash)

Activate the color scheme

:color tomorrow-night-deepblueCode language: Vim Script (vim)

Links

Vim: Tango color scheme for Vim’s built-in Terminal

5/5

The following code snippet will allow you to apply the Tango Dark color scheme to the Vim’s built-in terminal and ensure that the terminal’s color scheme remains consistent, even if you change the Vim color scheme with the ‘:colorscheme’ command.

The snippet uses autocmd to ensures that the Vim terminal’s color scheme remains Tango Dark.

For more information about Vim’s built-in terminal:

  • :help terminal
" Language: Vim script
" Author: James Cherti
" License: MIT
" Description: Improve the color scheme of Vim Terminal (Tango dark theme),
"              and prevent :colorscheme from changing the terminal color scheme.
" URL: https://www.jamescherti.com/vim-tango-color-scheme-vim-terminal/

" Gnome-Terminal Tango Dark
let g:terminal_ansi_colors_black = '#2E3436'
let g:terminal_ansi_colors_darkred = '#CC0000'
let g:terminal_ansi_colors_darkgreen = '#4E9A06'
let g:terminal_ansi_colors_brown = '#C4A000'
let g:terminal_ansi_colors_darkblue = '#3465A4'
let g:terminal_ansi_colors_darkmagenta = '#75507B'  " dark purple
let g:terminal_ansi_colors_darkcyan = '#06989A'  " dark turquoise
let g:terminal_ansi_colors_lightgrey = '#D3D7CF'
let g:terminal_ansi_colors_darkgrey = '#555753'
let g:terminal_ansi_colors_red = '#EF2929'
let g:terminal_ansi_colors_green = '#8AE234'
let g:terminal_ansi_colors_yellow = '#FCE94F'
let g:terminal_ansi_colors_blue = '#729FCF'
let g:terminal_ansi_colors_magenta = '#AD7FA8'  " purple
let g:terminal_ansi_colors_cyan = '#34E2E2' " turquoise
let g:terminal_ansi_colors_white = '#EEEEEC'

" Text and background: Gnome dark
let g:terminal_ctermbg = 'black'
let g:terminal_ctermfg = 'white'
let g:terminal_statuslineterm_ctermbg = 'black'
let g:terminal_statuslineterm_ctermfg = 'white'
let g:terminal_statuslinetermnc_ctermbg = 'black'
let g:terminal_statuslinetermnc_ctermfg = 'white'
let g:terminal_guibg = '#000000'
let g:terminal_guifg = '#D0CFCC'
let g:terminal_statuslineterm_guibg = g:terminal_guibg
let g:terminal_statuslineterm_guifg = g:terminal_guifg
let g:terminal_statuslinetermnc_guibg = g:terminal_guibg
let g:terminal_statuslinetermnc_guifg = g:terminal_guifg

function! SetTerminalColorScheme() abort
  if !has('terminal')
    return
  endif

  let g:terminal_ansi_colors = [
        \ g:terminal_ansi_colors_black,
        \ g:terminal_ansi_colors_darkred,
        \ g:terminal_ansi_colors_darkgreen,
        \ g:terminal_ansi_colors_brown,
        \ g:terminal_ansi_colors_darkblue,
        \ g:terminal_ansi_colors_darkmagenta,
        \ g:terminal_ansi_colors_darkcyan,
        \ g:terminal_ansi_colors_lightgrey,
        \ g:terminal_ansi_colors_darkgrey,
        \ g:terminal_ansi_colors_red,
        \ g:terminal_ansi_colors_green,
        \ g:terminal_ansi_colors_yellow,
        \ g:terminal_ansi_colors_blue,
        \ g:terminal_ansi_colors_magenta,
        \ g:terminal_ansi_colors_cyan,
        \ g:terminal_ansi_colors_white
        \ ]

  execute printf(
        \ 'highlight Terminal ctermbg=%s ctermfg=%s guibg=%s guifg=%s',
        \ g:terminal_ctermbg, g:terminal_ctermfg, g:terminal_guibg,
        \ g:terminal_guifg
        \ )
  execute printf(
        \ 'highlight StatusLineTerm ctermbg=%s ctermfg=%s guibg=%s guifg=%s',
        \ g:terminal_statuslineterm_ctermbg, g:terminal_statuslineterm_ctermfg,
        \ g:terminal_statuslineterm_guibg, g:terminal_statuslineterm_guifg
        \ )
  execute printf(
        \ 'highlight StatusLineTermNC ctermbg=%s ctermfg=%s guibg=%s guifg=%s',
        \ g:terminal_statuslinetermnc_ctermbg, g:terminal_statuslinetermnc_ctermfg,
        \ g:terminal_statuslinetermnc_guibg, g:terminal_statuslinetermnc_guifg
        \ )
endfunction

if has('terminal')
  augroup TerminalColorScheme
    autocmd!
    autocmd ColorScheme * call SetTerminalColorScheme()
    autocmd VimEnter * call SetTerminalColorScheme()
  augroup END

  call SetTerminalColorScheme()
endifCode language: Vim Script (vim)