A faithful Emacs port of folke's Tokyo Night color theme.
All four variants are included:
| Theme | Background | Description |
|---|---|---|
tokyo-night |
#1a1b26 |
The darkest variant (default) |
tokyo-night-storm |
#24283b |
Medium dark |
tokyo-night-moon |
#222436 |
Blue-tinted dark, unique accents |
tokyo-night-day |
#e1e2e7 |
Light variant |
tokyo-night |
tokyo-night-storm |
tokyo-night-moon |
tokyo-night-day |
Tokyo Night is available on MELPA. Assuming you've configured MELPA as a package source:
M-x package-install RET tokyo-night RET
Then load any variant:
(load-theme 'tokyo-night t)Or with use-package:
(use-package tokyo-night
:ensure t
:config
(load-theme 'tokyo-night t))(package-vc-install "https://github.com/bbatsov/tokyo-night-emacs")
(load-theme 'tokyo-night t)(use-package tokyo-night
:vc (:url "https://github.com/bbatsov/tokyo-night-emacs" :rev :newest)
:config
(load-theme 'tokyo-night t))Drop all .el files somewhere on your load-path and custom-theme-load-path, then:
(load-theme 'tokyo-night t)Replace tokyo-night with tokyo-night-storm, tokyo-night-moon, or
tokyo-night-day to use a different variant.
Switch between variants interactively with M-x tokyo-night-select.
After changing customization variables, apply them without restarting
with M-x tokyo-night-reload.
Browse the full color palette with M-x tokyo-night-list-colors
(use C-u prefix to pick a specific variant).
You can override individual colors without forking:
(setq tokyo-night-override-colors-alist
'(("tokyo-comment" . "#636da6"))) ; brighter comments
(load-theme 'tokyo-night t)Overrides apply to all variants. See the tokyo-*-colors-alist
variables in tokyo-night.el for all available color names.
A handful of booleans and numbers let you adjust the look without
forking. They all take effect on the next load-theme.
Headings in org, outline, markdown, adoc, asciidoc, shr and info are scaled by default. Turn that off for uniform sizes:
(setq tokyo-night-scale-headings nil)Or keep the scaling but tune how much each level grows:
(setq tokyo-night-height-doc-title 1.5 ; document titles (default 1.4)
tokyo-night-height-1 1.4 ; level-1 headings (default 1.3)
tokyo-night-height-2 1.2 ; level-2 headings (default 1.2)
tokyo-night-height-3 1.1) ; level-3 headings (default 1.1)Render headings in a proportional font, which reads nicely for prose:
(setq tokyo-night-use-variable-pitch t)
Comments and keywords are italic by default. If your font renders italics poorly, turn either off:
(setq tokyo-night-italic-comments nil
tokyo-night-italic-keywords nil)Drop the box around the mode line for a flat look:
(setq tokyo-night-flat-mode-line t)
For a more visible current line highlight, use tokyo-bg-highlight
instead of the default subtle tokyo-bg-line:
(setq tokyo-night-override-colors-alist
'(("tokyo-bg-line" . "#292e42"))) ; same as tokyo-bg-highlight
(load-theme 'tokyo-night t)If you want to tweak faces only in specific major modes (without affecting
all buffers), use face-remap-add-relative in a mode hook:
;; Softer comments in org-mode
(add-hook 'org-mode-hook
(lambda ()
(face-remap-add-relative 'font-lock-comment-face
:foreground "#636da6")))
;; Bolder strings in python-mode
(add-hook 'python-mode-hook
(lambda ()
(face-remap-add-relative 'font-lock-string-face
:weight 'bold)))
;; Larger default font in eww
(add-hook 'eww-mode-hook
(lambda ()
(face-remap-add-relative 'default :height 1.15)))These overrides are buffer-local and won't affect other modes. See Buffer-Local Face Remapping with face-remap-add-relative for more details.
The tokyo-night-with-colors macro binds all palette colors as local
variables, so you can reference them without hardcoding hex values:
(tokyo-night-with-colors
(set-face-attribute 'some-face nil :foreground tokyo-blue)
(setq pdf-view-midnight-colors (cons tokyo-fg tokyo-bg)))You can also look up a single color programmatically:
(tokyo-night-get-color "tokyo-blue") ; => "#7aa2f7"Run custom code every time a Tokyo theme is loaded:
(add-hook 'tokyo-night-after-load-hook
(lambda (_theme)
(set-face-attribute 'line-number nil :slant 'italic)))The hook function receives the theme name as its argument.
Tokyo Night pairs well with packages that switch themes based on the time of day or your OS appearance setting:
- auto-dark tracks your OS dark/light mode and switches themes to match:
(use-package auto-dark
:config
(setq auto-dark-dark-theme 'tokyo-night
auto-dark-light-theme 'tokyo-night-day)
(auto-dark-mode 1))- circadian switches on a time-based schedule (e.g. sunrise/sunset):
(use-package circadian
:config
(setq circadian-themes '((:sunrise . tokyo-night-day)
(:sunset . tokyo-night)))
(circadian-setup))See Automatic Light/Dark Theme Switching for a deeper look at both approaches.
Beyond all built-in Emacs faces, the theme covers these packages:
- Completion: vertico, corfu, marginalia, orderless, consult, embark, company, ivy, swiper, copilot
- Development: magit, forge, transient, git-commit, git-rebase, git-timemachine, eglot, lsp-mode, lsp-ui, flycheck, cider, inf-ruby, gptel
- Editing: evil, smartparens, rainbow-delimiters, avy, ace-window, hydra, which-key, anzu, easy-kill, jinx, vundo, volatile-highlights
- Email: mu4e, notmuch
- Languages: clojure-mode, haskell-mode, erlang
- Markup: markdown-mode, adoc-mode, asciidoc-mode, web-mode
- UI: doom-modeline, treemacs, helpful, elfeed, keycast, mistty, breadcrumb
Missing a package? Open an issue or submit a PR.
See DESIGN.md for the guiding principles behind color choices and face definitions.
The color palette is based on work by enkia and folke.
GPL v3+