mica-electron-ts

Mica Electron

Mica Electron is a library to add Windows 11 Mica Effect in your Electron app.
This library is created by GregVido and forked by DeMineArchiver.
Mica Electron is now compatible with Windows 10!

Examples of window effects

Quickstart

$ npm install mica-electron-ts

import { MicaBrowserWindow, Theme, Mica } from "mica-electron-ts";
import path from "path";

app.on("ready", () => {
  const window = new MicaBrowserWindow({
    width: 800,
    height: 600,
    autoHideMenuBar: true
  });

  // Set window to use dark theme
  window.setTheme(Theme.Dark);
  // Set window effect to Mica
  window.setMicaEffect(Mica.Normal);

  window.loadFile(path.join(__dirname, "index.html"));
});

Apply Mica window effect for windows 11

import { MicaBrowserWindow, Mica } from "mica-electon-ts";
// ...
window.setMicaEffect(Mica.Normal); // Change Mica effect to traditional
window.setMicaEffect(Mica.Acrylic); // Change Mica effect to acrylic
window.setMicaEffect(Mica.Tabbed); // Change Mica effect to tabbed

Change theme for Windows 11

import { MicaBrowserWindow, Theme } from "mica-electon-ts";
// ...
window.setTheme(Theme.Auto); // Automatically determine theme
window.setTheme(Theme.Dark); // Change theme to dark
window.setTheme(Theme.Light); // change theme to light

Apply a window effect for Windows 10

import { MicaBrowserWindow } from "mica-electon-ts";
// ...
window.setTransparent(); // Transparent window
window.setBlur(); // Blurred window
window.setAcrylic(); // Acrylic window

Change corner radius for Windows 11

import { MicaBrowserWindow, CornerRadius } from "mica-electon-ts";
// ...
window.setCornerRadius(CornerRadius.Default); // Default corner radius
window.setCornerRadius(CornerRadius.Sharp); // Sharp corners
window.setCornerRadius(CornerRadius.SmallRound); // Slightly rounded corners
window.setCornerRadius(CornerRadius.Round); // Fully rounded corners

Change window colors (WIP!)

win.setBorderColor('#f40b0b');  // Border color
win.setCaptionColor('#262626'); // Titlebar background color
win.setTitleTextColor('#fff');  // Title text color

Source Install / Manual Compilation

To compile from source it's easiest to use node-gyp:

$ npm install -g node-gyp

Now you can compile mica-electron-ts:

$ cd .\node_modules\mica-electron-ts\
$ node-gyp rebuild

Objects details

isWindows11: boolean constant showing if the OS is Windows 11.

FAQ

Error: '...\micaElectron.node' was compiled against a different Node.js version using ...

$ npm install -D electron
$ npm install -D @electron/rebuild
$ npx electron-rebuild -f -w mica-electon-ts

Build for 32 bits

If you want use mica-electron-ts with 32 bits electron app, rebuild C++ script

$ cd .\node_modules\mica-electron-ts\
$ node-gyp rebuild --arch=ia32
$ cd ..\..\
$ electron-rebuild -f -w --arch=ia32 mica-electron-ts

Awesome applications using Mica Electron

• MicaDiscord by GregVido and Arbitro
• Cider
• Fluent Browser by ThePiGuy3141
• Mica-Snap by GregVido