Theme For Mac Terminal

As a big fan of Sublime Text, I was excited to find out that somebody made a port of the Monokai theme for macOS and OSX's Terminal. Originally developed by Wimer Hazenberg, Monokai is a great color scheme available for a variety of text-based applications.This short guide will show you how to get Monokai into Terminal. Prevent Mac Terminal from reverting to default theme. Ask Question Asked 7 years, 4 months ago. Active 6 months ago. Viewed 234k times 62. I can't find any way to change the Terminal theme and have that theme applied permanently. I want to change to another darker theme other than the default 'basic' theme, and (most importantly) have it.

  1. Dracula Theme For Mac Terminal
  2. Theme For Mac Os X

The Terminal app allows you to control your Mac using a command prompt. Why would you want to do that? Well, perhaps because you’re used to working on a command line in a Unix-based system and prefer to work that way. Terminal is a Mac command line interface. There are several advantages to using Terminal to accomplish some tasks — it’s usually quicker, for example. In order to use it, however, you’ll need to get to grips with its basic commands and functions. Once you’ve done that, you can dig deeper and learn more commands and use your Mac’s command prompt for more complex, as well as some fun, tasks.

Curated Mac apps that keep your Mac’s performance under control. Avoid Terminal commands, avoid trouble.

Download Free
  • Mac-os-x-terminal-themes Color schemes for default Mac OS X Terminal.app. This is a set of color schemes for default Mac OS X Terminal.app (ported from iTerm 2 color schemes, collected by @mbadolato). Screenshots are below and in the screenshots/ directory of this repo.
  • Extensions are universal Node.js modules loaded by both Electron and the renderer process. The extension system is designed around composition of the APIs we use to build the terminal: React components and Redux actions. Instead of exposing a custom API method or parameter for every possible customization point, we allow you to intercept and compose every bit of functionality!

How to open Terminal on Mac

The Terminal app is in the Utilities folder in Applications. To open it, either open your Applications folder, then open Utilities and double-click on Terminal, or press Command - spacebar to launch Spotlight and type 'Terminal,' then double-click the search result.

You’ll see a small window with a white background open on your desktop. In the title bar are your username, the word 'bash' and the dimensions of the window in pixels. Bash stands for 'Bourne again shell'. There are a number of different shells that can run Unix commands, and on the Mac Bash is the one used by Terminal.

If you want to make the window bigger, click on the bottom right corner and drag it outwards. If you don’t like the black text on a white background, go to the Shell menu, choose New Window and select from the options in the list.

If Terminal feels complicated or you have issues with the set-up, let us tell you right away that there are alternatives. MacPilot allows to get access to over 1,200 macOS features without memorizing any commands. Basically, a third-party Terminal for Mac that acts like Finder.

For Mac monitoring features, try iStat Menus. The app collects data like CPU load, disk activity, network usage, and more — all of which accessible from your menu bar.

Basic Mac commands in Terminal

The quickest way to get to know Terminal and understand how it works is to start using it. But before we do that, it’s worth spending a little time getting to know how commands work. To run a command, you just type it at the cursor and hit Return to execute.

Every command is made up of three elements: the command itself, an argument which tells the command what resource it should operate on, and an option that modifies the output. So, for example, to move a file from one folder to another on your Mac, you’d use the move command 'mv' and then type the location of the file you want to move, including the file name and the location where you want to move it to.

Let’s try it.

  1. Type cd ~/Documentsthen and press Return to navigate to your Home folder.

  2. Type lsthen Return (you type Return after every command).

You should now see a list of all the files in your Documents folder — ls is the command for listing files.

To see a list of all the commands available in Terminal, hold down the Escape key and then press y when you see a question asking if you want to see all the possibilities. To see more commands, press Return.

Unix has its own built-in manual. So, to learn more about a command type man [name of command], where 'command' is the name of the command you want find out more about.

Terminal rules

There are a few things you need to bear in mind when you’re typing commands in Terminal, or any other command-line tool. Firstly, every character matters, including spaces. So when you’re copying a command you see here, make sure you include the spaces and that characters are in the correct case.

You can’t use a mouse or trackpad in Terminal, but you can navigate using the arrow keys. If you want to re-run a command, tap the up arrow key until you reach it, then press Return. To interrupt a command that’s already running, type Control-C.

