update icon doc and gen meta

update

docs/how-to-guides/develop-a-tool/add-a-tool-icon.md

@@ -20,7 +20,8 @@ Adding a custom tool icon is optional. If you do not provide one, the system use
   pip install pillow
   ```
 
-## Add tool icon with _icon_ parameter 
+## Add tool icon using command
+### Add a tool icon regardless light or dark mode  
 Run the command below in your tool project directory to automatically generate your tool YAML, use _-i_ or _--icon_ parameter to add a custom tool icon:
 ```
 python <path-to-scripts>\tool\generate_package_tool_meta.py -m <tool_module> -o <tool_yaml_path> -i <tool-icon-path>
@@ -49,6 +50,37 @@ my_tool_package.tools.my_tool_1.my_tool:
   type: python
 ```
 
+### Add tool icons for light and dark mode respectively
+Run the command below in your tool project directory to automatically generate your tool YAML, use _--icon-light_ to add a custom tool icon in the light mode and use _--icon-dark_ to add a custom tool icon in the dark mode:
+```
+python <path-to-scripts>\tool\generate_package_tool_meta.py -m <tool_module> -o <tool_yaml_path> --icon-light <light-tool-icon-path> --icon-dark <dark-tool-icon-path>
+```
+Here we use [an existing tool project](https://github.com/microsoft/promptflow/tree/main/examples/tools/tool-package-quickstart) as an example.
+```
+cd D:\proj\github\promptflow\examples\tools\tool-package-quickstart
+
+python D:\proj\github\promptflow\scripts\tool\generate_package_tool_meta.py -m my_tool_package.tools.my_tool_1 -o my_tool_package\yamls\my_tool_1.yaml --icon-light my_tool_package\icons\custom-tool-icon-light.png --icon-dark my_tool_package\icons\custom-tool-icon-dark.png
+```
+
+In the auto-generated tool YAML file, the light and dark custom tool icon data URIs are added in the `icon` field:
+```yaml
+my_tool_package.tools.my_tool_1.my_tool:
+  function: my_tool
+  icon:
+    dark: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAB00lEQVR4nI1SO2iTURT+7iNNb16a+Cg6iJWqRKwVRIrWV6GVUkrFdqiVShBaxIIi4iY4iouDoy4ODkKn4uQkDs5FfEzFYjEtJYQo5P/z35j/3uNw7Z80iHqHC/ec8z3OuQeMMcYYAHenU8n84YMAABw7mo93dEQpAIyBAyAiF1Kq8/Wrl5fHR1x6tjC9uPBcSrlZD4BxIgIgBCei+bnC6cGxSuWHEEIIUa58H7l0dWZqwlqSUjhq7oDWEoAL584Y6ymljDHGmM543BhvaPAsAKLfEjIyB6BeryPw796+EWidUInr16b5z6rWAYCmKXeEEADGRy+SLgXlFfLWbbWoyytULZ4f6Hee2yDgnAG4OVsoff20try08eX92vLSzJVJAJw3q7dISSnDMFx48UypeCa97cPHz7fu3Y/FYo1Go8nbCiAiIUStVus/eaKvN691IAQnsltI24wZY9Kp1Ju373K5bDKZNMa6gf5ZIWrG9/0g0K3W/wYIw3Dvnq6dO7KNMPwvgOf5x3uPHOrp9n3/HwBrLYCu3bv6Tg0PjU0d2L8PAEWfDKCtac6YIVrfKN2Zn8tkUqvfigBaR88Ya66uezMgl93+9Mmjxw8fJBIqWv7NAvwCHeuq7gEPU/QAAAAASUVORK5CYII=
+    light: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAB2UlEQVR4nH1SO2hUQRQ9c18K33u72cXs7jOL8UeQCCJoJaIgKAiCWKilaGNlYREFDRGNjayVWKiFFmITECFKJKIokQRRsDFENoooUchHU5qdWZ2512KymxcNOcUwc5nDuefeA2FhZpGFU0S0Mf5S0zpdF2FhISgopUREKfXj59yhoycmPn4GAKDncuXa9VtKKWYGACgowHOdc9a6g0eOA7mx8apzzlp76vRZoGXw6XMRsdb6nwSAmYnoQ3Xi5fBIdk2SiSMiCoKgNZslteruvX4ASikvSwAEAGDqdYhAXO+VypevkwODQ4+HnlGcq2mDNLwtZq5pvWP3AYRJ0Lq2uG5rWNgYFjaBVt+8c19E/jRaWvQgImPj1e279ufaN8elzly5K1/u6r7QZ51zrjmoBqHJ+TU/39ax5cy5i53bdnb39KXtLpr28OMLgiCfz78YHpmemi0W2piZWdIWaMmDCIDWet/ePUlS0toQUWM8yxG8jrVuw/qOTBw19rUiQUQoCGZm50z9txf8By3/K0Rh+PDRk8lv3+MoWklBBACmpmdKxcKn96O3b1SqC6FSyxOUgohk4pjZ9T8YeDX6ptye+PoSpNIrfkGv3747fOzk+UtXjTE+BM14M8tfl7BQR9VzUXEAAAAASUVORK5CYII=
+  inputs:
+    connection:
+      type:
+      - CustomConnection
+    input_text:
+      type:
+      - string
+  module: my_tool_package.tools.my_tool_1
+  name: my_tool
+  type: python
+```
+
 ## Verify the tool icon in VS Code extension
 Follow [steps](create-and-use-tool-package.md#use-your-tool-from-vscode-extension) to use your tool from VS Code extension. Your tool displays with the custom icon:  
 ![custom-tool-with-icon-in-extension](../../media/how-to-guides/develop-a-tool/custom-tool-with-icon-in-extension.png)

scripts/tool/generate_package_tool_meta.py

@@ -36,7 +36,21 @@
         "--icon",
         "-i",
         type=str,
-        help="your tool's icon image path, if not provided, the system will use the default icon.",
+        help="your tool's icon image path, if you need to show different icons in dark and light mode, \n"
+        "please use `icon-light` and `icon-dark` parameter. \n"
+        "if not provided these icon parameters, the system will use the default icon.",
+        required=False)
+    parser.add_argument(
+        "--icon-light",
+        type=str,
+        help="your tool's icon image path in light mode, if you need to show the same icon in dark and light mode, \n"
+        "please use `icon` parameter, if not provided these icon parameters, the system will use the default icon.",
+        required=False)
+    parser.add_argument(
+        "--icon-dark",
+        type=str,
+        help="your tool's icon image path in dark mode, if you need to show the same icon in dark and light mode, \n"
+        "please use `icon` parameter, if not provided these icon parameters, the system will use the default icon.",
         required=False)
     parser.add_argument(
         "--category",
@@ -54,8 +68,26 @@
 
     icon = ""
     if args.icon:
+        if args.icon_light or args.icon_dark:
+            raise ValueError("You cannot provide both `icon` and `icon-light` or `icon-dark`.")
         from convert_image_to_data_url import check_image_type_and_generate_data_url  # noqa: E402
         icon = check_image_type_and_generate_data_url(args.icon)
+    elif args.icon_light:
+        if not args.icon_dark:
+            raise ValueError("You must provide both `icon-light` and `icon-dark`.")
+        from convert_image_to_data_url import check_image_type_and_generate_data_url  # noqa: E402
+        icon = {
+            "light": check_image_type_and_generate_data_url(args.icon_light),
+            "dark": check_image_type_and_generate_data_url(args.icon_dark)
+        }
+    elif args.icon_dark:
+        if not args.icon_light:
+            raise ValueError("You must provide both `icon-light` and `icon-dark`.")
+        from convert_image_to_data_url import check_image_type_and_generate_data_url  # noqa: E402
+        icon = {
+            "light": check_image_type_and_generate_data_url(args.icon_light),
+            "dark": check_image_type_and_generate_data_url(args.icon_dark)
+        }
 
     if args.tool_type == "custom_llm":
         tools_dict = generate_custom_llm_tools_in_module_as_dict(