Mica Electron is a tool to add mica effect on electron app. This is created by GregVido. Mica electron is now compatible with windows 10

Click here to see the animation preview.

Quickstart

$ npm install mica-electron

const electron = require('electron');
const { PARAMS, VALUE,  MicaBrowserWindow, IS_WINDOWS_11, WIN10 } = require('mica-electron');
const path = require('path');

electron.app.on('ready', () => {
    const win = new MicaBrowserWindow({
        width: 800,
        height: 600,
        autoHideMenuBar: true,
        show: false,
        // frame: false // -> now work, you can remove the frame properly !!
    });

    win.setDarkTheme();
    win.setMicaEffect();

    // win.alwaysFocused(true); // -> allows you to keep the mica effects even if the window is no focus (decrease performance)

    win.loadFile(path.join(__dirname, 'files', 'index.html'));

    win.webContents.once('dom-ready', () => {
        win.show();
    });
});

win.setMicaEffect();        // Mica Effect
win.setMicaTabbedEffect();  // Mica Tabbed
win.setMicaAcrylicEffect(); // Acrylic for windows 11

win.setAutoTheme();   // Same theme as computer
win.setLightTheme();  // Force light theme
win.setDarkTheme();   // Force dark theme

win.setTransparent(); // Transparent window
win.setBlur();        // Blurred window
win.setAcrylic();     // Acrylic window

win.setRoundedCorner();	      // Rounded
win.setSmallRoundedCorner();  // Small rounded
win.setSquareCorner();	      // Square

win.setBorderColor('#f40b0b');  // Border color
win.setBorderColor(null); // -> disable effect

win.setCaptionColor('#262626'); // Background titlebar color
win.setCaptionColor(null); // -> disable effect

win.setTitleTextColor('#fff');  // Title text color
win.setTitleTextColor(null); // -> disable effect

win.setCustomEffect(WIN10.TRANSPARENT, '#34ebc0', 0.5); // Transparent
win.setCustomEffect(WIN10.ACRYLIC, '#34ebc0', 0.4); // Acrylic

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:

$ cd .\node_modules\mica-electron\
$ ./build.bat

Objects details

    const PARAMS = {
        BACKGROUND: {
            AUTO: 0,
            NONE: 1,
            ACRYLIC: 3,         // Acrylic
            MICA: 2,            // Mica
            TABBED_MICA: 4      // Mica tabbed
        },
        CORNER: 5,
        BORDER_COLOR: 6,
        CAPTION_COLOR: 7,
        TEXT_COLOR: 8,
        FRAME: 9
    }

const VALUE = {
    THEME: {
        AUTO: 5,	// select theme by the windows theme
        DARK: 1,	// select the dark theme
        LIGHT: 2,	// select the white theme
    },
    CORNER: {
        DEFAULT: 0,
        DONOTROUND: 1,
        ROUND: 2,
        ROUNDSMALL: 3
    },
    COLOR: {
        RED: 0x000000FF,
        GREEN: 0x0000FF00,
        BLUE: 0x00FF0000,
        BLACK: 0x00000000,
        WHITE: 0x00FFFFFF,
        FROM_RGB: (r, g, b) => {
            return r + (g << 8) + (b << 16);
        }
    },
    FALSE: 0,
    TRUE: 1
}

const WIN10 = {
    TRANSPARENT: 2,
    BLURBEHIND: 3, // didn't work on windows 11
    ACRYLIC: 4
}

FAQ

$ npm install electron
$ npm install electron-rebuild
$ .\node_modules\.bin\electron-rebuild

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

$ cd .\node_modules\mica-electron\
$ node-gyp rebuild --arch=ia32
$ cd ..\..\
$ .\node_modules\.bin\electron-rebuild --arch=ia32

Awesome applications using Mica-Electron

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