# electron-acrylic-window
> Add vibrancy effect for electron
Latest version **0.5.11** (published 2021-12-09) · MIT license · 0 weekly downloads
## Install
```sh
npm install electron-acrylic-window
pnpm add electron-acrylic-window
yarn add electron-acrylic-window
bun add electron-acrylic-window
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.5.11 |
| Published | 2021-12-09 |
| First published | 2020-04-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=8.0.0 |
| Dependencies | 4 |
| Unpacked size | 104.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| GitHub stars | 284 |
| Author | seorii |
| Maintainers | seorii |
| Keywords | node, vibrancy, napi, windows, vibrant, acrylic, win10, windows10, blur, fluent, electron |
## Links
- npm: https://www.npmjs.com/package/electron-acrylic-window
- Repository: https://github.com/Seo-Rii/electron-acrylic-window
- Homepage: https://github.com/Seo-Rii/electron-acrylic-window#readme
- Issues: https://github.com/Seo-Rii/electron-acrylic-window/issues
- npm.io page: https://npm.io/package/electron-acrylic-window
## Dependencies (4)
- [bindings](https://npm.io/package/bindings.md) ^1.5.0
- [node-gyp](https://npm.io/package/node-gyp.md) ^8.4.1
- [node-addon-api](https://npm.io/package/node-addon-api.md) ^4.2.0
- [@seorii/win32-displayconfig](https://npm.io/package/@seorii/win32-displayconfig.md) ^0.1.1
## Alternatives
- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads
## Recent versions
- 0.5.11 (latest) — 2021-12-09
- 0.5.10 — 2021-12-08
- 0.5.9 — 2021-09-18
- 0.5.8 — 2021-08-05
- 0.5.7 — 2021-07-18
- 0.5.6 — 2021-07-09
- 0.5.5 — 2021-01-11
- 0.5.4 — 2020-10-29
- 0.5.2 — 2020-10-29
- 0.5.1 — 2020-10-29
- 0.4.7 — 2020-09-24
- 0.4.6 — 2020-09-24
- 0.4.5 — 2020-09-19
- 0.4.4 — 2020-09-14
- 0.4.3 — 2020-09-09
- … 17 more at https://npm.io/package/electron-acrylic-window/versions
## README
electron-acrylic-window
[](https://github.com/Seo-Rii/electron-acrylic-window/actions/workflows/windows.yml)
[](https://badge.fury.io/js/electron-acrylic-window)
Makes it simple to add the Windows 10 Acrylic effect to Electron applications, by acting as a wrapper for the standard Electron vibrancy feature.
Only affects Windows 10. If the OS is not Windows 10, it will fall back on the original vibrancy function.
Inspired by [electron-vibrancy](https://github.com/arkenthera/electron-vibrancy).
## Contributors
Huge thanks to all contributors!
## Installation
You will need Visual Studio or Visual C++ build tools to install this. An easy way to install them can be found [here](https://www.npmjs.com/package/windows-build-tools).
```shell script
yarn add electron-acrylic-window
```
## Usage
### `BrowserWindow` - Wrapper class for `electron.BrowserWindow`
Enables Vibrancy on the Electron window.
```js
const {BrowserWindow} = require("electron-acrylic-window");
win = new BrowserWindow({
...,
frame: false,
vibrancy: [options] // See below
});
```
If OS is Windows 10, it overrides the constructor option and `BrowserWindow.setVibrancy` method to work properly on Windows 10. If OS is not Windows 10, it will work normally.
### `setVibrancy` - Wrapper function for `electron.BrowserWindow.setVibrancy`
Enables Vibrancy on the Electron window.
```js
const { setVibrancy } = require('electron-acrylic-window')
setVibrancy(win, [options])
// OR
win.setVibrancy([options])
```
`win` should be frameless.
Will call original `win.setVibrancy(op)` Electron function if OS is not Windows 10.
There is no return value. If it fails to set vibrancy, it throws an error.
#### Errors
- `WINDOW_NOT_GIVEN` - Error that occurs when `win` parameter is not passed.
- `NOT_VALID_WINDOW` - Error that occurs when `win` parameter is not valid Electron window.
- `FAIL_LOAD_DLL` - Error that occurs when fails to load SetWindowCompositionAttribute from user32.dll
- `UNKNOWN` - Other error.
### Options
If OS is not Windows 10, `[options]` will be passed on to the original vibrancy function/option, so keep that in mind.
On Windows 10, `[options]` should be a String or an Object.
- **String**
Should be `'light'`, `'dark'`, `'appearance-based'` or a hex color code with alpha (`'#222222aa'`).
Default is `'appearance-based'`.
- **Object**
```javascript
op = {
theme: String ( = 'appearance-based'),
effect: String ( = 'acrylic'),
useCustomWindowRefreshMethod: Boolean ( = true),
maximumRefreshRate: Number ( = 60),
disableOnBlur: Boolean ( = true)
}
```
- `theme` - String (optional)
Sets color of acrylic effect. Can be `'light'`, `'dark'`, `'appearance-based'` or a hex color code with alpha (`'#222222aa'`). Default is `'appearance-based'`
- `effect` - String (optional)
Sets the type of Windows transparency effect, either `'acrylic'` or `'blur'`. Default is `'acrylic'`.
> **Setting this option to acrylic may cause performance degradation. Acrylic only works on Windows 10 RS3 or above, otherwise `'blur'` is forced.**
- `useCustomWindowRefreshMethod` - Boolean (optional)
Use custom window resize/move handler for performance. Default is `true`.
Special thanks to [@djsweet](https://github.com/djsweet) and [@xanderfrangos](https://github.com/xanderfrangos).
> **This is an experimental feature. May cause errors.**
- `maximumRefreshRate` - Number (optional)
Maximum refresh rate of the application, in hertz. Default is `60`.
- `disableOnBlur` - Boolean (optional)
If true, acrylic effect will be disabled when the window loses focus, to mimic the behaviour of normal UWP apps. Default is `true`.
- `debug` - Boolean (optional)
If true, log will be printed to console.
## Demo
To run the demo Electron application, clone this repository, install the dependencies and run the test script:
```bash
git clone https://github.com/Seo-Rii/electron-acrylic-window.git
cd electron-acrylic-window
yarn install
yarn run test
```
---
_Source: https://npm.io/package/electron-acrylic-window · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._