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

Click here to see the animation preview.

Quickstart

npm install talex-mica-electron

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

// Run with default path
useMicaElectron()

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.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.setCaptionColor('#262626'); // Background titlebar color
win.setTitleTextColor('#fff');  // Title text color

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\talex-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