Bring Back Direct CSS Editing in Perspective – Keep Dev Workflows Fast & Transparent

Hi,

In Ignition 8.3, the only way to modify Perspective theme CSS is through the API endpoint:
/data/api/v1/resources/find/com.inductiveautomation.perspective/themes.

While this works, it’s not very efficient for real-world development.

Imagine having a well-structured CSS setup with 50+ interrelated CSS files. With the API, there’s no easy way for a human to see the complete structure in real time, understand the relationships, or navigate quickly.

Before, we could use good code editors like VS Code to build and organize our CSS logic, benefiting from syntax highlighting, search, linting, and extensions. Now, we’re forced into an API workflow that lacks these productivity tools.

Version control is another challenge — we used to easily track and manage CSS changes in GitHub. With the API, that workflow is not totally possible.

Another drawback is that the underlying CSS structure is now hidden from developers. If we want to understand how Perspective’s styles are built, we’re forced to use Chrome’s inspector to hunt down classes and relationships. In the old method, we could simply open all the CSS files in VS Code, explore them in a comfortable environment, and even pass them to AI tools for quick analysis or documentation.

There’s also a backup concern — restoring an 8.1 project backup in 8.3 doesn’t restore the CSS files, which makes migration and recovery more difficult.

It would be great to bring back the older method (alongside the new API) so developers can choose the approach that best fits their workflow — keeping productivity, transparency, and flexibility high.

3 Likes

I haven’t had time to fiddle with the beta yet, but this is really sad and concerning news.

I can think of multiple projects on our end that use custom CSS themes extensively.

Not being able to get those themes when migrating to 8.3 is a huge bummer….

Today is a sad day !

1 Like

The theme files should migrate here. [IGN-13768] Perspective Custom Theming Not Working After 8.3 Migration - #2 by Kevin.Herron

Incomplete migration has a ticket number, so it should be fixed.

2 Likes

Alternatively, it might be interesting if someone developed a Perspective Themes Manager/Editor module, allowing themes to be edited directly within the Designer.

2 Likes

Just to make sure I understand this correctly, does this mean that we will still be able to edit the theme files via VS Code or a similar IDE ? The files were merely moved to a new location ?

Thanks

You can no longer edit the system-supplied theme files. (But you shouldn’t in v8.1 either, as they are replaced on upgrades.) User-supplied theme files will now be full resource files.

3 Likes

This is an unnecessarily alarmist post.

As described here, you absolutely can create Perspective's extra resources (fonts, themes, icons) now by directly editing files on disk. The location is different and two extra files are necessary - that's the only change. For themes, take the same instructions I gave for icons, but in your config.json have a single entry "entrypoint": "someFile.css" that points to the 'primary' file. For fonts, create an empty JSON object in the config.json.

The overall structure of the theme/icon/etc files has not changed - you can extract them from the module easily with an archive explorer if you want to open them in an external code editor.

As mentioned by others, that restoring an 8.1 gateway backup doesn't properly restore all theme resources is a known issue that we're going to fix.

14 Likes

So, as you mention each time I make a simple changes in theme/fonts/icons folder I need to do reset? The manipulating theme and icons is something that going to change during development rapidly, and this is not make scene each time we have a simple change I need to reset the gateway!

Imagine We already have icons lib called BMS setup and client ask to add a some new icons into it which is fairly simple process and he want to see them in the project so he may want to change them till he happy with the result. So each time I need to reset gateway and wait for 5 min till server up and then wait another 2 min to open Designer!

  1. Restart the gateway (or POST the /data/api/v1/scan/config endpoint) to pick up the changed resource.

There are two options in your quoted instruction. Use the other option if restarting is not desired.

2 Likes

We also include a button in the UI that will make the POST call to the /data/api/v1/scan/config endpoint if you don’t want to make the API call yourself.

9 Likes

Ok, in the following folder for my theme:

D:\Ignition 8.3.0 b2\data\config\resources\core\com.inductiveautomation.perspective\themes\my-light

And inside the my-light folder:

config.json (32 Bytes)

resource.json (191 Bytes)

After restarting the gateway, I have my-light in session.props.themedropbox but the my CSS variables doesn’t work. What did I wrong here?

Add variables.css to the resource.json's manifest of files.

Ok, I wonder when I only add index.css into to the resource file and inside index.css we have @import "./variables.css"; it should automatically access to it without adding to the resources. Am I right? The index.css is entry point to whole other nested CSS files. In practice, we have +50 CSS file, now imagine it will be nightmare for me to add all of these dependency into the resource file.

Imagine I add all of my css file inside another folder called my-light and I just reference variables.css from index.css as following image. This doesn’t work.

I have another question as well.

As now the default theme are not expose in the file system, if I want to add some CSS files to the light theme, what should I do?(forget API)

Should I create a folder called light and put light.css file in it and then append my import CSS files to it like 8.1 and finally create config and resource file in the same folder? If yes how light dependencies will solve? (app, common, palette, fonts,…)

In most cases we use Perspective out-of-box theme with just some additional CSS to it.