{"id":14976995,"url":"https://github.com/gregvido/mica-electron","last_synced_at":"2025-04-06T13:11:21.256Z","repository":{"id":58957953,"uuid":"531104076","full_name":"GregVido/mica-electron","owner":"GregVido","description":"Library to add mica effect of windows 11 in electron app","archived":false,"fork":false,"pushed_at":"2024-08-28T12:24:17.000Z","size":18223,"stargazers_count":140,"open_issues_count":15,"forks_count":10,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T12:09:11.690Z","etag":null,"topics":["acrylic","electron","fluent","mica","windows-11"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/GregVido.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-31T13:46:30.000Z","updated_at":"2025-03-29T06:45:04.000Z","dependencies_parsed_at":"2024-05-11T06:34:39.296Z","dependency_job_id":"244acc01-6ee1-4003-bad3-a6e26e3f2510","html_url":"https://github.com/GregVido/mica-electron","commit_stats":{"total_commits":37,"total_committers":2,"mean_commits":18.5,"dds":"0.027027027027026973","last_synced_commit":"646026481c65df6c86f21e962c2e737e1ebab301"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GregVido%2Fmica-electron","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GregVido%2Fmica-electron/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GregVido%2Fmica-electron/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GregVido%2Fmica-electron/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GregVido","download_url":"https://codeload.github.com/GregVido/mica-electron/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247485287,"owners_count":20946398,"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","fluent","mica","windows-11"],"created_at":"2024-09-24T13:54:48.888Z","updated_at":"2025-04-06T13:11:21.236Z","avatar_url":"https://github.com/GregVido.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=center\u003eMica Electron\u003c/h1\u003e\n\u003cdiv align=center\u003e\n\u003cimg src=\"https://micadiscord.com/img/preview/title.png\" name=\"exemple\"\u003e\n\n\u003cb\u003eMica Electron\u003c/b\u003e is a tool to add mica effect on electron app.\u003cbr\u003e\nThis is created by \u003ca href=\"https://www.youtube.com/gregvido\"\u003eGregVido\u003c/a\u003e.\u003cbr\u003e\n\u003cb\u003eMica electron is now compatible with windows 10\u003c/b\u003e\n\u003c/div\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eExemple of effects\u003c/summary\u003e\n  \u003cdiv align=center\u003e\n\t\u003cimg src=\"https://micadiscord.com/img/preview/demo-1.png\" name=\"demo 0\" width=\"30%\"\u003e\n\t\u003cimg src=\"https://micadiscord.com/img/preview/demo-2.png\" name=\"demo 1\" width=\"30%\"\u003e\n\t\u003cimg src=\"https://micadiscord.com/img/preview/demo-3.png\" name=\"demo 2\" width=\"30%\"\u003e \n\n  \n  \u003ca href='https://micadiscord.com/img/mica-electron-preview.gif'\u003eClick here to see the animation preview.\u003c/a\u003e\n  \u003c/div\u003e \n\u003c/details\u003e\u003cbr\u003e \n\n## Quickstart\n```bash\n$ npm install mica-electron\n```\n```js\nconst electron = require('electron');\nconst { PARAMS, VALUE,  MicaBrowserWindow, IS_WINDOWS_11, WIN10 } = require('mica-electron');\nconst path = require('path');\n\nelectron.app.on('ready', () =\u003e {\n    const win = new MicaBrowserWindow({\n        width: 800,\n        height: 600,\n        autoHideMenuBar: true,\n        show: false,\n        // frame: false // -\u003e now work, you can remove the frame properly !!\n    });\n\n    win.setDarkTheme();\n    win.setMicaEffect();\n\n    // win.alwaysFocused(true); // -\u003e allows you to keep the mica effects even if the window is no focus (decrease performance)\n\n    win.loadFile(path.join(__dirname, 'files', 'index.html'));\n\n    win.webContents.once('dom-ready', () =\u003e {\n        win.show();\n    });\n});\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003eApply effect for windows 11\u003c/summary\u003e\n    You can apply different mica effect :\n\n```js\nwin.setMicaEffect();        // Mica Effect\nwin.setMicaTabbedEffect();  // Mica Tabbed\nwin.setMicaAcrylicEffect(); // Acrylic for windows 11\n```\n\u003cdiv align=center\u003e\n\u003cimg src=\"https://micadiscord.com/img/preview/demo-1.png\" name=\"corner 0\" width=\"20%\"\u003e\n\u003cimg src=\"https://micadiscord.com/img/preview/demo-2.png\" name=\"corner 1\" width=\"20%\"\u003e\n\u003cimg src=\"https://micadiscord.com/img/preview/demo-3.png\" name=\"corner 2\" width=\"20%\"\u003e \n\u003c/div\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eChange theme for windows 11\u003c/summary\u003e\n  You can change theme :\n\n```js\nwin.setAutoTheme();   // Same theme as computer\nwin.setLightTheme();  // Force light theme\nwin.setDarkTheme();   // Force dark theme\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eApply effect for windows 10\u003c/summary\u003e\n  You can apply different blur effect :\n\n```js\nwin.setTransparent(); // Transparent window\nwin.setBlur();        // Blurred window\nwin.setAcrylic();     // Acrylic window\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eChange radius\u003c/summary\u003e\n    You can change corner radius :\n\n```js\nwin.setRoundedCorner();\t      // Rounded\nwin.setSmallRoundedCorner();  // Small rounded\nwin.setSquareCorner();\t      // Square\n```\n\u003cdiv align=center\u003e\n\u003cimg src=\"https://micadiscord.com/img/preview/corner-1.png\" name=\"corner 0\" width=\"10%\"\u003e\n\u003cimg src=\"https://micadiscord.com/img/preview/corner-2.png\" name=\"corner 1\" width=\"10%\"\u003e\n\u003cimg src=\"https://micadiscord.com/img/preview/corner-3.png\" name=\"corner 2\" width=\"10%\"\u003e \n\u003c/div\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eChange window colors\u003c/summary\u003e\n    You can change window colors :\n\n```js\nwin.setBorderColor('#f40b0b');  // Border color\nwin.setBorderColor(null); // -\u003e disable effect\n\nwin.setCaptionColor('#262626'); // Background titlebar color\nwin.setCaptionColor(null); // -\u003e disable effect\n\nwin.setTitleTextColor('#fff');  // Title text color\nwin.setTitleTextColor(null); // -\u003e disable effect\n```\n\u003cdiv align=center\u003e\n\u003cimg src=\"https://micadiscord.com/img/preview/border.png\" name=\"border\" width=\"50%\"\u003e\n\u003c/div\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eChange custom transparent effect for windows 10 \u003cb\u003eNEW!\u003c/b\u003e\u003c/summary\u003e\n    You can change window colors :\n\n```js\nwin.setCustomEffect(WIN10.TRANSPARENT, '#34ebc0', 0.5); // Transparent\nwin.setCustomEffect(WIN10.ACRYLIC, '#34ebc0', 0.4); // Acrylic\n```\n\u003cdiv align=center\u003e\n\u003cimg src=\"https://micadiscord.com/img/mica-electron-custom-exemple.png\" name=\"border\" width=\"40%\"\u003e\n\u003cimg src=\"https://micadiscord.com/img/mica-electron-custom-blur-exemple.png\" name=\"border\" width=\"40%\"\u003e\n\u003c/div\u003e\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n\n## Source Install / Manual Compilation\nTo compile from source it's easiest to use\n[`node-gyp`](https://github.com/TooTallNate/node-gyp):\n\n``` bash\n$ npm install -g node-gyp\n```\n\nNow you can compile `mica-electron`:\n\n``` bash\n$ cd .\\node_modules\\mica-electron\\\n$ ./build.bat\n```\n## Objects details\n\u003cdetails\u003e\n  \u003csummary\u003ePARAMS Object\u003c/summary\u003e\n  The params is a number, you can has an object to help you:\n\n```js\n    const PARAMS = {\n        BACKGROUND: {\n            AUTO: 0,\n            NONE: 1,\n            ACRYLIC: 3,         // Acrylic\n            MICA: 2,            // Mica\n            TABBED_MICA: 4      // Mica tabbed\n        },\n        CORNER: 5,\n        BORDER_COLOR: 6,\n        CAPTION_COLOR: 7,\n        TEXT_COLOR: 8,\n        FRAME: 9\n    }\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eVALUE Object\u003c/summary\u003e\nThe value is a number, you can has an object to help you:\n\n```js\nconst VALUE = {\n    THEME: {\n        AUTO: 5,\t// select theme by the windows theme\n        DARK: 1,\t// select the dark theme\n        LIGHT: 2,\t// select the white theme\n    },\n    CORNER: {\n        DEFAULT: 0,\n        DONOTROUND: 1,\n        ROUND: 2,\n        ROUNDSMALL: 3\n    },\n    COLOR: {\n        RED: 0x000000FF,\n        GREEN: 0x0000FF00,\n        BLUE: 0x00FF0000,\n        BLACK: 0x00000000,\n        WHITE: 0x00FFFFFF,\n        FROM_RGB: (r, g, b) =\u003e {\n            return r + (g \u003c\u003c 8) + (b \u003c\u003c 16);\n        }\n    },\n    FALSE: 0,\n    TRUE: 1\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eIS_WINDOWS_11\u003c/summary\u003e\nIS_WINDOWS_11 is a boolean constant to detect the OS version. If it is true then it's a windows 11 computer, otherwise it is another version (10, 8, 7 ...)\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eWIN10 Object\u003c/summary\u003e\nThe value is a number, you can has an object to help you:\n\n```js\nconst WIN10 = {\n    TRANSPARENT: 2,\n    BLURBEHIND: 3, // didn't work on windows 11\n    ACRYLIC: 4\n}\n```\n\u003c/details\u003e\u003cbr\u003e\n\n## FAQ\n\u003cdetails\u003e\n  \u003csummary\u003eError: '...\\micaElectron.node' was compiled against a different Node.js version using ...\u003c/summary\u003e\n  If you are an error of nodejs version, use electron-packager to rebuild the project with the good version.\n\n  ```bash\n  $ npm install electron\n  $ npm install electron-rebuild\n  $ .\\node_modules\\.bin\\electron-rebuild\n  ```\n\u003c/details\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eBuild for 32 bits ?\u003c/summary\u003e\n\n  If you want use `mica-electron` with 32 bits electron app, rebuild C++ script\n\n``` bash\n$ cd .\\node_modules\\mica-electron\\\n$ node-gyp rebuild --arch=ia32\n$ cd ..\\..\\\n$ .\\node_modules\\.bin\\electron-rebuild --arch=ia32\n```\n\u003c/details\u003e\n\u003cbr\u003e\n\n## Awesome applications using Mica-Electron\n\n- [MicaDiscord](https://www.micadiscord.com/) by GregVido and Arbitro\n- [Cider](https://github.com/ciderapp/Cider) by [Cider Collective](https://github.com/ciderapp)\n- [Fluent Browser](https://github.com/ThePiGuy3141/fluent-browser) by \u003ca href=\"https://github.com/ThePiGuy3141\"\u003eThePiGuy3141\u003c/a\u003e\n- [Mica-Snap](https://github.com/GregVido/Mica-Snap) by GregVido\n- [SysMocap](https://github.com/xianfei/SysMocap) by [xianfei](https://github.com/xianfei)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregvido%2Fmica-electron","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgregvido%2Fmica-electron","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregvido%2Fmica-electron/lists"}