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

[Tyler_Dixon]

I still feel that my Perspective module theme classes are not linked to this new file location, or there is another bug during installation. Looking at the file path through the “core” folder, I don’t see the default Light and Dark themes. See image below.

[ynejati]

See above. Light and dark are system themes that live in memory. If it helps to view them on the filesystem, you can copy them as read only to core if you'd like. Is that what you're asking? Or, are you saying that your animations are not working?

[Tyler_Dixon]

Animations are not working. I tried adding another label and assigned it a simple one, “bounce” but it still doesn’t work. I still think the link to the attention seekers is broken.

[ynejati]

DM me this light-animations theme and I'll have a look.

[Tyler_Dixon]

I still have 8.1 on my local machine and tried out the “bounce” animation with no problems. Here are is the light-animation files link & dev details and a link to a video from TheWebPleb on how to use them.

Animate.css | A cross-browser library of CSS animations.

Using Animate.css and custom CSS in Perspective

[Tyler_Dixon]

Another thing I noticed with 8.3 upgrade and themes, it did not include the file paths for the themes.digest.json file. It had the old “data/modules/com.inductiveautomation.perspective/”

Here is what I edited it for each themes, and using the “bounce” as the example/test.

"data\\config\\resources\\core\\com.inductiveautomation.perspective\\themes\\light-animations\\animate-css\\attention_seekers\\bounce.css"

[nader.chinichian]

Hi @ynejati

I have two questions here:

1. Right now if we use several css file that imported from index.css, we need to define all of them in resource.json one by one. In normal cases we have more so many CSS files structured in folder for our project, so when we write "entrypoint": "index.css" inside the config.json file, why Ignition doesn’t simply go ahead and read whatever @import inside the index.css instead of resource.json?
2. What if two companies create its own definition of overrides-light when they install their module? (Like Sepasoft and i4Cortex both install their own css files for light and dark.) Always the last module installation overwrite the first one! Is there any way like before people add their own theme folder name inside themes and then just import light.css inside their index.css to overrides light/dark?

[ynejati]

Can you do me a favor and send me your theme file via DM? I'd rather not watch a 30 minute video.

[ynejati]

1. Right now if we use several css file that imported from index.css, we need to define all of them in resource.json one by one. In normal cases we have more so many CSS files structured in folder for our project, so when we write "entrypoint": "index.css" inside the config.json file, why Ignition doesn’t simply go ahead and read whatever @import inside the index.css instead of resource.json?

I think you're talking about two different things, the new resource system and theme processing. The resource.json is part of moving themes to the new resource config system. The processing of themes by the ThemeManager starts at the entry point. So, it does read the imports in index.css (or whatever you chose as your entry point). Am I missing something?

2. What if two companies create its own definition of overrides-light when they install their module? (Like Sepasoft and i4Cortex both install their own css files for light and dark.) Always the last module installation overwrite the first one!

I understand the problem with two overrides, but that same problem would have also existed in 8.1, since there was only one light.css file. Are you saying that's not true?

Is there any way like before people add their own theme folder name inside themes and then just import light.css inside their index.css to overrides light/dark?

You should still be able to do this by adding @ import "../light/index.css" to your custom themes.

[nader.chinichian]

For item 1, I mean why we need to includes all of the css files into resource.json while in the config.json we define entry point and inside index.css we import all other css files. So, you can simply read config and then access index.css and finally parse the file and find out all related css files from there.

Here is my theme. I include both fonts.css and variable.css inside index.css so it is extra to define those file again in reosurce.json:

{
    "scope": "A",
    "version": 1,
    "restricted": false,
    "overridable": true,
    "files": [
        "config.json",
        "index.css",
        "variables.css",
        "fonts.css"
    ],
    "attributes": {
    }
}

For item 2 check out following screenshot. For 8.1, inside light.css each module append their own starting css file as entry points:

As you see here my-light, i4cortex and sepasoft both coexist with each other. I understand in 8.3, we can create our own theme name and it is independent, but in reality all the client use light/dark theme and our components need to work with them out-of-box.

Now, I’m just worries if someone install my module and then install Sepasoft, it will overwrite my css.

I propose any folder start with keyword overrides-light-xxxxx treat as overrides for light and the part is for name representing theme extension, which we put our company names.

[pturmel]

I imagine the files need to be listed as resources to cause them to be served when referenced by the browser, and included as CSS imports to be referenced by the browser.

[nader.chinichian]

No need for that. Browser understand and use CSS files and import keyword inside them.

And config.json define where to start theme file as a resource in 8.3. the resource.json is somehow make everything duplicated

[pturmel]

@nader.chinichian

No need for that.

Yes, there's a need. The gateway is not exposing a filesystem as in v8.1. It is exposing resources. The list in the resource is for the gateway to allow them to be served. The import in the CSS makes the browser request them. You are asking for the gateway to infer the need to serve those resources, which would require the gateway to parse the CSS. It doesn't do that, and I doubt it ever will (risking security holes, if nothing else).

[Tyler_Dixon]

Animate.css | A cross-browser library of CSS animations.

[Tyler_Dixon]

@ynejati

Please tell me if this is the correct path from the custom theme light-animations from “entrypoint”:”index.css” following the core folder to config.json → index.css → animate.css → custom animated theme called “bounce”….Is this supposed to be how 8.3 handles the path to themes?