{"id":13486817,"url":"https://github.com/Seo-Rii/electron-acrylic-window","last_synced_at":"2025-03-27T21:31:15.988Z","repository":{"id":37777301,"uuid":"252975045","full_name":"seo-rii/electron-acrylic-window","owner":"seo-rii","description":"Add acrylic effect to your electron application","archived":true,"fork":false,"pushed_at":"2024-02-09T14:47:40.000Z","size":16229,"stargazers_count":276,"open_issues_count":20,"forks_count":23,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-29T01:06:28.408Z","etag":null,"topics":["arcylic","electron","fluent-design","nodejs","vibrancy","windows"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/seo-rii.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,"roadmap":null,"authors":null}},"created_at":"2020-04-04T11:09:17.000Z","updated_at":"2024-10-09T05:25:34.000Z","dependencies_parsed_at":"2024-01-17T00:18:23.030Z","dependency_job_id":"6309f5e4-1694-4c73-ae8d-8a258bc9de09","html_url":"https://github.com/seo-rii/electron-acrylic-window","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seo-rii%2Felectron-acrylic-window","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seo-rii%2Felectron-acrylic-window/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seo-rii%2Felectron-acrylic-window/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seo-rii%2Felectron-acrylic-window/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seo-rii","download_url":"https://codeload.github.com/seo-rii/electron-acrylic-window/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221997290,"owners_count":16913723,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["arcylic","electron","fluent-design","nodejs","vibrancy","windows"],"created_at":"2024-07-31T18:00:51.580Z","updated_at":"2025-03-27T21:31:15.960Z","avatar_url":"https://github.com/seo-rii.png","language":"TypeScript","readme":"Thank you so much for your interest in this project. This project is archived because Electron supports acrylic backgrounds as native. If you want, please fork this project to create a new one. Thank you!\n\n---\n\n\u003cp align=\"center\"\u003e\u003cimg alt=\"logo\" src=\"./logo.png\" width=\"200\"\u003e\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eelectron-acrylic-window\u003c/h1\u003e\n\n[![Build Status](https://github.com/Seo-Rii/electron-acrylic-window/actions/workflows/.github/workflows/windows.yml/badge.svg)](https://github.com/Seo-Rii/electron-acrylic-window/actions/workflows/windows.yml)\n![Libraries.io dependency status for latest release](https://img.shields.io/librariesio/release/npm/electron-acrylic-window)\n[![npm version](https://badge.fury.io/js/electron-acrylic-window.svg)](https://badge.fury.io/js/electron-acrylic-window)\n\nMakes it simple to add the Windows 10 Acrylic effect to Electron applications, by acting as a wrapper for the standard Electron vibrancy feature.\n\nOnly affects Windows 10. If the OS is not Windows 10, it will fall back on the original vibrancy function.\n\nInspired by [electron-vibrancy](https://github.com/arkenthera/electron-vibrancy).\n\n\u003cimg alt=\"screenshot\" src=\"./screenshots/5.png\" width=\"50%\"\u003e\u003cimg alt=\"screenshot\" src=\"./screenshots/6.png\" width=\"50%\"\u003e\n\n## Contributors\n\nHuge thanks to all contributors!\n\u003ca href=\"https://github.com/Seo-Rii/electron-acrylic-window/graphs/contributors\"\u003e\n\u003cimg src=\"https://contributors-img.web.app/image?repo=Seo-Rii/electron-acrylic-window\" /\u003e\n\u003c/a\u003e\n\n## Installation\n\nYou 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).\n\n```shell script\nyarn add electron-acrylic-window\n```\n\n## Usage\n\n### `BrowserWindow` - Wrapper class for `electron.BrowserWindow`\n\nEnables Vibrancy on the Electron window.\n\n```js\nconst {BrowserWindow} = require(\"electron-acrylic-window\");\n\nwin = new BrowserWindow({\n    ...,\n    frame: false,\n    vibrancy: [options] // See below\n});\n```\n\nIf 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.\n\n### `setVibrancy` - Wrapper function for `electron.BrowserWindow.setVibrancy`\n\nEnables Vibrancy on the Electron window.\n\n```js\nconst { setVibrancy } = require('electron-acrylic-window')\n\nsetVibrancy(win, [options])\n\n// OR\n\nwin.setVibrancy([options])\n```\n\n`win` should be frameless.\n\nWill call original `win.setVibrancy(op)` Electron function if OS is not Windows 10.\n\nThere is no return value. If it fails to set vibrancy, it throws an error.\n\n#### Errors\n\n-   `WINDOW_NOT_GIVEN` - Error that occurs when `win` parameter is not passed.\n-   `NOT_VALID_WINDOW` - Error that occurs when `win` parameter is not valid Electron window.\n-   `FAIL_LOAD_DLL` - Error that occurs when fails to load SetWindowCompositionAttribute from user32.dll\n-   `UNKNOWN` - Other error.\n\n### Options\n\nIf OS is not Windows 10, `[options]` will be passed on to the original vibrancy function/option, so keep that in mind.\n\nOn Windows 10, `[options]` should be a String or an Object.\n\n-   **String**\n\n    Should be `'light'`, `'dark'`, `'appearance-based'` or a hex color code with alpha (`'#222222aa'`).\n    Default is `'appearance-based'`.\n\n-   **Object**\n\n    ```javascript\n    op = {\n       theme: String ( = 'appearance-based'),\n       effect: String ( = 'acrylic'),\n       useCustomWindowRefreshMethod: Boolean ( = true),\n       maximumRefreshRate: Number ( = 60),\n       disableOnBlur: Boolean ( = true)\n    }\n    ```\n\n    -   `theme` - String (optional)\n\n        Sets color of acrylic effect. Can be `'light'`, `'dark'`, `'appearance-based'` or a hex color code with alpha (`'#222222aa'`). Default is `'appearance-based'`\n\n    -   `effect` - String (optional)\n\n        Sets the type of Windows transparency effect, either `'acrylic'` or `'blur'`. Default is `'acrylic'`.\n\n        \u003e **Setting this option to acrylic may cause performance degradation. Acrylic only works on Windows 10 RS3 or above, otherwise `'blur'` is forced.**\n\n    -   `useCustomWindowRefreshMethod` - Boolean (optional)\n\n        Use custom window resize/move handler for performance. Default is `true`.\n\n        Special thanks to [@djsweet](https://github.com/djsweet) and [@xanderfrangos](https://github.com/xanderfrangos).\n\n        \u003e **This is an experimental feature. May cause errors.**\n\n    -   `maximumRefreshRate` - Number (optional)\n\n        Maximum refresh rate of the application, in hertz. Default is `60`.\n\n    -   `disableOnBlur` - Boolean (optional)\n\n        If true, acrylic effect will be disabled when the window loses focus, to mimic the behaviour of normal UWP apps. Default is `true`.\n\n    -   `debug` - Boolean (optional)\n\n        If true, log will be printed to console.\n\n## Demo\n\nTo run the demo Electron application, clone this repository, install the dependencies and run the test script:\n\n```bash\ngit clone https://github.com/Seo-Rii/electron-acrylic-window.git\ncd electron-acrylic-window\nyarn install\nyarn run test\n```\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSeo-Rii%2Felectron-acrylic-window","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSeo-Rii%2Felectron-acrylic-window","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSeo-Rii%2Felectron-acrylic-window/lists"}