Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

talex-mica-electron

TalexDreamSoul15Apache-2.01.0.2TypeScript support: included

Tool to add mica effect of windows 11 in electron app (Reloaded)

electron, mica, windows 11, acrylic, transparent, glasstron

readme

Mica Electron (Reloaded)

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

<summary>Exemple of effects</summary>


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();
    });
});
<summary>Apply effect for windows 11</summary> You can apply different mica effect : 
win.setMicaEffect();        // Mica Effect
win.setMicaTabbedEffect();  // Mica Tabbed
win.setMicaAcrylicEffect(); // Acrylic for windows 11
<summary>Change theme for windows 11</summary> You can change theme : 
win.setAutoTheme();   // Same theme as computer
win.setLightTheme();  // Force light theme
win.setDarkTheme();   // Force dark theme
<summary>Apply effect for windows 10</summary> You can apply different blur effect : 
win.setTransparent(); // Transparent window
win.setBlur();        // Blurred window
win.setAcrylic();     // Acrylic window
<summary>Change radius</summary> You can change corner radius : 
win.setRoundedCorner();          // Rounded
win.setSmallRoundedCorner();  // Small rounded
win.setSquareCorner();          // Square
<summary>Change window colors</summary> You can change window colors : 
win.setBorderColor('#f40b0b');  // Border color
win.setCaptionColor('#262626'); // Background titlebar color
win.setTitleTextColor('#fff');  // Title text color
<summary>Change custom transparent effect for windows 10 NEW!</summary> You can change window colors : 
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

<summary>PARAMS Object</summary> The params is a number, you can has an object to help you: 
    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
    }
<summary>VALUE Object</summary> The value is a number, you can has an object to help you: 
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
}
<summary>IS_WINDOWS_11</summary> IS_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 ...)
<summary>WIN10 Object</summary> The value is a number, you can has an object to help you: 
const WIN10 = {
    TRANSPARENT: 2,
    BLURBEHIND: 3, // didn't work on windows 11
    ACRYLIC: 4
}

FAQ

<summary>Error: '...\micaElectron.node' was compiled against a different Node.js version using ...</summary> If you are an error of nodejs version, use electron-packager to rebuild the project with the good version. 
  $ npm install electron
  $ npm install electron-rebuild
  $ .\node_modules\.bin\electron-rebuild
<summary>Build for 32 bits ?</summary>

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