From aa3e852a732c374f64490de2fe7098f63199e149 Mon Sep 17 00:00:00 2001 From: Michaela Laurencin <35157522+mlaurencin@users.noreply.github.com> Date: Mon, 23 May 2022 07:01:22 -0400 Subject: [PATCH] docs: add height option and color transparency info (#34278) --- docs/tutorial/window-customization.md | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/docs/tutorial/window-customization.md b/docs/tutorial/window-customization.md index 7a3a9861677..a724c72d3f0 100644 --- a/docs/tutorial/window-customization.md +++ b/docs/tutorial/window-customization.md @@ -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 @@ -126,7 +126,8 @@ const win = new BrowserWindow({ titleBarStyle: 'hidden', titleBarOverlay: { color: '#2f3241', - symbolColor: '#74b1be' + symbolColor: '#74b1be', + height: 60 } }) ``` @@ -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.