hyperterm-transparent-bg
v1.5.0HyperTerm Transparent Background Plugin
An emulated transparent background for HyperTerm!
WAT HOW DOES IT WORK
It's an HTML5 <video />
of the entire screen that's moved when the window
moves. CSS is used to make it transparent and add other effects.
If you don't want a blur or other effects added to your background, but you
still want it to be transparent, just use an 8 digit hexcidecimal #AARRGGBB
color as your config.backgroundColor
(ex config.backgroundColor: '#AA000000'
).
Demo
Configuration
Usage with themes
Yes, it works with themes! All that is needed is to add this package anywhere
after the theme package and it will automatically apply the effects from the
config.transparentBg
property below to the background from the theme.
For example using the hyperterm-material
theme:
module.exports = {
plugins: [
'hyperterm-material',
'hyperterm-transparent-bg',
],
};
Properties
Add these properties to your ~/.hyperterm.js
file to configure
hyperterm-transparent-bg
.
config.backgroundColor
- Type: string (hex color '#AARRGGBB')
- Default:
'#000'
The normal background property for HyperTerm.
config.transparentBg
- Type: object
- Default:
{ WebkitFilter: 'blur(5px)', opacity: '0.3' }
This object can be any CSSStyleDeclaration allowed. Essentially pass an inline style object the same way you would with React.
By default there is blur and opacity applied.
A value of opacity: 1
will have no background color applied to it.
A value of opacity: 0
for opacity will have no "transparency" and only have
color.
Development / Debugging / More WAT
Setting the DEBUG
environmental variable to a truthy value will make the
plugin console.log
the commands that are being sent to the window.
Metadata
- MIT
- Whatever
- Dylan Frankland
- released 7/19/2016