Commands are always executed in the current location. So, if you don’t specify a location in the command, it will run wherever you last moved to or where the last command was run. Use the cdcommand, followed by a directory path, like in Step 1 above, to specify the folder where you want a command to run.

There is another way to specify a location: go to the Finder, navigate to the file or folder you want and drag it onto the Terminal window, with the cursor at the point where you would have typed the path.

Here’s another example. This time, we’ll create a new folder inside your Documents directory and call it 'TerminalTest.'

  1. Open a Finder window and navigate to your Documents folder.

  2. Type cd and drag the Documents folder onto the Terminal window.

  3. Now, type mkdir 'TerminalTest'

Go back to the Finder, open Text Edit and create a new file called 'TerminalTestFile.rtf'. Now save it to the TerminalTest folder in your Documents folder.

In the Terminal window, type cd ~/Documents/TerminalTest then Return. Now type lsand you should see 'TerminalTestFile' listed.

To change the name of the file, type this, pressing Return after every step:

  1. cd~/Documents/Terminal Test

  2. mv TerminalTestFile TerminalTestFile2.rtf

That will change the name of the file to 'TerminalTestFile2'. You can, of course, use any name you like. The mv command means 'move' and you can also use it to move files from one directory to another. In that case, you’d keep the file names the same, but specify another directory before typing the the second instance of the name, like this:

mv ~/Documents/TerminalTest TerminalTestFile.rtf ~/Documents/TerminalTest2 TerminalTestFile.rtf

More advanced Terminal commands

Terminal can be used for all sorts of different tasks. Some of them can be performed in the Finder, but are quicker in Terminal. Others access deep-rooted parts of macOS that aren’t accessible from the Finder without specialist applications. Here are a few examples.

Copy files from one folder to another
  1. In a Terminal window, type ditto [folder 1] [folder 1] where 'folder 1' is the folder that hosts the files and 'folder 2' is the folder you want to move them to.

  2. To see the files being copied in the Terminal window, type -v after the command.

Download files from the internet

You’ll need the URL of the file you want to download in order to use Terminal for this.

  1. cd ~/Downloads/

  2. curl -O [URL of file you want to download]

If you want to download the file to a directory other than your Downloads folder, replace ~/Downloads/ with the path to that folder, or drag it onto the Terminal window after you type the cd command.

Change the default location for screenshots

If you don’t want macOS to save screenshots to your Desktop when you press Command-Shift-3, you can change the default location in Terminal

  1. defaults write com.apple.screencapture location [path to folder where you want screenshots to be saved]

  2. Hit Return

  3. killall SystemUIServer

  4. Hit Return

Change the default file type for screenshots

By default, macOS saves screenshots as .png files. To change that to .jpg, do this:

  1. defaults write com.apple.screencapture type JPG

  2. Press Return

  3. killall SystemUIServer

  4. Press Return

Delete all files in a folder

The command used to delete, or remove, files in Terminal is rm. So, for example, if you wanted to remove a file in your Documents folder named 'oldfile.rtf' you’d use cd ~/Documents to go to your Documents folder then to delete the file. As it stands, that will delete the file without further intervention from you. If you want to confirm the file to be deleted, use -i as in rm -i oldfile.rtf

To delete all the files and sub-folders in a directory named 'oldfolder', the command is rm -R oldfolder and to confirm each file should be deleted, rm -iR oldfolder

Just because you can use Terminal to delete files on your Mac, doesn’t mean you should. It’s a relatively blunt instrument, deleting only those files and folders you specify.

Another way to free up space

If your goal in removing files or folders is to free up space on your Mac, or to remove junk files that are causing your Mac to run slowly, it’s far better to use an app designed for the purpose. CleanMyMac X is one such app.

It will scan your Mac for files and recommend which ones you can delete safely, as well as telling you how much space you’ll save. And once you’ve decided which files to delete, you can get rid of them in a click. You can download CleanMyMac here.


As you can see, while Terminal may look scary and seem like it’s difficult to use, it really isn’t. The key is learning a few commands, such as those we’ve outlined above, and getting to know the syntax for those commands.

However, you should be careful when using Terminal, it’s a powerful tool that has deep access to your Mac’s system files. Check commands by googling them if you’re not sure what they do. And if you need to delete files to save space, use an app like CleanMyMac X to do it. It’s much safer!

