Skip to content
This repository has been archived by the owner on Oct 30, 2023. It is now read-only.

Commit

Permalink
docs: add height option and color transparency info (electron#34278)
Browse files Browse the repository at this point in the history
  • Loading branch information
mlaurencin authored and khalwa committed Feb 22, 2023
1 parent d52e69a commit 27fbc5a
Showing 1 changed file with 9 additions and 4 deletions.
13 changes: 9 additions & 4 deletions docs/tutorial/window-customization.md
Expand Up @@ -115,9 +115,9 @@ const win = new BrowserWindow({
})
```

On Windows, you can also specify the color of the overlay and its symbols by setting
`titleBarOverlay` to an object with the `color` and `symbolColor` properties. If an option
is not specified, the color will default to its system color for the window control buttons:
On Windows, you can also specify additional parameters. The color of the overlay and its symbols can be specified by setting `titleBarOverlay` to an object and using the `color` and `symbolColor` properties respectively. The height of the overlay can also be specified with the `height` property.

If a color option is not specified, the color will default to its system color for the window control buttons. Similarly, if the height option is not specified it will default to the default height:

```javascript title='main.js'
// on Windows
Expand All @@ -126,7 +126,8 @@ const win = new BrowserWindow({
titleBarStyle: 'hidden',
titleBarOverlay: {
color: '#2f3241',
symbolColor: '#74b1be'
symbolColor: '#74b1be',
height: 60
}
})
```
Expand All @@ -135,6 +136,10 @@ const win = new BrowserWindow({
> color and dimension values from a renderer using a set of readonly
> [JavaScript APIs][overlay-javascript-apis] and [CSS Environment Variables][overlay-css-env-vars].
### Limitations

* Transparent colors are currently not supported. Progress updates for this feature can be found in PR [#33567](https://github.com/electron/electron/issues/33567).

## Create transparent windows

By setting the `transparent` option to `true`, you can make a fully transparent window.
Expand Down

0 comments on commit 27fbc5a

Please sign in to comment.