feat: support more color formats for backgroundColor

docs/api/browser-view.md

@@ -70,5 +70,18 @@ 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, RBG, HSL, or named CSS color format. The alpha channel is
+  optional for the hex type.
+
+Examples of valid `color` values:
+
+* [Hexadecimal Value Colors](https://www.w3schools.com/colors/colors_names.asp)
+  * `#ff00a3`
+  * `#80FFFFFF`
+* [HSL Colors](https://www.w3schools.com/colors/colors_hsl.asp)
+  * `hsl(230, 100%, 50%)`
+* [CSS Color Names](https://www.w3schools.com/colors/colors_names.asp)
+  * `blueviolet`
+  * `red`
+* [RGB Colors](https://www.w3schools.com/colors/colors_rgb.asp)
+  * `rgb(255, 145, 145)`

docs/api/browser-window.md

@@ -66,6 +66,23 @@ 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 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:
+
+* [Color Names](https://www.w3schools.com/colors/colors_names.asp)
+* [Colors Hex](https://www.w3schools.com/colors/colors_hexadecimal.asp)
+* [Colors RGB](https://www.w3schools.com/colors/colors_rgb.asp)
+* [Colors HSL](https://www.w3schools.com/colors/colors_hsl.asp)
+
 ## Parent and child windows
 
 By using `parent` option, you can create child windows:
@@ -199,9 +216,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) - Window's background color as a hexadecimal value (`#ff00a3` or `#80FFFFFF`), HSL color value (`hsl(230, 100%, 50%)`), CSS color string (`blueviolet`), or RGB color value (`rgb(255, 145, 145)`). Alpha in #AARRGGBB format is supported if `transparent` is set to `true`). Default is `#FFF` (white).
   * `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.
@@ -991,9 +1006,7 @@ 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 - Window's background color as a hexadecimal value (`#ff00a3` or `#80FFFFFF`), HSL color value (`hsl(230, 100%, 50%)`), CSS color string (`blueviolet`), or RGB color value (`rgb(255, 145, 145)`). Alpha in #AARRGGBB format is supported if `transparent` is set to `true`). Default is `#FFF` (white).
 
 Sets the background color of the window. See [Setting
 `backgroundColor`](#setting-the-backgroundcolor-property).
@@ -1040,8 +1053,8 @@ 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 as a [Hexadecimal value](https://www.w3schools.com/colors/colors_hexadecimal.asp). See [Setting
+`backgroundColor`](#setting-the-backgroundcolor-property) for more information.
 
 #### `win.setContentBounds(bounds[, animate])`
 

shell/browser/api/electron_api_base_window.cc

@@ -643,7 +643,7 @@ bool BaseWindow::IsTabletMode() const {
 }
 
 void BaseWindow::SetBackgroundColor(const std::string& color_name) {
-  SkColor color = ParseHexColor(color_name);
+  SkColor color = ParseCSSColor(color_name);
   window_->SetBackgroundColor(color);
 }
 

shell/browser/api/electron_api_browser_view.cc

@@ -154,11 +154,11 @@ gfx::Rect BrowserView::GetBounds() {
 }
 
 void BrowserView::SetBackgroundColor(const std::string& color_name) {
-  view_->SetBackgroundColor(ParseHexColor(color_name));
+  view_->SetBackgroundColor(ParseCSSColor(color_name));
 
   if (web_contents()) {
     auto* wc = web_contents()->web_contents();
-    wc->SetPageBaseBackgroundColor(ParseHexColor(color_name));
+    wc->SetPageBaseBackgroundColor(ParseCSSColor(color_name));
   }
 }
 

shell/browser/api/electron_api_browser_window.cc

@@ -369,7 +369,7 @@ void BrowserWindow::Blur() {
 
 void BrowserWindow::SetBackgroundColor(const std::string& color_name) {
   BaseWindow::SetBackgroundColor(color_name);
-  SkColor color = ParseHexColor(color_name);
+  SkColor color = ParseCSSColor(color_name);
   web_contents()->SetPageBaseBackgroundColor(color);
   auto* rwhv = web_contents()->GetRenderWidgetHostView();
   if (rwhv)
@@ -380,7 +380,7 @@ void BrowserWindow::SetBackgroundColor(const std::string& color_name) {
     auto* web_preferences =
         WebContentsPreferences::From(api_web_contents_->web_contents());
     if (web_preferences) {
-      web_preferences->SetBackgroundColor(ParseHexColor(color_name));
+      web_preferences->SetBackgroundColor(ParseCSSColor(color_name));
     }
   }
 }

shell/browser/native_window.cc

@@ -207,7 +207,7 @@ void NativeWindow::InitFromOptions(const gin_helper::Dictionary& options) {
 #endif
   std::string color;
   if (options.Get(options::kBackgroundColor, &color)) {
-    SetBackgroundColor(ParseHexColor(color));
+    SetBackgroundColor(ParseCSSColor(color));
   } else if (!transparent()) {
     // For normal window, use white as default background.
     SetBackgroundColor(SK_ColorWHITE);

shell/browser/ui/cocoa/electron_touch_bar.mm

@@ -339,7 +339,7 @@ - (bool)hasItemWithID:(const std::string&)item_id {
 }
 
 - (NSColor*)colorFromHexColorString:(const std::string&)colorString {
-  SkColor color = electron::ParseHexColor(colorString);
+  SkColor color = electron::ParseCSSColor(colorString);
   return skia::SkColorToDeviceNSColor(color);
 }
 

shell/browser/web_contents_preferences.cc

@@ -235,7 +235,7 @@ void WebContentsPreferences::Merge(
   }
   std::string background_color;
   if (web_preferences.GetHidden(options::kBackgroundColor, &background_color))
-    background_color_ = ParseHexColor(background_color);
+    background_color_ = ParseCSSColor(background_color);
   std::string safe_dialogs_message;
   if (web_preferences.Get("safeDialogsMessage", &safe_dialogs_message))
     safe_dialogs_message_ = safe_dialogs_message;

shell/common/color_util.cc

@@ -9,41 +9,16 @@
 #include "base/strings/string_number_conversions.h"
 #include "base/strings/string_util.h"
 #include "base/strings/stringprintf.h"
+#include "content/public/common/color_parser.h"
 
 namespace electron {
 
-SkColor ParseHexColor(const std::string& color_string) {
-  // Check the string for incorrect formatting.
-  if (color_string.empty() || color_string[0] != '#')
-    return SK_ColorWHITE;
+SkColor ParseCSSColor(const std::string& color_string) {
+  SkColor color;
+  if (!content::ParseCssColorString(color_string, &color))
+    color = SK_ColorWHITE;
 
-  // Prepend FF if alpha channel is not specified.
-  std::string source = color_string.substr(1);
-  if (source.size() == 3)
-    source.insert(0, "F");
-  else if (source.size() == 6)
-    source.insert(0, "FF");
-
-  // Convert the string from #FFF format to #FFFFFF format.
-  std::string formatted_color;
-  if (source.size() == 4) {
-    for (size_t i = 0; i < 4; ++i) {
-      formatted_color += source[i];
-      formatted_color += source[i];
-    }
-  } else if (source.size() == 8) {
-    formatted_color = source;
-  } else {
-    return SK_ColorWHITE;
-  }
-
-  // Convert the string to an integer and make sure it is in the correct value
-  // range.
-  std::vector<uint8_t> bytes;
-  if (!base::HexStringToBytes(formatted_color, &bytes))
-    return SK_ColorWHITE;
-
-  return SkColorSetARGB(bytes[0], bytes[1], bytes[2], bytes[3]);
+  return color;
 }
 
 std::string ToRGBHex(SkColor color) {

shell/common/color_util.h

@@ -11,8 +11,9 @@
 
 namespace electron {
 
-// Parse hex color like "#FFF" or "#EFEFEF"
-SkColor ParseHexColor(const std::string& color_string);
+// Parses a CSS-style color string from hex (3- or 6-digit), rgb(), rgba(),
+// hsl() or hsla() formats.
+SkColor ParseCSSColor(const std::string& color_string);
 
 // Convert color to RGB hex value like "#ABCDEF"
 std::string ToRGBHex(SkColor color);

spec-main/api-browser-window-spec.ts

@@ -1051,6 +1051,19 @@ describe('BrowserWindow module', () => {
         w.setBackgroundColor(backgroundColor);
         expect(w.getBackgroundColor()).to.equal(backgroundColor);
       });
+      it('returns correct color with multiple passed formats', () => {
+        w.destroy();
+        w = new BrowserWindow({});
+
+        w.setBackgroundColor('blueviolet');
+        expect(w.getBackgroundColor()).to.equal('#8A2BE2');
+
+        w.setBackgroundColor('rgb(255, 0, 185)');
+        expect(w.getBackgroundColor()).to.equal('#FF00B9');
+
+        w.setBackgroundColor('hsl(155, 100%, 50%)');
+        expect(w.getBackgroundColor()).to.equal('#00FF95');
+      });
     });
 
     describe('BrowserWindow.getNormalBounds()', () => {