# \[NEW\] Theming Update: Major Visual Changes in Perspective **URL:** \ **Category:** Ignition Early Access\ **Created:** [April 17, 2020, 11:41pm UTC](https://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020 "2020-04-17T23:41:06Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\ **Post date:** [April 17, 2020, 11:41pm UTC](https://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020/1 "2020-04-17T23:41:06Z")
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. ## Theming Preview: ### Light ![light](https://us1.discourse-cdn.com/inductiveautomation/original/2X/c/c6616c6025be8e816178d1d925a313d325ce56c0.png) ### Light Cool ![light-cool](https://us1.discourse-cdn.com/inductiveautomation/original/2X/6/6344d59dc32578ddc1118dc0ca90071702e999ef.png) ### Light Warm ![light-warm](https://us1.discourse-cdn.com/inductiveautomation/original/2X/f/f2baf3473b2cb23866db61350456e9dec05a5530.png) ### Dark ![dark](https://us1.discourse-cdn.com/inductiveautomation/original/2X/9/921074271f1e3fbab968402bbf93e9e8c727399c.png) ### Dark Cool ![dark-cool](https://us1.discourse-cdn.com/inductiveautomation/original/2X/a/adc0b232f2a3aab0ec3c1140d626928214b3886e.png) ### Dark Warm ![dark-warm](https://us1.discourse-cdn.com/inductiveautomation/original/2X/e/e633095f1c6f03c1da4b845c7fee0123f9b33d88.png) ---
**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\ **Post date:** [April 17, 2020, 11:41pm UTC](https://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020/2 "2020-04-17T23:41:30Z")
---
**Author:** ![ryanjmclaughlin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryanjmclaughlin/32/4318_2.png) [@ryanjmclaughlin](https://forum.inductiveautomation.com/u/ryanjmclaughlin)\ **Post date:** [April 18, 2020, 2:15pm UTC](https://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020/3 "2020-04-18T14:15:28Z")
![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/e/e69264252fff1a8740adb2297c88caf14c8f9692.jpeg) 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! ---
**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\ **Post date:** [April 19, 2020, 4:53pm UTC](https://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020/4 "2020-04-19T16:53:56Z")
Haha…thank you @ryanjmclaughlin ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [April 20, 2020, 6:08pm UTC](https://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020/5 "2020-04-20T18:08:43Z")
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? ![Screenshot_20200420-222924](https://us1.discourse-cdn.com/inductiveautomation/original/2X/1/1b1a17861effc9b85269dbb342ebca3c891bd603.jpeg) The year and month box border of date picker has some visual problem. The bottom edge is hidden under over objects. ![Screenshot_20200420-222152__01](https://us1.discourse-cdn.com/inductiveautomation/original/2X/2/29eaf4822b6ee07c2fba30a0139b7924d7313622.jpeg) Can I remove border of item in menu component? ---
**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\ **Post date:** [April 21, 2020, 12:53pm UTC](https://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020/6 "2020-04-21T12:53:56Z")
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%. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [April 21, 2020, 2:59pm UTC](https://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020/7 "2020-04-21T14:59:40Z")
Do you have any plan for popup back ground to be transparent like dock? ---
**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\ **Post date:** [April 21, 2020, 3:19pm UTC](https://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020/8 "2020-04-21T15:19:35Z")
That already exists? See popup action dialog. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/b/ba831c507eb3dd6327d5d5bb3de33f56f54fac4c.png) ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [April 22, 2020, 8:27am UTC](https://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020/9 "2020-04-22T08:27:34Z")
Could you please fix menu item border style. > [@How can I get rid of top/botton grey border of item menu](http://forum.inductiveautomation.com/t/how-can-i-get-rid-of-top-botton-grey-border-of-item-menu/30707/6): > > Any chance that bug is on a timeline yet to be addressed? It is related to theme so no other better time to fix this than now. ---
**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\ **Post date:** [April 22, 2020, 2:37pm UTC](https://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020/10 "2020-04-22T14:37:09Z")
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. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [April 23, 2020, 2:21pm UTC](https://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020/11 "2020-04-23T14:21:50Z")
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](https://us1.discourse-cdn.com/inductiveautomation/original/2X/5/580581a072f1013264cb6d33a4fb401aae8ce290.png) ---
**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\ **Post date:** [April 23, 2020, 2:54pm UTC](https://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020/12 "2020-04-23T14:54:01Z")
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. ---
**Author:** ![drojas](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/drojas/32/3403_2.png) [@drojas](https://forum.inductiveautomation.com/u/drojas)\ **Post date:** [April 23, 2020, 7:43pm UTC](https://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020/13 "2020-04-23T19:43:57Z")
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](https://us1.discourse-cdn.com/inductiveautomation/original/2X/3/3b670025c17fbc6dc7d05fd84529dbf5e09abcad.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/2/27488b155d38c66d89e7010906362a2dda01d1fe.png) ---
**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\ **Post date:** [April 23, 2020, 7:59pm UTC](https://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020/14 "2020-04-23T19:59:44Z")
You’re welcome. Our design team is really great at what they do. Glad you’re happy with the new changes. ---
**Author:** ![dhananjay\_vichare](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dhananjay_vichare/32/74712_2.png) [@dhananjay\_vichare](https://forum.inductiveautomation.com/u/dhananjay_vichare)\ **Post date:** [April 27, 2020, 12:10pm UTC](https://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020/15 "2020-04-27T12:10:44Z")
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)** ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/3/3a0b912fd3719ce2b6023bc440476b7be59dedbf.png) 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. ---
**Author:** ![WillMT10](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WillMT10](https://forum.inductiveautomation.com/u/WillMT10)\ **Post date:** [April 27, 2020, 3:00pm UTC](https://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020/16 "2020-04-27T15:00:51Z")
@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.](http://forum.inductiveautomation.com/t/nightly-changelogs-2020/31153/64) > No nightly updates for today, although we did expedite 8.0.12 early to patch a critical issue. [Support Portal News](https://support.inductiveautomation.com/index.php?/News/NewsItem/View/86/8012-now-available) > 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. ---
**Author:** ![Kevin.Herron](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kevin.herron/32/7259_2.png) [@Kevin.Herron](https://forum.inductiveautomation.com/u/Kevin.Herron)\ **Post date:** [April 27, 2020, 3:09pm UTC](https://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020/17 "2020-04-27T15:09:29Z")
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. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [May 4, 2020, 5:47am UTC](https://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020/18 "2020-05-04T05:47:42Z")
> [@nader.chinichian](#): > > transparent 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. ---
**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\ **Post date:** [May 4, 2020, 2:10pm UTC](https://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020/19 "2020-05-04T14:10:30Z")
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. ---
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [May 27, 2020, 4:03pm UTC](https://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020/20 "2020-05-27T16:03:49Z")
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. [Next page](https://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020.md?page=2)