DEV Community

Inee Ader 🐌
Inee Ader 🐌

Posted on

...but I want a pretty PROMPT!

0

If you're anything like me, you like to customize EVERY. SINGLE. THING. that is remotely customizable! I love changing colors, adding my own personal style, and finding themes. By this point, I have already customized my terminal window through the Mac's Terminal > Preferences.

82003515

This blog is particularly about changing the COMMAND LINE of your Z-Shell...particularly oh-my-zsh.

If you're a whiz, scroll waaaaaaaaay down to the bottom for a summary of the process.

FIRST

Open up your (probably boring) terminal and navigate to the root-directory. This is where your terminal defaults to when you first open it. If you're anything like me, you get lost in there sometimes so you can type cd ~ and it'll take you to your root directory.

Then type code .zshrc --which is really hard to type smoothly like an experienced hacker.

1

This should open your code editor...I'm using VS Code, so it automatically opened it in there.

The page displayed is like the manual(README) for oh-my-zsh, and if you're like me, you won't really read anything because you're so eager to CUSTOMIZE! Seriously I'm so annoying, asking "How do I do this?" when it's literally written in the commented-out portions of the page smh...I'm like a t-rex, I won't see it unless it's jumping up and down in front of my face. Keep this open in a tab until you figure out your lovely theme. It looks like this:

zshrc

SECOND

Probably don't mess with too many things in here, but the instructions are pretty clear...just uncomment things you want to have! But we're not really here to discuss that.
Somewhere around line 13, you should see ZSH_THEME="something".

This is telling you what THEME you're currently using in your command line. There are a lot of themes. I changed the "something" in that line to be "random".

Now you can go back to your terminal, and type $SHELL, which would refresh your terminal, loading a random theme! Maybe there's a website that shows all the themes on one page, but if you're like me, you're gonna ^ + ENTER a million times to cycle through randomly.

My name is Inee and my username is "xoliio", both weird-sounding things, so that's what you're seeing on here, in case you were confused:

2

They kind of all start looking the same after a while, but find the theme you like and store it in a little piece of memory in your biological human brain.

Something that might be helpful is to notice where the cursor ends up (the blinking block thing where you type). Does the command-line theme take up one or two lines? What info does it display? Is it readable? Does it have colors you like? You can change this stuff anyway, but to start it helps to have something close to what you were looking for.

For now, I liked the cute simplicity of "af-magic". Still got the name of the theme you like in your noggin? Keep it there for just a little longer.

THIRD

Now we're going to FIND THAT THEME'S FILE.
Open your computer's terminal and navigate to your root directory.

Type ls -a...which lists all the files, but also the SECRET hidden files. You'll see .oh-my-zsh listed in there.
Navigate to that with cd .oh-my-zsh.
Now, you can OPTIONALLY enter ls to see what's in here, but what you want to get into is the "themes" folder via cd themes.

Once you're in there, you can OPTIONALLY ls that and have all the themes listed, but really you just want to type code [theme-name].zsh-theme. ((It's not a directory so you're not going to cd, you want to open it in your code editor this time.)) In my case it'll look like code af-magic.zsh-theme.

This should open up that theme's file in your code editor. Looks so weird, idk what this language is.
4

FOURTH

(why am I counting like this?)

Since we're going to mess with the codes of these themes, let's save it as something else, so that next time oh-my-zsh updates, it won't overwrite your edits. With VS Code selected go to the top left of your screen and select File > Save As.... I want moons on my prompt so I'm going to save mine as moons.zsh-theme...obvi keep the extension of ".zsh-theme" and don't change the save location either, you want this to go into your .oh-my-zsh > themes folder.

5

NOW we can do some stuff...
Make sure you go back to your .zshrc README to change your ZSH_THEME to the new theme name you just saved so you can see the new changes as you edit!

Did you know WE CAN ADD EMOJIS!?😱!?😱!?😱!?
If you're like me, you probably go about things the long way, or simply don't know the super-smart way. I opened up a new gmail email window and used my touch bar to put a bunch of emojis I wanted to play with...

6

You could also open a text field anywhere and press ctr + cmd + SPACE to pull up your emoji options:

7

FIFTH

Anyhowwww, once you have your emojis somewhere easy to access, you can copy-paste them into the code file of that theme. Just takes a little bit of deciphering and pattern-spotting to figure out where...

8

