[NEW] Theming Update: Major Visual Changes in Perspective

The most recent 8.0.12 nightly (available April 18th) 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.

Theming Preview:

Light

Light Cool

Light Warm

Dark

Dark Cool

Dark Warm

19 Likes

image

Thank you, this will be awesome, I was dreading spending a lot of time to get a good dark theme working, and bam, there it is!

3 Likes

Haha…thank you @ryanjmclaughlin

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?


The year and month box border of date picker has some visual problem. The bottom edge is hidden under over objects.

Can I remove border of item in menu component?

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%.

Do you have any plan for popup back ground to be transparent like dock?

That already exists? See popup action dialog.

image

1 Like

Could you please fix menu item border style.


It is related to theme so no other better time to fix this than now.

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?
image

Sure, we can make a ticket for that. Let’s try to reserve this thread for theming related questions, please.

The strikethrough means that the property is deprecated. If you hover over the property, you’ll find the explanation in the tooltip.

1 Like

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!


image

5 Likes

You’re welcome. Our design team is really great at what they do. Glad you’re happy with the new changes.

1 Like

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.

Please advise.

Thanks in advance.

@dhananjay_vichare It looks like the new Perspective theming updates were pushed to 8.0.13. 8.0.12 was expedited in order to push out a critical patch.

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.

2 Likes

Yes, this is a bit confusing, but anything that was previously in an 8.0.12 nightly release is now in the 8.0.13 nightly releases instead.

8.0.12 was released with only a single critical fix related to UDT parameter evaluation.

1 Like

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.

Yes, I was mistaken. I thought you wanted the full screen modal. We have plans to add styling to popups just not sure when that will be.

1 Like

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.