Tokyo Night Theme: Setup for Every Dev Tool (2026)

Posted: April 13, 2026 to Technology.

Tokyo Night is a color scheme inspired by the neon-lit skyline of Tokyo at night, and it has become one of the most popular developer themes across every major editor, terminal, and window manager. Created by enkia, it balances deep navy backgrounds with vibrant blue and purple accents that reduce eye strain during long sessions while keeping syntax elements clearly distinguishable. This guide covers how to set up Tokyo Night consistently across your entire development environment, from your editor to your status bar to your window manager borders.

At Petronella Technology Group, our engineering team runs Linux workstations daily for security research, AI development, and infrastructure management. We use consistent color schemes across every tool in our stack because visual consistency reduces cognitive load when switching between terminals, editors, and browser windows. Tokyo Night is one of the schemes we keep configured and ready.

What Is Tokyo Night

Tokyo Night was created by enkia and first released as a VS Code extension. The design draws from the color palette of Tokyo's cityscape after dark: deep indigo skies, electric blue signage, soft purple neon, and warm amber streetlights. Unlike many developer themes that prioritize raw contrast, Tokyo Night uses a restrained approach where the background recedes and syntax colors carry just enough saturation to be distinct without being harsh.

The theme has since been ported to virtually every development tool that supports custom colors. There are official and community ports for Neovim, JetBrains IDEs, Sublime Text, Alacritty, Kitty, WezTerm, Windows Terminal, tmux, Starship, Waybar, Hyprland, Sway, GTK, and dozens more. This breadth of support is what makes Tokyo Night practical for a full-system theme rather than just an editor preference.

