hyper-transparent-bg
v1.5.2Hyper.app Transparent Background Plugin
An emulated transparent background for Hyper.app!
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 rgba
color as your
config.backgroundColor
(ex config.backgroundColor: 'rgba(0, 0, 0, 0.3)'
).
The alpha transparency must be greater than 0
for this to work..
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',
'hyper-transparent-bg',
],
};
Properties
Add these properties to your ~/.hyper.js
file to configure
hyper-transparent-bg
.
config.backgroundColor
- Type: string (
hex
orrgba
color) - Default:
'#000'
The normal background property for Hyper.app.
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 11/26/2016