{"id":15194372,"url":"https://github.com/pykeio/vibe","last_synced_at":"2025-10-02T10:30:57.696Z","repository":{"id":60514577,"uuid":"543175873","full_name":"pykeio/vibe","owner":"pykeio","description":"native windows 11/10 acrylic effects for electron 💫","archived":true,"fork":false,"pushed_at":"2023-05-15T20:53:20.000Z","size":539,"stargazers_count":60,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-20T00:00:19.454Z","etag":null,"topics":["acrylic","electron","electronjs","fluent-design","mica","vibrancy","windows-11","windows11"],"latest_commit_sha":null,"homepage":"","language":"Rust","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pykeio.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":"2022-09-29T14:47:53.000Z","updated_at":"2025-01-02T16:57:22.000Z","dependencies_parsed_at":"2024-01-29T00:02:35.488Z","dependency_job_id":"c4c463ab-8e55-4790-a1f1-c645af0e5b89","html_url":"https://github.com/pykeio/vibe","commit_stats":{"total_commits":33,"total_committers":4,"mean_commits":8.25,"dds":0.2727272727272727,"last_synced_commit":"3c61074414cbed96ad51870e4dde379b16d9da6d"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pykeio%2Fvibe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pykeio%2Fvibe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pykeio%2Fvibe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pykeio%2Fvibe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pykeio","download_url":"https://codeload.github.com/pykeio/vibe/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234974707,"owners_count":18916128,"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":["acrylic","electron","electronjs","fluent-design","mica","vibrancy","windows-11","windows11"],"created_at":"2024-09-27T22:43:58.200Z","updated_at":"2025-10-02T10:30:52.423Z","avatar_url":"https://github.com/pykeio.png","language":"Rust","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=center\u003e\n    \u003ch2\u003e💫 \u003ccode\u003e@pyke/vibe\u003c/code\u003e 💫\u003c/h2\u003e\n    \u003ch3\u003enative windows acrylic effects for electron\u003c/h3\u003e\n    \u003chr /\u003e\n    \u003cimg src=\"https://parcel.pyke.io/v2/cdn/spaces/vibe/vibe-demo.gif\" width=650\u003e\n    \u003cbr /\u003e\u003cbr /\u003e\n\u003c/div\u003e\n\n`vibe` is a library for acrylic/vibrancy effects for Electron on Windows 10/11. Any Electron version compatible with N-API v6 (Electron v11+) is supported.\n\n---\n## Maintenance note\nNative support for Windows background materials recently landed in Electron: https://github.com/electron/electron/pull/38163\n\n`vibe` will continue to be maintained until Electron v25+ becomes mainstream.\n\n---\n\n## Requirements\nA recent version of [Rust](https://rust-lang.org/) (\u003e=1.56.1) is required. You can install it via [rustup](https://rustup.rs/).\n\nIf you don't plan on doing Rust development, you may choose to install the minimal profile in `rustup` to install a lighter Rust toolchain.\n\nFor end users, the Acrylic effect is supported in Windows 10 builds later than build 17763, and the Mica effect is supported in Windows 11 only. `vibe` uses an undocumented API for enabling Mica on early builds of Windows 11 (specifically pre-22H2, build \u003c22523) that is *not heavily tested* and *may not work at all*.\n\n## Usage\n\u003e **Note**:\n\u003e If you'd like to use `vibe` with Discord on Windows, you'll need to install an additional Rust target: `rustup target add i686-pc-windows-msvc`, then build `vibe` with `npm run build:windows-i686`. You can then use the resulting `index.node` file like you'd use `@pyke/vibe`.\n\nThere are 3 important points you must keep in mind when using `vibe`:\n- **`vibe` must do some trickery on the Electron `app` object before Electron loads in order for effects to work**, so don't forget to run `vibe.setup(app)` **before** `app.whenReady()`.\n- **Keep the default frame**. Windows gets fussy about frames when you attempt to use acrylic effects. `titleBarStyle` must always be set to `default` and `frame` must always be set to `true`. While there [is a way to have titlebar-less framed Mica windows](https://github.com/pykeio/millennium/commit/0964cb3), it does not work with Electron, and would unfortunately require changes in Electron's internals.\n- **Both `html` and `body` need to be transparent in CSS**. It's a common mistake to only make either `html` or `body` have `background: transparent`, but *both* of them need to be transparent. Additionally, you must set the Electron window's `backgroundColor` to `#00000000` to trick Electron into making a framed transparent window. **Do not set `transparent` to `true`**, as this will disable the frame and effects will break.\n\n```js\nconst { app, BrowserWindow, nativeTheme } = require('electron');\nconst vibe = require('@pyke/vibe');\n\n// Very important - let vibe perform its magic before the app is ready\nvibe.setup(app);\n\napp.whenReady().then(() =\u003e {\n    const mainWindow = new BrowserWindow({\n        ...,\n\n        // This part is very important!\n        backgroundColor: '#00000000',\n\n        // Recommendation: Wait to show the window to avoid an ugly flash of non-acrylic-ized content.\n        show: false,\n        // Recommendation: Hide the menu bar, as the colour of the bar will be solid and will look janky.\n        autoHideMenuBar: true\n    });\n\n    // Apply effects! 💫\n    // This should be run before the window is ready to be shown.\n    vibe.applyEffect(mainWindow, 'acrylic');\n\n    // To disable effects, run `clearEffects`.\n    // The background colour of the window will be black, so you should reset the window's background colour here and/or send a message to the renderer to update the CSS.\n    vibe.clearEffects(mainWindow);\n    mainWindow.setBackgroundColor('#ffffff');\n});\n```\n\nThe `acrylic` effect for Windows 10 and below can also have a 'tint' applied to it:\n```js\nvibe.applyEffect(mainWindow, 'acrylic', '#AA80FF40');\n```\n\n**NOTE**: The Windows 11 22H2 'Fluent' Acrylic \u0026 Mica effects cannot be tinted and will simply follow the window/system theme (see below). You can use `vibe.platform.isWin11_22H2()` to detect if the system is Windows 11 22H2 or greater and style your app appropriately.\n```js\nconst supportsFluentAcrylic = vibe.platform.isWin11_22H2(); // Win 11 before 22H2 does not support Fluent Acrylic\nconst supportsMica = vibe.platform.isWin11();\nconst supportsTintableAcrylic = !vibe.platform.isWin11();\n```\n\nAdditionally, you can use Electron's `nativeTheme` module to force the theme of the acrylic effects:\n```js\nconst { nativeTheme } = require('electron');\nnativeTheme.themeSource = 'dark';\n```\n\nor, for older versions of Electron:\n```js\nvibe.forceTheme(mainWindow, 'dark');\nvibe.forceTheme(mainWindow, 'light');\n```\n\n**Need help?** Visit the [`#📕｜vibe`](https://discord.com/channels/1029216970027049072/1030139823136190495) channel in the pyke Discord server:\n\n\u003ca href=\"https://discord.gg/BAkXJ6VjCz\"\u003e\u003cimg src=\"https://invidget.switchblade.xyz/BAkXJ6VjCz\"\u003e\u003c/a\u003e\n\n## Known issues\n- Enabling the \"Show accent color on title bars and windows borders\" setting in Personalization \u003e Colors on Windows styles the titlebar as a solid colour when using the Mica \u0026 Acrylic effects.\n    - **Workaround**: No workaround, but disabling the setting fixes it.\n- `blurbehind` does not work on Windows 11 and later Windows 10 builds.\n    - **Workaround**: Use `acrylic` or `unified-acrylic` on these platforms instead.\n- `unified-acrylic` lags when moving the window on Windows 11 and later Windows 10 builds.\n    - **Workaround**: None, this is a long standing issue with Windows that will likely never be fixed. Use the fluent `acrylic` effect instead;\n\n## Thanks to:\n- [**Tauri**](https://github.com/tauri-apps)'s [`window-vibrancy`](https://github.com/tauri-apps/window-vibrancy) package, which vibe borrows some code from.\n- [**@alexmercerind**](https://github.com/alexmercerind) for discovering the `DwmExtendFrameIntoClientArea` hack\n- [**@sylveon**](https://github.com/sylveon) for finding a workaround to `transparent: true`\n- [**@GregVido**](https://github.com/GregVido) for discovering the `enable-transparent-visuals` hack\n- [**Twitter**](https://twemoji.twitter.com/) for providing the `vibe` 'icon' used in the demo 💫\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpykeio%2Fvibe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpykeio%2Fvibe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpykeio%2Fvibe/lists"}