What sets Tokyo Night apart from similar dark themes like Dracula or One Dark is its use of blue as the dominant accent rather than purple or orange. The foreground text is a soft lavender-white (#c0caf5) rather than pure white, which reduces contrast ratio just enough to be comfortable on high-brightness displays without sacrificing readability. Syntax highlighting uses a curated set of blues, purples, greens, and cyans that map well to most language grammars.

The Three Variants: Night, Storm, and Day

Tokyo Night ships in three variants, each designed for different preferences and lighting conditions:

Tokyo Night (default) uses the darkest background (#1a1b26) with maximum contrast against its accent colors. This is the most popular variant and the one people typically mean when they refer to "Tokyo Night." It works best in dim or dark environments where the deep background blends with the room lighting.

Tokyo Night Storm uses a slightly lighter, bluer background (#24283b) that adds a visible navy tint. Storm is the better choice if you find the default too dark or if you work in a room with some ambient light. The slightly elevated background also makes window borders and panel separators more visible, which matters when you tile multiple terminals side by side.

Tokyo Night Day inverts the palette entirely with a light cream background (#e1e2e7) and darker foreground colors. Day is designed for outdoor or brightly-lit environments. It maintains the same accent color relationships as the dark variants, so switching between Night and Day preserves your visual muscle memory for syntax categories.

For the rest of this guide, configuration examples use the default Tokyo Night (darkest) variant. Storm and Day variants use the same configuration structure with different hex values.

Complete Color Palette with Hex Codes

These are the core colors from the Tokyo Night default palette. Reference these when configuring any tool that accepts custom hex colors:

# Tokyo Night — Core Palette
Background:        #1a1b26
Foreground:        #c0caf5
Selection:         #283457
Comment:           #565f89
Terminal Black:    #15161e
Terminal Red:      #f7768e
Terminal Green:    #9ece6a
Terminal Yellow:   #e0af68
Terminal Blue:     #7aa2f7
Terminal Magenta:  #bb9af7
Terminal Cyan:     #7dcfff
Terminal White:    #a9b1d6

# Extended UI Colors
Line Highlight:    #292e42
Border / Subtle:   #3b4261
Active Tab BG:     #1f2335
Sidebar BG:        #1f2335
Status Bar BG:     #1f2335
Cursor:            #c0caf5
Git Added:         #449dab
Git Modified:      #6183bb
Git Deleted:       #914c54
Error:             #db4b4b
Warning:           #e0af68
Info:              #0db9d7

The Storm variant replaces the background (#1a1b26) with #24283b, the active/sidebar background (#1f2335) with #292e42, and adjusts selection and border colors slightly brighter to maintain the same relative contrast steps.

VS Code Setup

The official Tokyo Night extension is the most-installed version in the VS Code marketplace with over 8 million downloads.

Install it from the command palette or the Extensions sidebar by searching "Tokyo Night." The extension ID is enkia.tokyo-night. After installation, open the command palette (Ctrl+Shift+P) and select "Preferences: Color Theme," then choose "Tokyo Night," "Tokyo Night Storm," or "Tokyo Night Day."

To customize specific colors beyond the theme defaults, add overrides in your settings.json:

{
  "workbench.colorTheme": "Tokyo Night",
  "workbench.colorCustomizations": {
    "[Tokyo Night]": {
      "editor.lineHighlightBackground": "#292e4280",
      "editorBracketMatch.border": "#7aa2f7",
      "tab.activeBorderTop": "#7aa2f7"
    }
  },
  "editor.tokenColorCustomizations": {
    "[Tokyo Night]": {
      "comments": "#565f89"
    }
  }
}

The bracket match border override is worth calling out. The default bracket highlight can be subtle, and setting it to the primary blue (#7aa2f7) makes matching brackets immediately obvious when navigating nested code.

Neovim Setup

The definitive Neovim port is folke/tokyonight.nvim by folke, who also maintains lazy.nvim and several other essential Neovim plugins. It supports all three variants, has built-in integration with Treesitter, LSP diagnostics, and popular plugins like Telescope, nvim-cmp, and neo-tree.

Install with lazy.nvim:

-- lazy.nvim plugin spec
{
  "folke/tokyonight.nvim",
  lazy = false,
  priority = 1000,
  opts = {
    style = "night",          -- night, storm, day, moon
    transparent = false,
    terminal_colors = true,
    styles = {
      comments = { italic = true },
      keywords = { italic = true },
      functions = {},
      variables = {},
    },
    sidebars = { "qf", "help", "neo-tree", "terminal" },
    lualine_bold = true,
  },
  config = function(_, opts)
    require("tokyonight").setup(opts)
    vim.cmd.colorscheme("tokyonight")
  end,
}

If you use lualine for your status line, set the theme to match:

require("lualine").setup({
  options = { theme = "tokyonight" }
})

The transparent = true option removes the background color from Neovim, letting your terminal's background show through. This is useful if your terminal already has the Tokyo Night background set and you want a seamless appearance, or if you use a blurred terminal on a compositing window manager.

Terminal Themes: Alacritty, Kitty, WezTerm, Windows Terminal

Alacritty

Alacritty uses TOML configuration as of version 0.13+. Add this to ~/.config/alacritty/alacritty.toml:

[colors.primary]
background = "#1a1b26"
foreground = "#c0caf5"

[colors.normal]
black   = "#15161e"
red     = "#f7768e"
green   = "#9ece6a"
yellow  = "#e0af68"
blue    = "#7aa2f7"
magenta = "#bb9af7"
cyan    = "#7dcfff"
white   = "#a9b1d6"

[colors.bright]
black   = "#414868"
red     = "#f7768e"
green   = "#9ece6a"
yellow  = "#e0af68"
blue    = "#7aa2f7"
magenta = "#bb9af7"
cyan    = "#7dcfff"
white   = "#c0caf5"

[colors.selection]
background = "#283457"
foreground = "#c0caf5"

Kitty

Kitty reads theme files from ~/.config/kitty/. Create or download the Tokyo Night theme and include it:

# ~/.config/kitty/kitty.conf
include tokyo-night.conf

# tokyo-night.conf
foreground #c0caf5
background #1a1b26
selection_foreground #c0caf5
selection_background #283457
cursor #c0caf5
url_color #73daca

color0  #15161e
color1  #f7768e
color2  #9ece6a
color3  #e0af68
color4  #7aa2f7
color5  #bb9af7
color6  #7dcfff
color7  #a9b1d6
color8  #414868
color9  #f7768e
color10 #9ece6a
color11 #e0af68
color12 #7aa2f7
color13 #bb9af7
color14 #7dcfff
color15 #c0caf5

Kitty also supports kitty +kitten themes, which provides an interactive theme selector. Tokyo Night is included in the built-in catalog.

WezTerm

WezTerm has Tokyo Night built into its color scheme library. In your ~/.config/wezterm/wezterm.lua:

local config = wezterm.config_builder()
config.color_scheme = "Tokyo Night"
-- Or for Storm variant:
-- config.color_scheme = "Tokyo Night Storm"
return config

Windows Terminal

For Windows Terminal, add this scheme to the schemes array in your settings.json:

{
  "name": "Tokyo Night",
  "background": "#1a1b26",
  "foreground": "#c0caf5",
  "cursorColor": "#c0caf5",
  "selectionBackground": "#283457",
  "black": "#15161e",
  "red": "#f7768e",
  "green": "#9ece6a",
  "yellow": "#e0af68",
  "blue": "#7aa2f7",
  "purple": "#bb9af7",
  "cyan": "#7dcfff",
  "white": "#a9b1d6",
  "brightBlack": "#414868",
  "brightRed": "#f7768e",
  "brightGreen": "#9ece6a",
  "brightYellow": "#e0af68",
  "brightBlue": "#7aa2f7",
  "brightPurple": "#bb9af7",
  "brightCyan": "#7dcfff",
  "brightWhite": "#c0caf5"
}

Then set "colorScheme": "Tokyo Night" in your profile defaults.

Window Manager Theming: Hyprland, Niri, Sway, i3

Applying Tokyo Night to your window manager borders, gaps, and background ties the theme to the highest-level visual element on your screen. For detailed window manager setup guides, see our Hyprland setup guide.

Hyprland

# ~/.config/hypr/hyprland.conf
general {
    col.active_border = rgba(7aa2f7ee) rgba(bb9af7ee) 45deg
    col.inactive_border = rgba(414868aa)
}

decoration {
    rounding = 10
    blur {
        enabled = true
        size = 6
        passes = 3
    }
}

# Set wallpaper via hyprpaper with a dark navy/purple background
# to complement the theme

Niri

# ~/.config/niri/config.kdl
layout {
    focus-ring {
        width 2
        active-color "#7aa2f7"
        inactive-color "#414868"
    }
    border {
        width 1
        active-color "#bb9af7"
        inactive-color "#3b4261"
    }
}

window-rule {
    geometry-corner-radius 10 10 10 10
}

Sway

# ~/.config/sway/config
# class                 border  backgr. text    indicator child_border
client.focused          #7aa2f7 #1a1b26 #c0caf5 #7dcfff   #7aa2f7
client.focused_inactive #3b4261 #1a1b26 #565f89 #3b4261   #3b4261
client.unfocused        #3b4261 #1a1b26 #565f89 #3b4261   #3b4261
client.urgent           #f7768e #1a1b26 #c0caf5 #f7768e   #f7768e

i3

# ~/.config/i3/config
# class                 border  backgr. text    indicator child_border
client.focused          #7aa2f7 #1a1b26 #c0caf5 #7dcfff   #7aa2f7
client.focused_inactive #3b4261 #1a1b26 #565f89 #3b4261   #3b4261
client.unfocused        #3b4261 #1a1b26 #565f89 #3b4261   #3b4261
client.urgent           #f7768e #1a1b26 #c0caf5 #f7768e   #f7768e

The i3 and Sway syntax for window colors is identical since Sway maintains i3 compatibility for this feature.

Waybar and Status Bar CSS

Waybar is styled entirely with CSS, so applying Tokyo Night is straightforward. Create or modify ~/.config/waybar/style.css:

* {
    font-family: "JetBrainsMono Nerd Font", monospace;
    font-size: 13px;
    color: #c0caf5;
}

window#waybar {
    background: rgba(26, 27, 38, 0.9);
    border-bottom: 2px solid #292e42;
}

#workspaces button {
    padding: 0 8px;
    color: #565f89;
    border-bottom: 2px solid transparent;
}

#workspaces button.active {
    color: #7aa2f7;
    border-bottom: 2px solid #7aa2f7;
}

#workspaces button.urgent {
    color: #f7768e;
}

#clock, #battery, #network, #pulseaudio, #tray {
    padding: 0 10px;
}

#battery.charging {
    color: #9ece6a;
}

