Skip to content
adds a gradient border to the Hyper terminal
Branch: master
Clone or download
Latest commit 57be6fd Apr 20, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib fix jsdoc Dec 5, 2017
test
.editorconfig Refactoring (#36) Nov 22, 2017
.eslintrc.json
.gitignore Adding ability to customize border colors depending on elevation stat… Nov 9, 2017
.npmignore Adding basic tests and basic lint rules. (#28) Nov 10, 2017
.nvmrc Adding extensive tests for onRendererWindow() (#32) Nov 14, 2017
.travis.yml Adding extensive tests for onRendererWindow() (#32) Nov 14, 2017
README.md Allow setting the border radius (#46) Apr 20, 2018
index.js
package.json 1.1.1 Apr 20, 2018
yarn.lock animate border using JavaScript intervals (#35) Nov 20, 2017

README.md

hyperborder - extension for Hyper

adds a gradient border to the Hyper terminal

Installation

add it to plugins in your ~/.hyper.js configuration

module.exports = {
  ...
  plugins: ['hyperborder']
  ...
}

then just restart Hyper app or go to the menu 'Plugins / Update All Now'

Configuration

The following settings can be configured by adding a hyperBorder section in your .hyper.js config section:

Setting Type Description
borderWidth string CSS string for how thick the borders should be
borderRadiusInner string CSS string for round inner corners
borderRadiusOuter string CSS string for round outer corners
borderColors string, string[] The color(s) for the border
adminBorderColors string, string[] The color(s) for the border for an admin/elevated window. This follows the precedence of adminBorderColors > borderColors > defaultColors
blurredColors string, string[] The color(s) of the borders when the window isn't active
blurredAdminColors string, string[] The color(s) of the borders when the admin/elevated window isn't active. This follows the precedence of blurredAdminColors > blurredColors > adminBorderColors > borderColors > defaultColors

A note on admin/root colors

The use of Hyper under the admin/root account is mainly intended for Windows' users (where it is common to run an application in elevated mode), since on Linux/OSX you would typically utilize the sudo <command> command. Technically you can run Hyper as root on non-Windows machines (there are issues running Hyper as root under a Wayland desktop), though in this case, the root user will actually have their own copy of .hyper.js configuration.

EXAMPLE: Set Border Colors And Width

module.exports = {
  config: {
    ...
      hyperBorder: {
        borderColors: ['#fc1da7', '#fba506'],
        borderWidth: '8px'
      }
    ...
  }
}

EXAMPLE: Set Border Colors To Random Colors

In addition, you can set any color value to 'random' (string value):

module.exports = {
  config: {
    ...
      hyperBorder: {
        borderColors: ['random','random'],
        borderWidth: '8px'
      }
    ...
  }
}

Then every newly opened Hyper terminal window will have a different colored border.

EXAMPLE: Animate Border Colors

You like some animations? Then try this:

module.exports = {
  config: {
    ...
    hyperBorder: {
      animate: true,
      ...
    }
    ...
  }
}

To change the speed of animation, specify an object with a duration property:

module.exports = {
  config: {
    ...
    hyperBorder: {
      animate: {
        duration: '1s',  // default is 16s
      },
      ...
    }
    ...
  }
}

EXAMPLE: Angled Gradients

Because we use CSS3's linear-gradient, we're able to specify angles at which to create the radius. Set your own angle like this:

module.exports = {
  config: {
    ...
    hyperBorder: {
      borderAngle: '180deg',
      ...
    }
    ...
  }
}

Download Hyper here

https://hyper.is/

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.