Guidewire Themes based on Environment

We have new requirement, where UI theme should be different from Production vs Non-Production environment. from the Guidewire document, we can create a Custom theme but is there option to set the theme based on the environment?

Solution

This answer is in the context of Insurance Suite apps and not digital portals since that is not mentioned in the question. I think it is possible to enforce themes by the environment but not possible to do it programmatically (in Gosu). In case you were expecting to check ServerUtil.Env and set a theme of your choice.

The default application theme is defined in configuration/webresources/Client_Properties.json and you can set it as below:

"pref_panel_defaults": {
    "theme": "gw-theme--green-white-web",
    ...
 }

Change the above web resources file to mark your theme as the default. You can limit the available themes by excluding them from the list below.

"theme_files_to_include_and_their_display_key_names": {
    "gw-theme--green-white-web": "Web.Theme.Default",
    "gw-theme--green-white-web-high-contrast": "Web.Theme.GreenWhiteWebHighContrast",
    "gw-theme--base": "Web.Theme.Base",
    "gw-theme--darcula": "Web.Theme.Dark"
  }

So as long as your deploy/resources/Client_Properties.json reflects the correct theme name, it will get set. Note that this file is generated after running gwb webResources or through the studio by clicking the Tools -> Web Resources button. Writing to this file dynamically may not be easy but your CI / CD process may be able to take care of this. Just make sure to write the appropriate theme name and regenerate web resources as a pre-build step before building the war and deploying it. An env build variable can be used to set the theme of choice depending on the env being deployed.

Another approach would be to fiddle with certain typescript files that set the theme at runtime. While it is possible and an easier approach, Guidewire may not like you editing the platform level JS files as they are likely to be overwritten during an upgrade. I have figured that the right theme is shown as long as the top level HTML tag has the theme in its id and the correct stylesheet is being referenced.

<html id="gw-theme--darcula" lang="en">

<head>
    <link rel="stylesheet" href="css/gen/gw-theme--darcula.css">
    ...
</head>

So if you can figure out a way to set the above attributes dynamically using custom JavaScript in customer.js that may count as a solution but its usually not recommended.

These solutions would however not restrict a user from changing their theme as themes are user-specific and probably stored on the browser's local storage. However, you can always limit or restrict the available themes on a server to enforce the default one. Another approach that is preferred by customers to differentiate one env from another is to use large labels on the top of the webpage that say "QA" or "DEV".