What I've deduced is that $FG[000] things designate color (FG stands for foreground I think). Also in this code there's %{$reset_color%} which resets the color of the background and text to whatever was changed immediately before. Still have yet to figure out what $my_orange is exactly, but I think it's another way of asking for colors.

oh-my-zsh theme files may be structured differently, but ultimately you want to find the code lines that deal with the PROMPT. On mine, the title has it commented out as # primary prompt. From there, you just have to use your riddle-loving-raven-brain to experiment a little with moving those tags around and finding WHERE to add your emoji!

I suggest, if you want to alter stuff safely, copy-paste the whole line of code somewhere else; then, comment it out so that you still have the untainted line to revert back to if you break something.

4 copy

On mine, down near line 23, we see the code written for primary prompt. You can KIND of see in the PS1 text what it's doing. Right after our first color tag of $FG[032] we see a teeny tiny %~.
You can look at this incomplete chart to see what the other little things mean:

%n - username
%B - make bold
%m - short name of current host
%M - name of current host
%# - a `%` or a `#`, depending on whether the shell is running as root or not
%~ - relative path
%/ or %d - absolute path
Enter fullscreen mode Exit fullscreen mode

You can experiment with changing the colors. This is a great chart that has all 256 and organizes the gray-scale and the main-16 too:

9

So real quick, here's the original af-magic.zsh-theme prompt-code-line-thing.

10

And here's mine...I want MOONS, so I'm going to change my PS1 to look like:

11

As you experiment and change the colors etc etc, you can refresh your terminal with $SHELL. You can uncomment stuff to help isolate what you're trying to target.

Notice I changed the color at the VERY beginning of the PS1 line($FG[255]), and added a teeny tiny %n in there because this is where I wanted to add my username. Then I have another color tag ($FG[105]) right before all those ostentatious moons. This color will actually affect the thing AFTER the moons, which is $(git_prompt_info)...essentially the path to your current git file you're working on.

Also notice, I made a new constant called NEWLINE=$'\n' and added it to the END of PS1. Sometimes the file path is so long, I'd rather just start on a clean line...and I love snails so I had to add this little guy 🐌 too! Now when I press ENTER the cursor is on the next line, right next to my little beloved snail pal.

Also notice there's a $FG[048] color tag before a (!.#.>>) thing...this is the color of the little arrows that come at the end of my prompt line.

What else did I do...
I added LEAVES to it too. This is going to happen in the group of lines called # git settings. "Clean" means there are no changes to your git file, "Dirty" means there are uncommitted changes...something like that. Mostly, you'll be working in a "Dirty" state, so keep in mind you'll see it in this form most frequently. Here's what my git settings code looks like:

12

Notice I kept a copy of the prefix up above so I can revert back if needed. The end of the ZSH_THEME_GIT_PROMPT_PREFIX line has a color tag...that actually applies to what color your current git branch will be. I chose white. Then notice on ZSH_THEME_GIT_PROMPT_DIRTY it has a teeny tiny *...this will show up orange, and be present when I'm working on a "Dirty" file.

I uncommented the entire # right prompt lines of code because I just didn't want them.

There's stuff in there about # hg settings, I think that's another code editor?

SUMMARY

Here is my terminal now:

13

For the smarty-pants, I have summarized the process in only 987954837 steps!

  1. Terminal root dir: code .zshrc
  2. Change ZSH_THEME to "random"
  3. Use $SHELL in your terminal to cycle themes
  4. Remember name of the one you like
  5. Terminal root dir: cd .oh-my-zsh then cd themes then code [theme].zsh-theme
  6. "Save As" a new file name in ".oh-my-zsh > themes"
  7. Change ZSH_THEME to your chosen theme
  8. Alter your custom theme file using $SHELL to refresh
  9. Repeat until satisfied

If you want to get DEEPER, here are some helpful resources:

Love from me

Top comments (2)

Collapse
 
dyw972 profile image
Yohan D. • Edited

Thank you for your article! It's exactly what I'm doing and the links you provided helped me to make my own custom theme without using OMZ.

May I suggest you update your NEWLINE variable like this :

NEWLINE=$(printf ' \n\t')

You can check your shell scripts there πŸ‘‰ shellcheck.net
and the reference for this update can be found here πŸ‘‰ github.com/koalaman/shellcheck/wik...

πŸ––

Collapse
 
ineeader profile image
Inee Ader 🐌

Oh thanks! Sorry for the late response, haven't been on here in a while! Can you explain the change to the NEWLINE variable? I don't fully understand...