- 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
How to get the cursor's class name?