Dark theme for i3+polybar, sway+waybar, rofi, GTK, spotify and Discord based on the Tokyo Night vscode theme

  • By Marco van Dijk
  • Last update: Jan 6, 2023
  • Comments: 5

Tokyo Night Linux theme

This collection is aimed to make your Linux environment look like the vscode Tokyo Night theme. This is currently still a WIP, so expect colour inconsistencies or unthemed applications.

Although replacing your icon theme is not required, this theme goes well with the Numix icon theme.

The GTK theme was made by modifying the Material Black theme

The discord theme was made by modifying the Nocturnal theme

Dependencies

Theming

  • lxappearance: Can be used to apply the GTK theme
  • gnome-tweaks: Can be used to apply the GTK theme
  • spicetify-cli: Used to apply the Spotify theme
  • betterdiscord: Used to apply the Discord theme
  • betterdiscordctl: Used to install betterdiscord
  • VS code Tokyo Night theme

Optional Utils

  • st: The terminal we are using in our configs. Requires patches to get it good, but pre-patched versions can be found on github . urxvt can be used as an alternative and is themed using the included config files.
  • powerline: Status bar for Bash. For example, it shows you what Git repo you are in
  • gvim: Contains vim with clipboard support and more
  • vim-airline: Status bar for vim
  • kava, neofetch, lolcat, cowsay, wisdom-mod, bash-pipes, cbonsai: important stuff
  • bpytop: resource monitor
  • nm-applet: manage your (wireless) connections and has a tray icon
  • kalu-kde: Notifies you about Arch news or updates and has a tray icon
  • logiops: Used to trigger keyboard combinations using gestures
  • blueman: bluetooth tray icon
  • gdm-tools-git: If using GDM to login to a user (and select between multiple window managers), use this to set the theme

When using I3 as window manager

  • clipit: Clipboard manager
  • picom-ibhagwan-git: If you want transparent and rounded borders in I3
  • polybar: Status bar
  • polybar-themes: Is included in the repo, but should be installed separately as well to get all their dependencies.
  • autotiling: Automatically sets in which direction a window will split based on if the parent container is wider or taller
  • rofi: Used as a program launcher and power menu
  • arandr: Used to manually set monitor properties
  • maim: screen capture
  • xclip: X selection to clipboard
  • bynanz: record screen to gif
  • hsetroot: to change the background colour when picom is running

When using Sway as window manager

  • autotiling: Automatically sets in which direction a window will split based on if the parent container is wider or taller
  • kanshi: Used to automatically set monitor properties
  • rofi: Used as a program launcher and power menu
  • clipman: Clipboard manager
  • Waybar: Status bar
  • mako: Used for notifications
  • slurp: wayland selection to clipboard
  • grim: screenshot utility for wayland
  • wf-recorder: record screen to video

File overview and Configuration

File Index

  • .config

    • BetterDiscord: Contains theme files for Discord
    • gtk-3.0: Sets some theme settings
    • i3: Example i3 config with auto starting applications, borders and gaps settings, etc
    • kanshi: Example config for using Kanshi to set your wayland monitors
    • Picom: Example config for enabling transparency and rounded corners when using I3.
    • Polybar: Theme and config for the status bar when using I3 with modules n shit enabled
    • Spicetify: Contains theme for modifying Spotify
    • Sway: Example sway config with auto starting applications, borders and gaps settings, etc
    • Polybar: Theme and config for the status bar when using Sway
    • Wofi: Actually contains an example config and theme for Rofi and Wofi, although we are using Rofi in the configs
  • /etc/logid.conf: Optional example configuration for the Logitech MX Master mouse, using gestures to call certain key combinations set in the I3/Sway config

  • /usr/share/themes/UltimateBlack-0.1: GTK theme. Will be updated and renamed in the near future.

  • .bash_profile: Optional example config. Runs when you login (including via SSH). contains commented code to autostart xorg (and I3)

  • .bashrc: Optional example config. Runs whenever a new terminal is opened. Example config with ST and Powerline

  • .vimrc: Optional example vim config

  • .Xdefaults: Optional example config. Edit terminal colours and urxvt settings when using Sway as window manager

  • .xinitrc: Optional example config. Runs on X server startup and starts I3

  • .Xresources: Optional example config. Edit terminal colours and urxvt settings when using I3 as window manager

Configuration

  • GTK theme: If certain colours aren't to your liking, you can grep -rl "old_string" . | xargs sed -i 's/old_string/new_string/g' to replace specific colour codes quickly. If you go this route you might want to do this to the source, since the original theme has more different colours.
  • Spotify: Manually edit ./config/spicetify/Themes/Base/color.ini
  • Discord: There is an online editor to edit all the themes
  • Polybar comes bundled with various modules. Check out their wiki for more info. Also check out the readme of polybar-themes if you are using I3.
  • Picom can be be configured for more or less transparency or different kinds of blur. The included config uses dual-kawase blur which goes over an image as background

Installation

Copying files

All the files go into your home directory, except for:

  • /etc/logid.conf
  • /usr/share/themes/UltimateBlack-0.1

If using polybar-themes, install it from the original source first to get all their dependencies and fonts. Then you can overwrite their files with the included ones.