#battery.warning:not(.charging) {
    color: #e0af68;
}

#battery.critical:not(.charging) {
    color: #f7768e;
}

#network.disconnected {
    color: #f7768e;
}

tooltip {
    background: #1f2335;
    border: 1px solid #3b4261;
    border-radius: 8px;
}

The semi-transparent background on window#waybar lets your wallpaper bleed through slightly, which creates a more integrated look with compositors that support blur like Hyprland or Niri.

GTK and Qt Theming

System-wide GTK and Qt theming ensures that applications like file managers, settings dialogs, and non-terminal tools also follow the Tokyo Night palette.

GTK

The Tokyo Night GTK Theme by Fausto-Korpsvart provides a full GTK3/GTK4 theme. Install it to ~/.themes/ and set it in your GTK config:

# ~/.config/gtk-3.0/settings.ini
[Settings]
gtk-theme-name=Tokyonight-Dark-B
gtk-icon-theme-name=Tokyonight-Dark
gtk-font-name=Inter 10
gtk-cursor-theme-name=Bibata-Modern-Classic

# For Wayland compositors, also set:
# ~/.config/gtk-4.0/settings.ini with the same values

On NixOS, declare the theme in your Home Manager configuration for reproducibility:

# home.nix
gtk = {
  enable = true;
  theme.name = "Tokyonight-Dark-B";
  iconTheme.name = "Tokyonight-Dark";
};

Qt

For Qt applications (KDE apps, VirtualBox, etc.), use kvantum with a Tokyo Night Kvantum theme:

# Install kvantum and set the theme
kvantummanager --set TokyoNight

# Ensure Qt apps use kvantum
# Add to your shell profile or compositor env:
export QT_STYLE_OVERRIDE=kvantum

