{"id":13797457,"url":"https://github.com/0x61726b/electron-vibrancy","last_synced_at":"2026-04-01T18:59:32.668Z","repository":{"id":41432450,"uuid":"69748806","full_name":"0x61726b/electron-vibrancy","owner":"0x61726b","description":"Make your electron windows vibrant!","archived":false,"fork":false,"pushed_at":"2023-04-19T18:26:43.000Z","size":116,"stargazers_count":659,"open_issues_count":21,"forks_count":50,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-10-17T21:47:34.230Z","etag":null,"topics":["electron","electron-vibrancy","vibrancy"],"latest_commit_sha":null,"homepage":null,"language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/0x61726b.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-10-01T16:12:18.000Z","updated_at":"2025-10-04T15:36:57.000Z","dependencies_parsed_at":"2023-10-20T17:37:05.040Z","dependency_job_id":null,"html_url":"https://github.com/0x61726b/electron-vibrancy","commit_stats":null,"previous_names":["arkenthera/electron-vibrancy"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/0x61726b/electron-vibrancy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0x61726b%2Felectron-vibrancy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0x61726b%2Felectron-vibrancy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0x61726b%2Felectron-vibrancy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0x61726b%2Felectron-vibrancy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0x61726b","download_url":"https://codeload.github.com/0x61726b/electron-vibrancy/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0x61726b%2Felectron-vibrancy/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31290993,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-01T13:12:26.723Z","status":"ssl_error","status_checked_at":"2026-04-01T13:12:25.102Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["electron","electron-vibrancy","vibrancy"],"created_at":"2024-08-04T00:00:21.142Z","updated_at":"2026-04-01T18:59:32.610Z","avatar_url":"https://github.com/0x61726b.png","language":"C++","funding_links":[],"categories":["Library","Tools"],"sub_categories":["UI","For Electron"],"readme":"#electron-vibrancy\n\n[![Build Status](https://travis-ci.org/arkenthera/electron-vibrancy.svg?branch=master)](https://travis-ci.org/arkenthera/electron-vibrancy)\n[![Build status](https://ci.appveyor.com/api/projects/status/41na3l88kgs8wir1?svg=true)](https://ci.appveyor.com/project/arkenthera/electron-vibrancy)\n[![npm version](https://badge.fury.io/js/electron-vibrancy.svg)](https://badge.fury.io/js/electron-vibrancy)\n![](https://img.shields.io/npm/dm/electron-vibrancy.svg)\n![](https://david-dm.org/arkenthera/electron-vibrancy/status.svg)\n\n# As of [#7898](https://github.com/electron/electron/pull/7898) Vibrancy is now supported in Electron for *macOS*.\n\nThis module is intended to give an [Electron](https://github.com/electron/electron) BrowserWindow blur on its behind. Electron does not support 'blur behind' from a transparent window and this module uses native API calls to achieve the effect.\n\n![](http://i.imgur.com/0sRPzpn.png)\n\n![](http://i.imgur.com/42jOnRV.png)\n\n# Running\n\nSince this is a native addon, you will need your platforms build tools. Visual Studio,XCode etc.Also Python for `node-gyp`.\n\n```\ngit clone https://github.com/arkenthera/electron-vibrancy\ncd electron-vibrancy\nnpm install\ncd spec/app # Go to sample app\nelectron . # electron --version should be 1.6.8\n```\n\nTo rebuild again:\n\n```\nnpm run conf\nnpm run rebuild\n```\n\nAlso available through NPM.\n\n```\nnpm install electron-vibrancy\n```\n\nTo run tests see [scripts/ci](https://github.com/arkenthera/electron-vibrancy/blob/master/scripts/ci.sh)\n\n# Current Supported Platforms\n- macOS 10.10+\n- Windows 10 (stable) It just works ™\n- Windows 8.x (unstable + requires modifications)\n- Windows 7 (unstable + requires modifications)\n\n# Things to note\n- `BrowserWindow` must be transparent. (`transparent:true`)\n- Requires Yosemite on macOS.\n- On Windows 8.x, this wont work because Microsoft completely removed Aero Glass feature. It is still possible though but it is not something that an end user should do.\nSee Platforms section for more info.\n- On Windows 7, an Aero theme must be activated.\n- If you get `A dynamic link library (DLL) initialization routine failed.` error, it means that the module isn't compiled against Electron or compiled against the wrong version. \n\nAlthough it works, I dont recommend using this module on a machine below Windows 10. See platforms section below for more information for macOS.\n\n# API\nThere are several methods depending on what you want to do and what platform you are on.\n\n### `SetVibrancy(window, material)` _win_ , _macOS_\n\nReturns `Integer`.View id of `NSVisualEffectView`. You need this for `UpdateView` or `RemoveView`. `material` has no effect on Windows.\n\n* `window` `BrowserWindow` instance\n* `Material` - Integer. The Material for `NSVisualEffectMaterial`.\n  * `0` - `NSVisualEffectMaterialAppearanceBased` *10.10+*\n  * `1` - `NSVisualEffectMaterialLight` *10.10+*\n  * `2` - `NSVisualEffectMaterialDark` *10.10+*\n  * `3` - `NSVisualEffectMaterialTitlebar` *10.10+*\n  * `4` - `NSVisualEffectMaterialSelection` *10.11+*\n  * `5` - `NSVisualEffectMaterialMenu` *10.11+*\n  * `6` - `NSVisualEffectMaterialPopover` *10.11+*\n  * `7` - `NSVisualEffectMaterialSidebar` *10.11+*\n  * `8` - `NSVisualEffectMaterialMediumLight` *10.11+*\n  * `9` - `NSVisualEffectMaterialUltraDark` *10.11+*\n\nEnables or disables vibrancy for the **WHOLE** window. It will resize automatically. If you want something custom, see `AddView`.\nSee [here](https://developer.apple.com/reference/appkit/nsvisualeffectmaterial?language=objc) for more info about `NSVisualEffectMaterial`.\n\n\n### `DisableVibrancy(window)` _win_, _macOS_\n\nDisables Vibrancy completely.\n\n* `window` `BrowserWindow` instance\n\n\n### `AddView(window,options)` _macOS_\n\nReturns `Integer`.View id of `NSVisualEffectView`. You need this for `UpdateView` or `RemoveView`.\n\n* `window` `BrowserWindow` instance\n* `options` Object\n  * `Material` - Integer. The Material for `NSVisualEffectMaterial`.See `SetVibrancy` method for material properties.\n  * `X` X Position of the `NSVisualEffectView` relative to the main `BrowserWindow`.\n  * `Y` X Position of the `NSVisualEffectView` relative to the main `BrowserWindow`.\n  * `Width` - Integer Width of the `NSVisualEffectView`. Should not be larger than the window's.\n  * `Height` - Integer Height of the `NSVisualEffectView`. Should not be larger than the window's.\n  * `ResizeMask`- Integer.Resize mask for the `NSVisualEffectView`.\n    * `0` - Auto width resize\n    * `1` - Auto height resize\n    * `2` - Auto width-height resize\n    * `3` - No resize\n\nAdds a `NSVisualEffectView` to the window with the specified properties.If you dont specify a `ResizeMask`,default value for it is `2`.\n\n\n### `UpdateView(window,options)` _macOS_\n\nReturns `Boolean`.\n\n* `window` `BrowserWindow` instance\n* `options` Object\n  * `ViewId` - Integer. Return value from `AddView`.\n  * `Material` - Integer. The Material for `NSVisualEffectMaterial`.See `SetVibrancy` method for material properties.\n  * `X` X Position of the `NSVisualEffectView` relative to the main `BrowserWindow`.\n  * `Y` X Position of the `NSVisualEffectView` relative to the main `BrowserWindow`.\n  * `Width` - Integer Width of the `NSVisualEffectView`. Should not be larger than the window's.\n  * `Height` - Integer Height of the `NSVisualEffectView`. Should not be larger than the window's.\n\nUpdates the `NSVisualEffectView` with the specified properties.\n\n\n### `RemoveView(window,viewId)` _macOS_\n\nReturns `Boolean`.\n\n* `window` `BrowserWindow` instance\n* `ViewId`- Integer.Identifier of `NSVisualEffectView`.\n\nRemoves the `NSVisualEffectView`.\n\n\n\n## How to use\n\n```\n// Require the module\nvar electronVibrancy = require('..');\nelectronVibrancy.SetVibrancy(true,browserWindowInstance.getNativeWindowHandle());\n\n\n// Preferred Usage\n\n// mainWindow with show: false\nmainWindow.on('ready-to-show',function() {\n  var electronVibrancy = require('..');\n  \n  // Whole window vibrancy with Material 0 and auto resize\n  electronVibrancy.SetVibrancy(mainWindow, 0);\n\n  // auto resizing vibrant view at {0,0} with size {300,300} with Material 0\n  electronVibrancy.AddView(mainWindow, { Width: 300,Height:300,X:0,Y:0,ResizeMask:2,Material:0 })\n\n  // non-resizing vibrant view at {0,0} with size {300,300} with Material 0\n  electronVibrancy.AddView(mainWindow, { Width: 300,Height:300,X:0,Y:0,ResizeMask:3,Material:0 })\n\n  //Remove a view\n  var viewId = electronVibrancy.SetVibrancy(mainWindow, 0);\n  electronVibrancy.RemoveView(mainWindow,viewId);\n\n  // Add a view then update it\n  var viewId = electronVibrancy.SetVibrancy(mainWindow, 0);\n  electronVibrancy.UpdateView(mainWindow,{ ViewId: viewId,Width: 600, Height: 600 });\n\n  // Multipe views with different materials\n  var viewId1 = electronVibrancy.AddView(mainWindow, { Width: 300,Height:300,X:0,Y:0,ResizeMask:3,Material:0 })\n  var viewId2 = electronVibrancy.AddView(mainWindow, { Width: 300,Height:300,X:300,Y:0,ResizeMask:3,Material:2 })\n\n  console.log(viewId1);\n  console.log(viewId2);\n\n  // electronVibrancy.RemoveView(mainWindow,0);\n  // electronVibrancy.RemoveView(mainWindow,1);\n\n  // or\n\n  electronVibrancy.DisableVibrancy(mainWindow);\n})\n\n```\n\n\n## Screenshots\n\n![](https://cloud.githubusercontent.com/assets/174864/19833319/bc7214f8-9e0b-11e6-8331-be49ca3eeab9.png)\n\n![](https://cloud.githubusercontent.com/assets/174864/19833322/bc7f168a-9e0b-11e6-9c84-c2a746538edc.png)\n\n![](https://cloud.githubusercontent.com/assets/174864/19833327/bc8b2c2c-9e0b-11e6-9272-8d84ad3b7116.png)\n\n\n## Platform notices\n\n### Windows\nOn **Windows 10** the addon uses ```SetWindowCompositionAttribute```, which is an undocumented API, which means it can be changed by Microsoft any time and break the functionality.\n\n### MacOS\nRequires Yosemite and above.Some materials require 10.11+. Since this is the case, if you use a material that's not available on that macOS version, it will\nfallback to the default material value which is `0`, which might not be what you want.\n\n\n## License\n\nThis project is under MIT.\nSee [LICENSE](https://github.com/arkenthera/electron-vibrancy/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0x61726b%2Felectron-vibrancy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0x61726b%2Felectron-vibrancy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0x61726b%2Felectron-vibrancy/lists"}