Skip to content

Instantly share code, notes, and snippets.

@AlexandroPerez
Last active June 8, 2021 05:14
Show Gist options
  • Save AlexandroPerez/547d1313f542a2a10eee7f7e751958bb to your computer and use it in GitHub Desktop.
Save AlexandroPerez/547d1313f542a2a10eee7f7e751958bb to your computer and use it in GitHub Desktop.
Windows Terminal oh-my-zsh theme configuration

Before using the following steps set Ubuntu's color scheme to Tango Dark, which is included in Windows Terminal color schemes. This is the best scheme to match the following setup.

  1. First install zsh and curl in wsl terminal. Also git if not installed yet, else omit.

$ sudo apt-get install zsh curl git

  1. Install oh-my-zsh.

When prompted to set zsh as your default shell type Yes

$ sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

  1. Now we can start using themes, but before that we need to add some fonts. Mainly "Meslo Nerd Font." If you don't have them store in Google Drive (fonts folder) find them here:

https://github.com/romkatv/powerlevel10k#meslo-nerd-font-patched-for-powerlevel10k

You have to install all 4 fonts in Windows, then set "Font face" to "MesloLGS NF" in windows terminal settings

Open settings, then in the profile section of Ubuntu you'll find it in the Appearance section.

  1. Now we're ready to install a theme. We'll use Powerlevel10k. Run in your terminal:

$ git clone --depth=1 https://github.com/romkatv/powerlevel10k.git $ZSH_CUSTOM/themes/powerlevel10k

After that set ZSH_THEME="powerlevel10k/powerlevel10k" in your ~/.zshrc file. Use vs code or vim.

  1. After the above changes, restart windows terminal, and the Powerlevel10k configuration wizard should appear.

You can always run $ p10k configure to access it later, or in case it didn't run after restarting terminal.

  1. Finally we'll change the dircolors that wsl uses, since they're probably hard to read (green backgrounds with hard to read letters on hidden and linked folders.) We'll use zsh-dircolors-solarized as an oh-my-zsh plugin:

$ git clone --recursive git://github.com/joel-porquet/zsh-dircolors-solarized $ZSH_CUSTOM/plugins/zsh-dircolors-solarized

Then we'll add the plugin to the list of oh-my-zsh plugin list. It may end up looking as follows in your ~/.zshrc file: (each plugin is space separated, and git is used by default)

plugins=(git zsh-dircolors-solarized)

After enabling the plugin, in the terminal we can run the following command to setup one of the available dircolor themes:

$ setupsolarized dircolors.ansi-dark

there are other themes, but this one looks best at time of writing. See zsh-dircolors-solarized README for usage.

@AlexandroPerez
Copy link
Author

For VS Code, you'll have to change the terminal font to MesloLGS NF after installing the font. You'll also have to manually change the theme of the terminal colors to match that of the terminal. The settings.json (the global one, not default or workspace) will need to be modified. You're looking for "workbench.colorCustomizations": {...}

{
  //...
  "workbench.colorCustomizations": {
    //...
    /* TANGO DARK THEME */
    "terminal.foreground": "#D3D7CF",
    "terminal.background": "#030303",
    "terminalCursor.foreground": "#FFFFFF",
    "terminalCursor.background": "#FFFFFF",
    "terminal.ansiBlack": "#030303",
    "terminal.ansiBrightBlack": "#555753",
    "terminal.ansiRed": "#CC0000",
    "terminal.ansiBrightRed": "#EF2929",
    "terminal.ansiGreen": "#4E9A06",
    "terminal.ansiBrightGreen": "#8AE234",
    "terminal.ansiYellow": "#C4A000",
    "terminal.ansiBrightYellow": "#FCE94F",
    "terminal.ansiBlue": "#3465A4",
    "terminal.ansiBrightBlue": "#729FCF",
    "terminal.ansiMagenta": "#75507B",
    "terminal.ansiBrightMagenta": "#AD7FA8",
    "terminal.ansiCyan": "#06989A",
    "terminal.ansiBrightCyan": "#34E2E2",
    "terminal.ansiWhite": "#D3D7CF",
    "terminal.ansiBrightWhite": "#EEEEEC"
  }
  //..
}

You will need to get rid of duplicate object key entry settings when adding this theme. For example VS Code settings.json may already have defined "terminal.foreground", "terminalCursor.foreground" and others. The editor will let you know if there are duplicate entries by underlining them. Just remove, or comment out the previous one, and you're good to go.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment