google-apps-scriptdarkmodegraphical-logogoogle-workspace-add-onslightmode

In Google Apps Script, is there a way to define two versions of the logoUrl, one for dark mode and one for light?


I'm using Apps Script to create an add-on for extending Gmail. I'm using a black & white icon and it looks great when the user's Gmail UI is in light mode, but becomes invisible in dark mode. Is there a way to use two different logoUrl's, one for each UI mode? I haven't found any documentation or example that points to a solution. The Gmail section of my manifest appsscript.json is:

  "gmail": {
    "name": "MailReceipts",
    "logoUrl": "https://www.gstatic.com/images/icons/material/system/1x/receipt_long_black_24dp.png",
    "contextualTriggers": [
      {
        "unconditional": {},
        "onTriggerFunction": "getContextualAddOn"
      }
    ],
    "primaryColor": "#3d8c5b",
    "secondaryColor": "#54bf7d"
  }

Solution

  • Unfortunately there is no parameter that lets you define two versions of the logoUrl in Google Workspace Add-Ons manifest JSON. The only available JSON field under the common parameter is as follows:

    {
      "homepageTrigger": {
        object (HomepageTrigger)
      },
      "layoutProperties": {
        object (LayoutProperties)
      },
      "logoUrl": string,
      "name": string,
      "openLinkUrlPrefixes": [
        string
      ],
      "universalActions": [
        {
          object (UniversalAction)
        }
      ],
      "useLocaleFromApp": boolean
    }
    

    layoutProperties field only controls the Google Workspace add-on toolbar and button colors and appearance not the logo color itself

    Suggestion:

    A workaround would be to choose an image or logo that is visible for both light and dark mode. You can easily change the logo by replacing the image url in logoUrl field.

    References:

    https://developers.google.com/apps-script/manifest/addons#addons

    https://developers.google.com/apps-script/manifest/gmail-addons

    https://developers.google.com/apps-script/manifest/addons#common

    https://developers.google.com/apps-script/manifest/addons#layoutproperties