1. Windows
  2. Changing Window Background Color


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.


By default, the native desktop window uses a white background color. As a result, users will only notice a flashing effect if your background color is something other than white.

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:

Settings for configuring a window's background color

To reveal the Background Color option, set the above Background value to Color.

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"


Because your application is rendered after the desktop window has been created, changing the background color via the API will not avoid the flashing effect. To avoid the flashing effect altogether, the background color needs to be set in the ToDesktop Builder UI.