These might also interest you:

Installation

latest version: 3.0.2
64-bit
macOS (.app)3.0.2
Windows (.exe)3.0.2
Debian (.deb)3.0.2
Fedora (.rpm)3.0.2
Other Linux distros (.AppImage)3.0.2

Project Goals

The goal of the project is to create a beautiful and extensible experience for command-line interface users, built on open web standards. In the beginning, our focus will be primarily around speed, stability and the development of the correct API for extension authors.

In the future, we anticipate the community will come up with innovative additions to enhance what could be the simplest, most powerful and well-tested interface for productivity.

Extensions

Extensions are available on npm. We encourage everyone to includehyper in the keywordsfield in package.json.

Then edit .hyper.js and add it to plugins

Hyper will show a notification when your modules are installed to .hyper_plugins.

Keymaps

All command keys can be changed. In order to change them, edit.hyper.js and add your desired change to keymaps.

Then Hyper will change the default with your custom change.

Example: 'window:devtools': 'Cmd+Alt+O'

Default keymaps:

Configuration

Config location

macOS~/Library/Application Support/Hyper/.hyper.js
Windows$Env:AppData/Hyper/.hyper.js
Linux~/.config/Hyper/.hyper.js

Note: config at ~/.hyper.js still supported, but will be ignored, if config in application directory present. Otherwise it will be moved to the application directory at first run.

The config object seen above in.hyper.js admits the following

PropertyDefaultDescription
updateChannel'stable'The update channel to receive updates from
fontSize12The default size in pixels for the terminal
fontFamily'Menlo, DejaVu Sans Mono, Lucida Console, monospace'The font family to use with optional fallbacks
uiFontFamily'-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, ...'The font family to use for the UI with optional fallbacks
fontWeight'normal'The default font weight: 'normal' or 'bold'
fontWeightBold'bold'The font weight for bold characters: 'normal' or 'bold'
cursorColor'rgba(248,28,229,0.8)'The color of the caret in the terminal
cursorAccentColor'#000'The text color under BLOCK cursor
cursorShape'BLOCK'The shape of the caret in the terminal. Available options are: 'BEAM', 'UNDERLINE', 'BLOCK'
cursorBlink'false'If true, cursor will blink
foregroundColor'#fff'The color of the main text of the terminal
backgroundColor'#000'The color and opacity of the window and main terminal background
selectionColor'rgba(248,28,229,0.3)'The background color/opacity of the text selection in terminal
borderColor'#333'The color of the main window border and tab bar
css'Custom CSS to include in the main window
padding'12px 14px'CSS padding values for the space around each term
colors{ black: '#000000', red: '#ff0000', ... }A list of overrides for the color palette. The names of the keys represent the 'ANSI 16', which can all be seenin the default config.
shell'A path to a custom shell to run when Hyper starts a new session
shellArgs'['--login']'An array of shell arguments
env{}An object of environment variables to set before launching shell
windowSize[540, 380]The default width/height in pixels of a new window
scrollback1000The number of rows to be persisted in terminal buffer for scrolling
copyOnSelectfalseIf true, selected text will automatically be copied to the clipboard
quickEditfalseIf true, on right click selected text will be copied or pasted if no selection is present (true by default on Windows)
defaultSSHApptrueIf true, Hyper will be set as the default protocol client for SSH
modifierKeys{altIsMeta: false}Change the behaviour of modifier keys to act as meta key
showHamburgerMenutrue on Linux/Windows, false on macOSChange the visibility of the hamburger menu. Available options are: true, false
showWindowControls'Change the position/visibility of the window controls. Available options are: true, false, 'left'

Extensions API

Extensions are universal Node.js modules loaded by both Electron and the renderer process.

The extension system is designed around composition of the APIs we use to build the terminal: React components andRedux actions.

Instead of exposing a custom API method or parameter for every possible customization point, we allow you to intercept and compose every bit of functionality!

The only knowledge that is therefore required to successfully extendHyper is that of its underlying open source libraries.

You can find additional details about plugin developmentin the Hyper repository.

Your module has to expose at least one of these methods:

MethodInvoked fromDescription
onAppElectron

Invoked when the app first loads. If a plugin reloads, it's invoked again with the existing app.

Parameters:

appThe electron app.
onWindowElectron

