Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: add height option and color transparency info #34278

Merged
merged 1 commit into from May 23, 2022
Merged

docs: add height option and color transparency info #34278

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
13 changes: 9 additions & 4 deletions docs/tutorial/window-customization.md
View file
Open in desktop
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