[IGN-13768] Perspective Custom Theming Not Working After 8.3 Migration

Ignition 8.3 Early Access
19

Hey Daniel. That’s to be expected, as the changes I described in my post above haven’t been released yet. They’ll be available in the 8.3.0 final release. We missed the deadline for the RC by a few days.

You can check to see if the file exists by viewing the config:
{{gateway_address}}/data/api/v1/resources/find/com.inductiveautomation.perspective/themes/:name

For reference, the contents of light-cool/index.css:

@import "./variables.css";
@import "../light/fonts.css";
@import "../light/globals.css";
@import "../light/app/index.css";
@import "../light/common/index.css";
@import "../light/designer/index.css";
@import "../light/palette/index.css";

Hope this helps.

Update

In 8.3.0, we’ve added the ability to override our light and dark themes, just like in 8.1. In order to do so, you must create a new theming resource called overrides-[light/dark]. Make sure that the theme config isPrivate: true in order to hide the theme from themes list. Example POST payload:

[
  {
    "name": "overrides-light",
    "collection": "core",
    "enabled": true,
    "description": "Overrides light theme.",
    "config": {
      "entrypoint": "index.css",
      "isPrivate": true
    }
  }
]

If we detect an override resource, we simply redirect the entry point of the Perspective base theme to the entry point specified in the overriding theme resource config. The contents of the overriding entry point (typically `index.css) can be as simple as:

@import "../light/index.css";

:root {
  --customVariable: "whatever";
}

Or, as complicated as:

@import "./variables.css";
@import "../light/fonts.css";
@import "./globals.css";
@import "../light/app/index.css";
@import "../light/common/index.css";
@import "../light/designer/index.css";
@import "../light/palette/index.css";

Either way, it's up to you to make sure the base theme imports are included in your overriding theme.

Thanks again for bringing it up, @nader.chinichian. Hope this helps.

3 Likes