mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions 1

feat: support more color formats for backgroundColor (#31868)

Browse source
This commit is contained in:
Shelley Vohr 2022-03-21 18:35:54 +01:00 • committed by GitHub
parent 4b8b492b62
commit db79734bfb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 144 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

30
docs/api/browser-view.md
View file

@ -70,5 +70,31 @@ The `bounds` of this BrowserView instance as `Object`.
#### `view.setBackgroundColor(color)` _Experimental_
* `color` string - Color in `#aarrggbb` or `#argb` form. The alpha channel is
optional.
* `color` string - Color in Hex, RGB, ARGB, HSL, HSLA or named CSS color format. The alpha channel is
optional for the hex type.
Examples of valid `color` values:
* Hex
* #fff (RGB)
* #ffff (ARGB)
* #ffffff (RRGGBB)
* #ffffffff (AARRGGBB)
* RGB
* rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\)
* e.g. rgb(255, 255, 255)
* RGBA
* rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\)
* e.g. rgba(255, 255, 255, 1.0)
* HSL
* hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)
* e.g. hsl(200, 20%, 50%)
* HSLA
* hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)
* e.g. hsla(200, 20%, 50%, 0.5)
* Color name
* Options are listed in [SkParseColor.cpp](https://source.chromium.org/chromium/chromium/src/+/main:third_party/skia/src/utils/SkParseColor.cpp;l=11-152;drc=eea4bf52cb0d55e2a39c828b017c80a5ee054148)
* Similar to CSS Color Module Level 3 keywords, but case-sensitive.
* e.g. `blueviolet` or `red`
**Note:** Hex format with alpha takes `AARRGGBB` or `ARGB`, _not_ `RRGGBBA` or `RGA`.

54
docs/api/browser-window.md
View file

@ -66,6 +66,18 @@ win.loadURL('https://github.com')
Note that even for apps that use `ready-to-show` event, it is still recommended
to set `backgroundColor` to make the app feel more native.
Some examples of valid `backgroundColor` values include:
```js
const win = new BrowserWindow()
win.setBackgroundColor('hsl(230, 100%, 50%)')
win.setBackgroundColor('rgb(255, 145, 145)')
win.setBackgroundColor('#ff00a3')
win.setBackgroundColor('blueviolet')
```
For more information about these color types see valid options in [win.setBackgroundColor](browser-window.md#winsetbackgroundcolorbackgroundcolor).
## Parent and child windows
By using `parent` option, you can create child windows:
@ -199,9 +211,7 @@ It creates a new `BrowserWindow` with native properties as set by the `options`.
* `enableLargerThanScreen` boolean (optional) - Enable the window to be resized larger
than screen. Only relevant for macOS, as other OSes allow
larger-than-screen windows by default. Default is `false`.
* `backgroundColor` string (optional) - Window's background color as a hexadecimal value,
like `#66CD00` or `#FFF` or `#80FFFFFF` (alpha in #AARRGGBB format is supported if
`transparent` is set to `true`). Default is `#FFF` (white).
* `backgroundColor` string (optional) - The window's background color in Hex, RGB, RGBA, HSL, HSLA or named CSS color format. Alpha in #AARRGGBB format is supported if `transparent` is set to `true`. Default is `#FFF` (white). See [win.setBackgroundColor](browser-window.md#winsetbackgroundcolorbackgroundcolor) for more information.
* `hasShadow` boolean (optional) - Whether window should have a shadow. Default is `true`.
* `opacity` number (optional) - Set the initial opacity of the window, between 0.0 (fully
transparent) and 1.0 (fully opaque). This is only implemented on Windows and macOS.
@ -992,12 +1002,33 @@ APIs like `win.setSize`.
#### `win.setBackgroundColor(backgroundColor)`
* `backgroundColor` string - Window's background color as a hexadecimal value,
like `#66CD00` or `#FFF` or `#80FFFFFF` (alpha is supported if `transparent`
is `true`). Default is `#FFF` (white).
* `backgroundColor` string - Color in Hex, RGB, RGBA, HSL, HSLA or named CSS color format. The alpha channel is optional for the hex type.
Sets the background color of the window. See [Setting
`backgroundColor`](#setting-the-backgroundcolor-property).
Examples of valid `backgroundColor` values:
* Hex
* #fff (shorthand RGB)
* #ffff (shorthand ARGB)
* #ffffff (RGB)
* #ffffffff (ARGB)
* RGB
* rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\)
* e.g. rgb(255, 255, 255)
* RGBA
* rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\)
* e.g. rgba(255, 255, 255, 1.0)
* HSL
* hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)
* e.g. hsl(200, 20%, 50%)
* HSLA
* hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)
* e.g. hsla(200, 20%, 50%, 0.5)
* Color name
* Options are listed in [SkParseColor.cpp](https://source.chromium.org/chromium/chromium/src/+/main:third_party/skia/src/utils/SkParseColor.cpp;l=11-152;drc=eea4bf52cb0d55e2a39c828b017c80a5ee054148)
* Similar to CSS Color Module Level 3 keywords, but case-sensitive.
* e.g. `blueviolet` or `red`
Sets the background color of the window. See [Setting `backgroundColor`](#setting-the-backgroundcolor-property).
#### `win.previewFile(path[, displayName])` _macOS_
@ -1041,8 +1072,11 @@ Returns [`Rectangle`](structures/rectangle.md) - The `bounds` of the window as `
#### `win.getBackgroundColor()`
Returns `string` - Gets the background color of the window. See [Setting
`backgroundColor`](#setting-the-backgroundcolor-property).
Returns `string` - Gets the background color of the window in Hex (`#RRGGBB`) format.
See [Setting `backgroundColor`](#setting-the-backgroundcolor-property).
**Note:** The alpha value is _not_ returned alongside the red, green, and blue values.
#### `win.setContentBounds(bounds[, animate])`