1. Windows
  2. Window Vibrancy (macOS Only)


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');



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.