tmux and Starship Prompt

tmux

Apply Tokyo Night to tmux status line in ~/.tmux.conf:

# Tokyo Night colors for tmux
set -g status-style "bg=#1f2335,fg=#c0caf5"
set -g status-left "#[fg=#1a1b26,bg=#7aa2f7,bold] #S #[fg=#7aa2f7,bg=#1f2335] "
set -g status-right "#[fg=#565f89] %H:%M #[fg=#7aa2f7]  %d-%b "
set -g window-status-format "#[fg=#565f89] #I:#W "
set -g window-status-current-format "#[fg=#7aa2f7,bold] #I:#W "
set -g pane-border-style "fg=#3b4261"
set -g pane-active-border-style "fg=#7aa2f7"
set -g message-style "bg=#292e42,fg=#c0caf5"

There is also the tokyo-night-tmux plugin by janoamaral that provides a more complete tmux theme with weather, battery, and git status modules. Install it via TPM (Tmux Plugin Manager) if you prefer a ready-made solution.

Starship Prompt

Starship is a cross-shell prompt written in Rust. Apply Tokyo Night colors in ~/.config/starship.toml:

[character]
success_symbol = "[](bold #9ece6a)"
error_symbol = "[](bold #f7768e)"

[directory]
style = "bold #7aa2f7"

[git_branch]
style = "bold #bb9af7"

[git_status]
style = "#e0af68"

[cmd_duration]
style = "#565f89"

[username]
style_user = "#7dcfff"

[hostname]
style = "#9ece6a"

[python]
style = "#e0af68"

[nodejs]
style = "#9ece6a"

[rust]
style = "#f7768e"

This maps language-specific modules to their corresponding Tokyo Night accent colors: blue for directories (the most-seen element), purple for git branches, yellow for warnings and durations, and language-specific colors that match common syntax highlighting conventions.

Creating a Cohesive Rice

Applying Tokyo Night to individual tools is straightforward. Making it feel cohesive across your entire desktop requires attention to a few details that most setup guides skip.

Pick one variant and commit to it. Mixing Night backgrounds (#1a1b26) in your terminal with Storm backgrounds (#24283b) in your editor creates a subtle but distracting mismatch. Choose one variant for everything.

Use the same font everywhere. A Nerd Font like JetBrainsMono Nerd Font or FiraCode Nerd Font should be set in your terminal, Waybar, application launcher, and notification daemon. Inconsistent fonts break the visual unity faster than inconsistent colors.

Match your wallpaper. A wallpaper with Tokyo Night's palette ties the entire desktop together. Search for "Tokyo Night wallpaper" on GitHub or Reddit for community-made options, or use a solid #1a1b26 background for maximum consistency. Dark cityscapes with blue and purple tones work naturally.

Apply the palette to your notification daemon. Dunst or mako notifications that use system default colors will jar against a themed desktop. Set background = "#1f2335", foreground = "#c0caf5", and frame_color = "#7aa2f7" in your dunst or mako config.

Theme your application launcher. Rofi and wofi both accept CSS or theme files. The Tokyo Night community maintains rofi themes on GitHub. For wofi, set background-color and text-color in ~/.config/wofi/style.css using the same hex values.

Set terminal padding. A small padding (8-12px) around your terminal content prevents text from touching window edges and lets the background color frame your code naturally. In Alacritty, set [window.padding]; in Kitty, set window_padding_width.

Coordinate your cursor theme. Bibata Modern Classic is a popular cursor theme that pairs well with dark color schemes. Set it in your GTK config, your compositor's config, and your Xcursor settings for XWayland apps.

The goal is not perfection on first attempt. Start with your terminal and editor, which are where you spend the most time, then expand outward to your compositor, bar, and system theme. Each piece takes minutes to configure, and once set, you have a desktop that feels intentional rather than assembled from defaults.

If you are building Linux development workstations for your team and want guidance on desktop environment selection, window manager configuration, or GPU-accelerated compositor setup, contact our team for a consultation.

About the Author: Craig Petronella is the CEO of Petronella Technology Group, a cybersecurity and IT infrastructure firm in Raleigh, NC. With CMMC-RP, CCNA, CWNE, and DFE certifications and over 30 years in IT, Craig's team runs NixOS and Wayland compositors daily for security research and AI development.

Related Guides

• Nerd Fonts: Complete Install and Setup Guide -- complete your themed setup with patched fonts that include developer icons.
• Niri Scrollable Tiling Wayland Compositor Guide -- a minimal Wayland compositor that pairs well with Tokyo Night colors.
• Material Shell for GNOME: Tiling Made Simple -- add tiling to GNOME and theme it with Tokyo Night for a cohesive look.
• Migrate VMware to Proxmox: Complete Guide -- the virtualization foundation for your Linux workstation environment.