8.0.13 introduces some major visual changes in
Perspective. Theming has been overhauled and fully implemented. The result is a culmination of many months of intensive design, development, quality assurance, and collaboration. A sincere thank you to everyone who was involved in this project. In brief, here is what you need to know about the changes to theming in Perspective. For a more detailed introduction into what theming is meant to solve and the theory behind it, keep a lookout for an upcoming blog post.
The majority of components have been extensively themed, with the exception of chart and third party gauge components.
Every component now follows consistent design patterns to provide your project with a more unified look.
Existing light and dark themes have been fully implemented.
We’ve added four more built-in themes; light-cool, light-warm, dark-cool, and dark-warm. See preview below.
The properties or implementation of some components may have changed in order to support theming. For example, the ProgressBar has been redesigned and the Checkbox and RadioGroup are now icon based.
Docks have no background color, i.e. they are transparent by default.
The theming system has been updated to allow for modular development of themes and help alleviate some of the frustrations inherent to managing large amounts of CSS.
Any existing files found in the themes directory upon upgrade will be copied to a folder called .backup.
If at some point you had created your own theme or modified one of the existing built-in themes (don’t do this) you will need to revisit your changes in order to make them compatible with the new theming system.
Those interested in creating their own themes may reference the “Guide to Theming in Perspective” at the root of the themes directory (README.md) upon upgrade.
We highly recommend reviewing your projects to determine if anything may need to be adjusted as a result of this major visual change. For the early adopters, please feel free to report any issues you encounter so we can help resolve them as soon as possible.
Hi
Great. I have some questions regard new theming:
Is it possible to remove date picker border?
This is my old theming in 8.0.6:
Can I revert back to old style if I want?
Yes, theming is designed so that aspects of themed components can be overridden by style classes or style properties (inline styles). Setting border: none in the root style property on your date picker will remove the border. Similarly, setting borderBottom in itemStyle in the navigation menu component will remove the borders below individual items. We can address the issue you’ve pointed out regarding the dropdown menu. It seems to happen when the zoom level is set to anything less than 100%.
The MenuTree component has an itemStyle property that applies styles to every menu item. In addition, every menu item has its own style property. I’d suggest using those.
Hi @ynejati
For the date picker the style can’t access the dropbox month and year selection.
For example in following screen shot, the white background of dropbox and border can’t be change.
Could you please expose these to style?
Also why there is cross line over foramttedValues?
Thank you for .11/.12 minor designer login window update which makes a HUUUGGGEEE difference. Now I know what username/password to use when I open multiple designers!
I trying to switch theme using Event > action > Theme. But not able to find light-cool, light-warm , dark -cool and dark - warm options in drop down list.
I am using Ignition version 8.0.12 (b2020042115)
I have also tried using script function for switch the theme but not able to do so. Only light and dark theme is working. To resolve this I installed fresh copy of Ignition and restore the backup from 8.0.9.
Also, I am not able to switch the background color of Menu Tree as shown in ynejati’s comment.
No nightly updates for today, although we did expedite 8.0.12 early to patch a critical issue. Support Portal News
8.0.12 final only contains a fix for the UDT issue we identified in 8.0.11. All other changes and features that were originally targeting 8.0.12 are now targeting 8.0.13.
Hi @ynejati
Setting popup background dismissible to True, doesn't cause popup background be transparent. It always render with background. I try to set alpha channel to 0 but doesn't work.
Is there a way to add a “theme” media query or element state to a style class? Maybe I am misunderstanding a premise here, but if I had a style class that was a custom light gray (not in the light theme) and when I changed to “dark” theme I would want to change the background color in that style class to something else.
Am I thinking about this the wrong way though?
EDIT: I realize I could do this with bindings on somethings “classes” property, this just feels more difficult than it should be, and harder to manage.
