Changing Window Background Color

When ToDesktop renders your application, it goes through a two-step process:

1. It creates the native desktop window that surrounds your app.
2. It creates a corresponding window view that renders your app.

To ensure that these steps visually flow from one into another, it's important to specify that the background color of the native desktop window matches that of your rendered application. Otherwise, users may see a flashing effect when the background color of your application overrides the default background color of the window.

If you have an application background color that is not white, such as the RGB value #1f2023 (black), then it's important to specify the same background color for you desktop window. This can be done via the Apperance panel in the ToDesktop Builder interface:

You can also interact with the background color programmatically by using the @todesktop/client-core NPM library. First install the library in your project:

        npm install @todesktop/client-core

      

Then import the nativeWindow namespace and use the setBackgroundColor and getBackgroundColor functions:

        async function main() {
  if (platform.todesktop.isDesktopApp()) {
    await nativeWindow.setBackgroundColor({}, '#1f2023');
    await nativeWindow.getBackgroundColor({}); // "#1f2023"
  }
}