├── .gitignore
├── preview.png
├── yarn.lock
├── package.json
├── README.md
└── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/magus/hyper-transparent-dynamic/HEAD/preview.png


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 2 | # yarn lockfile v1
 3 | 
 4 | 
 5 | color-convert@~0.5.0:
 6 |   version "0.5.3"
 7 |   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
 8 | 
 9 | parse-color@^1.0.0:
10 |   version "1.0.0"
11 |   resolved "https://registry.yarnpkg.com/parse-color/-/parse-color-1.0.0.tgz#7b748b95a83f03f16a94f535e52d7f3d94658619"
12 |   dependencies:
13 |     color-convert "~0.5.0"
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hyper-transparent-dynamic",
 3 |   "version": "1.2.0",
 4 |   "description": "dynamically set transparency and vibrancy",
 5 |   "keywords": [
 6 |     "hyper.app",
 7 |     "hyper",
 8 |     "hyperterm",
 9 |     "transparent",
10 |     "background"
11 |   ],
12 |   "main": "index.js",
13 |   "scripts": {
14 |     "syntax": "node --check *.js",
15 |     "test": "npm run syntax"
16 |   },
17 |   "author": "magus",
18 |   "license": "MIT",
19 |   "repository": "magus/hyper-transparent-dynamic",
20 |   "dependencies": {
21 |     "parse-color": "^1.0.0"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # hyper-transparent-dynamic
 2 | 
 3 | Dynamically set the backgroundColor with transparency and apply vibrancy.
 4 | Compatible with **any** theme, pulls in existing value and adds alpha.
 5 | 
 6 | ![hyper-transparent-dynamic-preview](preview.png)
 7 | 
 8 | **Note**: _See example below, load `hyper-transparent-dynamic` *after* your theme plugin._
 9 | ```
10 | module.exports = {
11 |   ...
12 | 
13 |   config: {
14 |     ...
15 | 
16 |     hyperTransparentDynamic: {
17 |       alpha: 0.5 // default 50%
18 |     },
19 | 
20 |     ...
21 |   },
22 | 
23 |   plugins: [
24 |     'hyper-snazzy',
25 |     'hyper-transparent-dynamic',
26 |   ],
27 | 
28 |   ...
29 | }
30 | ```
31 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const parse = require('parse-color');
 2 | 
 3 | const CONFIG_KEY = 'hyperTransparentDynamic';
 4 | const DEFAULT_COLOR = 'rgba(0, 0, 0, 0.5)';
 5 | const DEFAULT_ALPHA = 0.5;
 6 | 
 7 | function makeTransparent(color, alpha = DEFAULT_ALPHA) {
 8 |   if (!color) return DEFAULT_COLOR;
 9 | 
10 |   const { rgb } = parse(color);
11 | 
12 |   if (!rgb) return color;
13 | 
14 |   return `rgba(${rgb.join(', ')}, ${alpha})`;
15 | }
16 | 
17 | module.exports.onWindow = browserWindow => browserWindow.setVibrancy('dark');
18 | 
19 | module.exports.decorateConfig = config => {
20 |   const { alpha } = config[CONFIG_KEY] || {};
21 |   return Object.assign({}, config, {
22 |     backgroundColor: makeTransparent(config.backgroundColor, alpha),
23 |   });
24 | };
25 | 


--------------------------------------------------------------------------------