Invoked when each window is created. If a plugin reloads, it's invoked again with the existing windows.

Parameters:

windowAn electron BrowserWindow.
onUnloadElectron

Invoked when a plugin is removed by the user.

Parameters:

appThe electron app.
decorateConfigElectron / Renderer

v0.5.0+. Allows you to decorate the user's configuration.
Useful for themeing or custom parameters for your plugin.

Parameters:

configThe config object
decorateEnvElectron

v0.7.0+. Allows you to decorate the user's environment by returning a modified environment object.

Parameters:

environmentThe environment object
decorateMenuElectron

Invoked with the Electron's Menu template. If a plugin reloads, it's called again and the menu is refreshed.

Parameters:

menuThe menu template object
decorateBrowserOptionsElectron

Allows you to decorate Electron's BrowserWindowoptions when a new window is created.

Parameters:

optionsThe BrowserWindow options object.
onRendererWindowRenderer

Invoked when a plugin is first loaded or subsequently reloaded in each window.

Parameters:

windowThe window object
middlewareRenderer

A custom Redux middleware that can intercept any action. Subsequently we invoke the thunkmiddleware, which means your middleware cannext thunks.

reduceUI
reduceSessions
reduceTermGroups
Renderer

A custom reducer for the ui,sessions or termgroups state shape.

stateThe Redux state object
actionThe action object
getTabsPropsRenderer

Passes down props from <Tabs>to the <Header> component. Must return the composed props object.

parentPropsProps form the parent component.
propsThe existing properties that will be passed to the component.
getTabPropsRenderer

Passes down props from <Tab>to the <Tabs> component. Must return the composed props object.

uidTab / Term uid
parentPropsProps form the parent component.
propsThe existing properties that will be passed to the component.
getTermGroupPropsRenderer

Passes down props from <Terms>to the <TermGroup> component. Must return the composed props object.

uidTermGroup uid
parentPropsProps form the parent component.
propsThe existing properties that will be passed to the component.
getTermPropsRenderer

Passes down props from <TermGroup>to the <Term> component. Must return the composed props object.

uidTerm uid
parentPropsProps form the parent component.
propsThe existing properties that will be passed to the component.
mapHyperState
mapTermsState
mapHeaderState
mapNotificationsState
Renderer

A custom mapper for the state properties thatcontainer componentsreceive. Note that for children components to get these properties, you have to pass them down using the corresponding methods (like getTermProps).

Must return an extended object of the map passed.

stateThe Redux global state
mapThe existing map of properties that will be passed to the component.
mapHyperDispatch
mapTermsDispatch
mapHeaderDispatch
mapNotificationsDispatch
Renderer

A custom mapper for the dispatch properties. Must return an extended object of the map passed.

dispatchThe Redux dispatch function
mapThe existing map of properties that will be passed to the component.
decorateHyper
decorateNotifications
decorateNotificationdecorateHeader
decorateTabs
decorateTabdecorateTerms
decorateTermGroup
decorateSplitPane
decorateTerm
Renderer

Invoked with the ReactComponentto decorate. Must return a Higher Order Component.

Parameters:

HyperThe ReactComponentconstructor.
envA collection of useful module references for building components.See below

Module loading

The user can hot-load and hot-reload plugins by pressing Command + R (refresh). Please strive to make plugins that don't require a complete restart of the application to work.

Notice

Plugins affecting the `BrowserWindow` will the effect on new windows after hot-reload.

Dracula Theme For Mac Terminal

In the future we might do this automatically.

When developing, you can add your plugin to.hyper_plugins/local and then specify it under the localPlugins array in.hyper.js. We load new plugins:

  • Periodically (every few hours)
  • When changes are made to the configuration file (plugins or localPlugins)
  • When the user clicks Plugins > Update all now

The process of reloading involves

  • Running npm prune and npm install in.hyper_plugins.
  • Pruning the require.cache in both electron and the renderer process
  • Invoking on* methods on the existing instances and re-rendering components with the fresh decorations in place.

Plugins location

macOS~/Library/Application Support/Hyper/.hyper_plugins
Windows$Env:AppData/Hyper/.hyper_plugins
Linux~/.config/Hyper/.hyper_plugins

Note: plugins at ~/.hyper_plugins still supported, but will be ignored, if plugins in application directory present. Otherwise they will be moved to the application directory at first run.

