[NEW] Theming Update: Major Visual Changes in Perspective

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

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

@kgamble, It sounds like you should probably start thinking about managing your own theme.

Gotcha, so from that I take that I use a theme for my "base" styles (background colors, fonts, text colors, etc) and then use the style classes for "special cases"? i.e. I have a base style that themes my component between the "custom light mode" and a "custom dark mode", but if an alarm is triggered I set a style class to whatever my alarm style is?

As far as I know, the way to do this is to define named colors in your theme(s), which you can then use in the style classes - for instance, something like this:
var(--warning)

2 Likes