@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
Yes.
A lot of users approached Perspective Styles form the beginning as a way to define broad-scope settings across components because Perspective themes were not fully developed and fleshed-out. This approach worked to move users along, but from a maintenance and adaptability perspective, this is the wrong approach.
Style settings and colors which are intended to be used throughout the project should be applied through a projectâs theme, and Perspective Style Classes should be used in instances like one-offs, or when you want an appearance based on some property or state. In this way, Style Classes prevent you from needing to bind potentially dozens of individual style properties against a value.
In your case, you should provide an additional file of colors in the theme directory - themes/custom_colors.css with a color like --kg-light-grey: #e7dbdb(donât add your color to the existing list of named colors) and make sure to import this file within the top-level theme files.
themes/light.css should look like this, as should the other themes you want to use your colors in:
@import "./light/index.css";
@import "./custom_colors.css";
Then, you can access your color anywhere on the project just as @PGriffith suggested: var(--kg-light-grey).
Binding the Style Class in use to the Alarm state is going to be a little trickier, but should be something like this:
Note that this binding is on the
classes property, not style. In this example, âActiveAlarmâ is a Perspective Style Class at the top level of the Styles directory and houses style settings I want applied to components in the event a specified Alarm is in an active state.
10 Likes
You are the man @cmallonee, this is really good information for someone that doesnt know much about web-development, but has been deep in perspective since launch. Definitely look forward to using this information to enhance my projects.
1 Like
I just gotta say again, I just spent the last day redoing all of my styles into a theme, and centrally managing things that way. Considering now when I drop a component into my project it automatically looks correct with no adjustments needed, this is a paramount in maximizing development efficiency.
Really good advice.
3 Likes
I am a huge fan of the theme update, thank you very much!
I did however find one aspect of the themeâs that I donât really like.
The background color on the selected items dropdown âvaluePillâ
Is there a straight forward way in the designer to change this color? I could not find an easy way to change this color.
I was able to change the style in the CSS files by locating the relavant style
.ia_dropdown__valuePill {
border-radius: var(--borderRadius);
background-color: var(--containerNested);
overflow: hidden;
}
and adding this to my custom stylesheet to hide it
.ia_dropdown__valuePill {
background-color: transparent;
}
2 Likes
I would think that this is a bug and it shouldnt be visible when the "multiSelect" property on the dropdown is false I would think that this shouldnt be visible, seeing as the pill is only necesarry when you can have multiple selections.
1 Like
Youâre right. It shouldnât have a background color if multi-select is false. We rewrote the dropdown component to allow for theming and it seems like we missed some things. We will address this issue and consider including more styling accessible via the componentâs props.
3 Likes
This was on another post about customizing the Gauge, and it made me wonder:
Are any of the different ia.chart compenents currently accessible through theming? I know this ones the ia.chart.gauge and I am yet to find any chart related components that I can theme
2 Likes
No, unfortunately not. At the moment they are not compatible with theming. The default stroke color of the xy, pie, and gauges were changed internally so that the default configuration would work between contrasting themes (i.e, itâs a some shade of grey). The good news is that you are able to configure a lot of this yourself. For now, configuring them so that they work well in both dark and light themes might be a good idea.
1 Like
I am having issues setting up the new themes in perspective. I created a dropdown in to select the theme as in the example in the manual. Two different issue arise when I run the perspective session in a web browser or put the designer in preview mode.
-
I can select a theme color and it will change until I click somewhere else on the screen. then the dropdown has a null value (Displays âSelectâ) and the theme color changes back to dark-cool. Somehow it is defaulting back to this. I see the same issue when I run the designer in preview mode. Its like something in the session is forcing this theme back into the prop.
-
when I do set the theme to dark mode, it does not change the background color on the home page. I am using the default home page created with each project. Do I need to create a separate home page for this to work properly? I was under the assumption that this theming would span all views, popups etc.
Could you supply the view.json file for the View which contains your Drodpown? This is pretty much the same setup I use but I have no issues, so Iâd like to see what could be happening with your setup.
view.json (4.3 KB)
Here is the JSON file
Remove the onClick Event from the Coordinate Container to start.
There is no reason this should not work for the home page as it's using the same theme files. Please post view.json of the home page in question.
Wow, not sure how that got there, ok so that takes care of the mystery selection. the json file for the home page in question is the same one that I sent you. Is it possible that it does not have the references in the view to look at the themes if this home page was created in an earlier version before theming was released?
That shouldnât matter. Part of the upgrade process is moving the old theme files to a backup folder and placing the new theme files. I would verify that the theme files are actually in place. Look in C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes (or the analogous directory if using a different OS) for files ending in .css. There should be six of them that we package by default. If not, then get back to me with what you do see.
If the files are in place, active sessions should begin using them immediately following a page refresh. New sessions pick them up right away. The Page/View does not have references to the theme - itâs all handled by the browser (chromium within the Designer). So if your themes are in place there should be no reason why the View is not using them.
Using the repaired View, open a new session in the browser of your choice. Right click the View while a theme other than âlightâ is selected, and select âInspectâ. In the resulting window, select the âElementsâ tab, and take a screenshot of the âStylesâ panel.
That does not match up with the View you sent me. At dimensions of 894x850, and even with a Docked View taller than what you have displayed, the Dropdown is nowhere near the bottom of the displayed View. Also, the Dropdown labels and values are identical in what I have, without any capitalization.
Yes I have changed the view a little since exporting the view to get the json file. all I have done is moved the drop down and the label into another coordinate container nested inside the coordinate container that was on the original view I sent you the json for. And have renamed the labels for the menu items in the selection list.
Her is the json file for the current view i just took a screen shot of. Everything should be the same except the nested coordinate container and label names of dropdown selection. and im still not seeing the background change color with theme selection. it does look like the page background color is getting an incorrect reference.
view.json (5.2 KB)