Note: on the main process, plugins are registered as soon as possible (we fire onLoad). On the browser, it's up to the user to trigger their load by pressing command+R. We put the user in control of the loading in this way to prevent them from losing critical work by extensions that reset state or don't preserve it correctly.

Decorating components

Theme For Mac Os X

We give you the ability to provide a higher order component for every piece of the Hyper UI.
Its structure is as follows:

All the decorate* methods receive the following references in an object passed as the second parameter:

ReactThe entire React namespace.
notify

A helper function that shows a desktop notification. The first parameter is the title, the second is the optional body of the notification, and the third is another optional parameter which can be used to log details to the development console.

To pass these details, simply provide and object with anerror property containing the information to log.

NotificationThe Notification component in case you want to re-use it.

All the components accept the following two properties to extend their markup:

customChildrenAn array of Element or a singleElement to insert at the bottom of the component.
customChildrenBeforeThe same as the above property, but inserted as the first child element(s) of the component.
For

Your higher order component can supply a onDecoratedproperty to the decorated component to get a reference to its instance.

Your Term higher order component can supply anonCursorMovehandler property that be called when cursor has moved with an object parameter representing its relative position to Term origin:

xHorizontal position in pixels
yVertical position in pixels
widthCursor width in pixels
heightCursor height in pixels
colHorizontal position in columns
rowVertical position in rows

We encourage you to maintain compatibility with other decorators. Since many can be set, don't assume that yours is the only one.

For example, if you're passing children, compose potential existing values:

Or if you use onDecorated property

Actions and Effects

All theRedux actionsare available for you to handle through your middleware and reducers. For an example, refer to the Hyperpowerreference plugin.

Side effects occur in two fundamental forms:

  • Some actions dispatch other actions based on state.
  • Some actions do async work by communicating over the RPC channel to the main process

In all cases, the side effect is passed as the effect key in the action and later handled by our middleware.

This means that you can override, compose or completely eliminate effects! In other words, this is how you can change the default functionality or behavior of the app.

As an example, consider the action we use to increase the font size when you press Command+=:

The underlying terminal

Hyper achieves a lot of its speed and functionality thanks to the power ofxterm.js

Additional APIs

The Electron app objects are extended with the following properties:

configAn Object with the config block from.hyper.js.
pluginsAn Object with helpers for plugins.
getWindowsA Function that returns an Set of all the open windows.
createWindowA Function that will create a new window. Accepts an optional callback that will be passed as the new window's init callback.

Electron BrowserWindow objects are extended with the following parameters:

rpcAn EventEmitter that allows for communication with the window process.
sessionsA Map of Sessionobjects which hold the communication with each term's pty..

Renderer windows are similarly extended with:

rpcAn EventEmitter that allows for communication with the window process.
storeThe Redux Store object. This allows access todispatch actions or read the global state withgetState.

The rpc object is symmetrical between browser and renderer process. The API is the same as Node.js, with the exception that it only admits a single object as its parameters only:

Example theme: Hyperyellow

The following extension simply alters the config to add CSS and yellow colors! Here's thecode.

Themes are simply plugins! Only one hook, decorateConfigis needed:

I grabbed the class names by inspecting the term with Devtools, which you can trigger from View -> Toggle Developer Tools. When you do so, notice that some classes are automatically generated and followed by a random nonce (e.g.: term_13hv8io). Ignore those: they change with every new window!

Notice the emphasis on playing nice with other extensions. Specifically, we create a new object, extend only the keys we are interested in, and we compose the CSS to preserve the user's setting and that of other authors':

Example extension: Hyperpower

The following extension renders particles as the caret moves:

Let's walk throughits code.
First, we intercept the Redux action SESSION_ADD_DATA. You can find the full list of actionsin the repository.

Notice that we don't re-dispatch the action, which means we never render the output of the command to the terminal. Instead, we dispatch an action of our own, which we grab in the uiReducerand later map:

We then want to decorate the <Term> component so that we can access the underlying caret.

However, <Term> is not a container that we can map props to. So we use getTermProps to pass the property further down:

The extension thenreturnsa higher order component to wrap <Term>. Notice we pass the onDecoratedproperty to access the base Term component and its DOM ref, and theonCursorMove property to use Hyper cursor API: