1. Windows
  2. Window Vibrancy (macOS Only)

Windows

A window's vibrancy affects how it appears when it is placed on top of other content. It's commonly used to get a beautiful color passthrough for desktop applications that have some level of transparency:

appearance-based light mode vibrancy effect appearance-based dark mode vibrancy effect

When configuring your window, ToDesktop Builder helpfully exposes a "Background" option for setting a window as vibrant:

Option for setting a window as vibrant

To programmatically do something similar, install @todesktop/client-core in your project and use the platform and nativeWindow namespaces:

        import { platform, nativeWindow } from '@todesktop/client-core';

async function main() {
  if (platform.todesktop.isDesktopApp() && platform.os.getOSPlatform() === 'darwin') {
    await nativeWindow.setOpacity({}, 0.5);
    await nativeWindow.setVibrancy({}, 'fullscreen-ui');
  }
}

main();

      
INFO

These changes will only affect the native window that wraps your application. For vibrancy to work correctly, your app's background CSS should also be transparent.