Apply Theme

  • GTK: Run lxappearance and/or gnome-tweaks and select the included theme
  • Spotify:
    • Run spicetify once to generate a config file
    • Run spicetify backup apply enable-devtool to backup the default theme
    • Run spicetify config current_theme Base to set the current theme to the one we provide
    • Run spicetify apply and restart spotify
  • Discord: After running betterdiscordctl install go into the newly added Better Discord entry in the settings menu.
  • GDM: Run gnomeconf2gdm (from gdm-tools-git) after applying the GTK theme to set the colour scheme of the login screen

Notes

  • GDM does not start .xinitrc . If you are using I3, it is easier to just type in startx after logging in
  • Certain GTK programs, like Gimp and Firefox, might have to be set to follow the system theme from their settings
  • A modified version of console-solarized-git is coming in order to modify the Linux shell colours to match our theme.

Screenshots

I3 with Polybar

Screenshot-2021-07-19T23:10:44

Sway with Waybar

sway-discord sway-spotify sway-code sway-launcher-explorer sway-urxvt

Github

https://github.com/stronk-dev/Tokyo-Night-Linux

Comments(5)

  • 1

    Verify all colours in the GTK theme

    Since we modified the Material Black theme to look like the Tokyo Night theme, we might have missed some colours.

    We should check all ze files for any colour codes not in the Tokyo Night colour palette, and adjust them accordingly.

    Color Palette

    Tokyo Night and Tokyo Night Storm

    | Color                | Use | | ---------- | ------------------------------------------------------------ | | #f7768e #f7768e | This keyword, HTML elements, Regex group symbol, CSS units, Terminal Red | | #ff9e64 #ff9e64 | Number and Boolean constants, Language support constants | | #e0af68 #e0af68 | Function parameters, Regex character sets, Terminal Yellow | | #9ece6a #9ece6a | Strings, CSS class names | | #73daca #73daca | Object literal keys, Markdown links, Terminal Green | | #b4f9f8 #b4f9f8 | Regex literal strings | | #2ac3de #2ac3de | Language support functions, CSS HTML elements | | #7dcfff #7dcfff | Object properties, Regex quantifiers and flags, Markdown headings, Terminal Cyan, Markdown code, Import/export keywords | | #7aa2f7 #7aa2f7 | Function names, CSS property names, Terminal Blue | | #bb9af7 #bb9af7 | Control Keywords, Storage Types, Regex symbols and operators, HTML Attributes, Terminal Magenta | | #c0caf5 #c0caf5 | Variables, Class names, Terminal White | | #a9b1d6 #a9b1d6 | Editor Foreground | | #9aa5ce #9aa5ce | Markdown Text, HTML Text | | #cfc9c2 #cfc9c2 | Parameters inside functions (semantic highlighting only) | | #565f89 #565f89 | Comments | | #414868 #414868 | Terminal Black | | #24283b #24283b | Editor Background (Storm) | | #1a1b26 #1a1b26 | Editor Background (Night) |

    Tokyo Night Light

    | Color                | Use | | ---------- | ------------------------------------------------------------ | | #8c4351 #8c4351 | This keyword, HTML elements, Regex group symbol, CSS units, Terminal Red | | #965027 #965027 | Number and Boolean constants, Language support constants | | #8f5e15 #8f5e15 | Function parameters, Regex character sets, Terminal Yellow | | #485e30 #485e30 | Strings, CSS class names | | #33635c #33635c | Object literal keys, Markdown links, Regex literal strings, Terminal Green | | #166775 #166775 | Language support functions, CSS HTML elements | | #0f4b6e #0f4b6e | Object properties, Regex quantifiers and flags, Terminal Cyan, Markdown code, Import/export keywords | | #34548a #34548a | Function names, CSS property names, Markdown Headings, Terminal Blue | | #5a4a78 #5a4a78 | Control Keywords, Storage Types, Regex symbols and operators, HTML Attributes, Terminal Magenta | | #343b58 #343b58 | Editor Foreground, Variables, Class names, Terminal White | | #565a6e #565a6e | Markdown Text, HTML Text | | #634f30 #634f30 | Parameters inside functions (semantic highlighting only) | | #0f0f14 #0f0f14 | Terminal Black | | #9699a3 #9699a3 | Comments | | #d5d6db #d5d6db | Editor Background |

  • 2

    Update Documentation

    Make an overview of all the included files in the project and what they modify

    Make a list of all the programs we are using to apply the theme, like lxappearance, spicetify, betterdiscord, and how to install them

    Make a list of all the other programs we are using like slurp, grim, kalu-kde

    Make a note that certain programs, like firefox or gimp, need to be set to use the system theme

    Update the screenshots

  • 3

    Error in polybar run command

    In the i3 config file, the polybar path includes your own user home. Therefore users with different username will have an i3 crash everytime they try to login.

  • 4

    GTK 4.0 Support

    Hi,

    I tried using this theme with Fedora 36, running Gnome 42, but apps such as the Settings app, and Nautilus, do not adopt this theme, instead sticking to Adwaita. When will this theme get GTK 4.0 support?

  • 5

    Rounded corners with Dash to Dock

    Currently using TokyoNight as the gnome shell theme. When enabling rounded corners, the square corners don't completely disappear. I don't have this problem when I change the shell theme to Adwaita, Orchis or Dracula. Still might be a Dash to Dock issue.

    System info: Manjaro Linux GNOME 40.5 Dash to Dock 71

    Screenshot - 0

    Screenshot - 1