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

[paul-griffith]

See this post, buried in the middle of the thread:

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

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/gl…

You can provide an entire new theme, or a special "override" file that will get merged with the base, apparently.

[nminchin]

@brandon1

we made our dark and light theme by coping the base dark and light theme into our new theme name folder and just adjusting from there

Note: this is highly discouraged as now when new components are added to perspective, their corresponding styling rules will be excluded from your styling. You also won't see any potential fixes to styling that IA find. It’s far better to extend the theme files and override them in your own css files rather than copy and edit them into new themes. This also lets you see what has been modified from the defaults which is often useful

[brandon1]

Thanks @nminchin . I am going to revisit our whole setup in 8.3 today in light of this.

Here is my plan right now. Make my light-citi index.css in the following format. Is this a better approach? I want to preserve the overrides we did to specific classes. This does not use the override theme as I don’t see why it is necessary if my derived one can also just modify the container and other classes directly. Again. Might not be correct…

@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";

:root {
    .ia_container--root {
    background-color: var(--container); /* CITI modified, was: var(--containerRoot); */
                         }

...

}

[nminchin]

You should just import the root light/index (I forget the new syntax and am off on long service leave at the moment) instead of importing indivudal indexes

[brandon1]

It is funny you say that. I just copied the light-cool style, and it has those imports above as shown with the exception that globals is pointed at light.

For posterity, I ended up using the index file from light-cool, put in our changed variables on the local variables.css, and then shoved the other tweaks we made of various CSS classes into the Advanced Stylesheet. It really did simplify our set up quite a bit. Just testing now to make sure nothing was missed. Thank you all for the help.