- An editor (eg. vscode, vim)
- A mac where Hyper.js installed (for windows and linux users, you can also follow this guide, but please find your hyper configuration code location from our website)
- Chrome (which will be very helpful on inspection and experiments)
Hyper.js is a terminal built with Electron, empowered by React, Redux and XTerm.js. It's fast, sleek and flexible. Everyone can simply customise its interface with css and add some playfulness by writing few lines of javascript codes. Hyper.js also has a detailed API reference which you may find helpful for advancing customisation.
Start your Hyper.js, and you will see a row helper. Go to view
and click on Developer Tools
, then you will see a Chrome Developer Tool pops up. From the Developer Tool, you are allowed to inspect the elements structure as well as their styles and attributes.
A good place to experimental customisation is spending time with your hyper.js
configration file , this file lives in home directory if you're using MacOSX (for Linux and Windows users, please visit hyper website for more reference).
From here, you can find an anonymous javascript object. You can start trying out styling your Hyper.js by changing colours, paddings, background and other variables in a block called config
.
As you already have the access to Hyper.js' elements, you now are free to customise your hyper style within css
and termCss
blocks. ( A friendly note: please wrap your css code within `` )
Wow, you have a fully decorated terminal! Now, you probably can't wait for sharing it to the community, so you wonder how to make a theme plugin.
Let's initiate a node.js project. Create a directory under ~/.hyper_plugins/local/
and append the directory name to a property called localPlugins in ~/.hyper.js
to load your plugins in development mode. Assuming you've already had npm installed, initiate your projects via typing npm init -y
, and create a file called index.js
.
Next, let's create a function called decorateConfig
in index.js
. Note: decorateConfig
hooks up hyper, and will return an object full of customisation properties. decorateConfig
also accept a parameter called config ( an Electron app
object from ~/.hyper.js
's config block you just edited).
Declare an object that will be return by decorateConfig, and copy your styling including css code and properties from ~/.hyper.js
to its body. As a theme, it always plays better when users' own configuration is overwritten, therefore, instead of returning a object with your styling properties, let's merge users' own customisation code by returning
Object.assign({}, config, {your styling configurations ...})
Lastly, export decorateConfig
function, and restart Hyper. And, viola ~
Run npm publish
to submit your theme to NPM. Before publishing, don't forget add hyper
and hyper-theme
to your keywords which can help you get more exposure.
You're welcomed to add your theme to Hyper Store by simply submitting a pull request to hyper-site.
Wanna let more people try out your theme, check out the famous community list awesome-hyper