{"id":14978548,"url":"https://github.com/davidcann/electron-tinted-with-sidebar","last_synced_at":"2025-10-12T01:22:47.478Z","repository":{"id":197636037,"uuid":"699055090","full_name":"davidcann/electron-tinted-with-sidebar","owner":"davidcann","description":"Create a native wallpaper-tinted window with a sidebar in Electron on macOS","archived":false,"fork":false,"pushed_at":"2025-03-26T11:54:03.000Z","size":7724,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-23T08:39:49.453Z","etag":null,"topics":["electron","electronjs","macos","nswindow","wallpaper"],"latest_commit_sha":null,"homepage":"","language":"Objective-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/davidcann.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":"2023-10-01T19:30:03.000Z","updated_at":"2025-07-01T12:19:29.000Z","dependencies_parsed_at":"2023-10-01T22:11:48.079Z","dependency_job_id":null,"html_url":"https://github.com/davidcann/electron-tinted-with-sidebar","commit_stats":null,"previous_names":["davidcann/electron-tinted-with-sidebar"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/davidcann/electron-tinted-with-sidebar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidcann%2Felectron-tinted-with-sidebar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidcann%2Felectron-tinted-with-sidebar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidcann%2Felectron-tinted-with-sidebar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidcann%2Felectron-tinted-with-sidebar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidcann","download_url":"https://codeload.github.com/davidcann/electron-tinted-with-sidebar/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidcann%2Felectron-tinted-with-sidebar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279009749,"owners_count":26084645,"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","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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","electronjs","macos","nswindow","wallpaper"],"created_at":"2024-09-24T13:57:53.228Z","updated_at":"2025-10-12T01:22:47.444Z","avatar_url":"https://github.com/davidcann.png","language":"Objective-C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"# electron-tinted-with-sidebar\n\n\u003e Create a native wallpaper-tinted window with a sidebar in [Electron](https://electronjs.org/) on macOS\n\nElectron BrowserWindow supports only one [`vibrancy` mode](https://www.electronjs.org/docs/latest/api/browser-window#winsetvibrancytype-macos) at a time, but standard macOS apps commonly have both a sidebar and main content area (often titlebar and inspector) that should be tinted based on the wallpaper on the user's desktop (macOS System Settings \u003e Appearance \u003e Allow wallpaper tinting in windows). The `setWindowLayout` function adds [NSVisualEffectView](https://developer.apple.com/documentation/appkit/nsvisualeffectview?language=objc)s with the correct materials.\n\nThe `setWindowAnimationBehavior` function enables you to configure a window to have the \"zoom up\" entrance animation.\n\n[See demo code](demo) for additional styling in HTML, such as the separator lines and subtle sidebar inner shadow. Dark mode is supported through macOS System Settings or [nativeTheme.themeSource](https://www.electronjs.org/docs/latest/api/native-theme#nativethemethemesource).\n\nhttps://github.com/davidcann/electron-tinted-with-sidebar/assets/23272/7cf04b0a-ed52-4931-ab1a-18184aa4c7e3\n\n## Installing\n\n    npm install electron-tinted-with-sidebar\n\n## API\n\n**setWindowLayout(nativeWindowHandle, sidebarWidth, titlebarHeight[, titlebarMarginRight])** (macOS only)\n\n- `nativeWindowHandle` Buffer (NSView\\*) from [BrowserWindow's win.getNativeWindowHandle()](https://www.electronjs.org/docs/latest/api/browser-window#wingetnativewindowhandle)\n- `sidebarWidth` integer\n- `titlebarHeight` integer\n- `titlebarMarginRight` integer (optional) - This is useful to expose the background for a full-height inspector. Defaults to `0`.\n\n**setWindowAnimationBehavior(nativeWindowHandle, isDocument)** (macOS only)\n\n- `nativeWindowHandle` Buffer (NSView\\*) from [BrowserWindow's win.getNativeWindowHandle()](https://www.electronjs.org/docs/latest/api/browser-window#wingetnativewindowhandle)\n- `isDocument` bool – `true` sets the NSWindow `animationBehavior` to `NSWindowAnimationBehaviorDocumentWindow`, which animates the window (zoom up) on entrance.\n\nNote that you must call this function before the window is shown or it will have no effect.\n\n## Usage\n\nIn main process:\n\n    const { BrowserWindow } = require(\"electron\");\n    const tint = require(\"electron-tinted-with-sidebar\");\n\n    function createWindow() {\n    \tconst mainWindow = new BrowserWindow({\n    \t\theight: 500,\n    \t\twidth: 800,\n    \t\tbackgroundColor: \"#00000000\",\n    \t\ttitleBarStyle: \"hidden\",\n    \t\tvibrancy: \"sidebar\",\n    \t});\n    \ttint.setWindowAnimationBehavior(mainWindow.getNativeWindowHandle(), true);\n    \ttint.setWindowLayout(mainWindow.getNativeWindowHandle(), 200, 52);\n    \tmainWindow.webContents.loadFile(\"index.html\");\n    }\n\n    app.whenReady().then(() =\u003e createWindow());\n\n## How to Run Demo\n\nAfter cloning this repository, run:\n\n    npm install\n    npm install --prefix demo/\n    npm rebuild \u0026\u0026 npm start --prefix demo/\n\n## License\n\nMIT License\n\n## Acknowledgements\n\n- [electron-window-rotator](https://github.com/antonfisher/electron-window-rotator) – a great example project\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidcann%2Felectron-tinted-with-sidebar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidcann%2Felectron-tinted-with-sidebar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidcann%2Felectron-tinted-with-sidebar/lists"}