Hello
We are in v8.0.6 and I wonder is there any plan to add dark theme work in perspective. There are a lot of component which user can’t change its colors.
If there is no dark theme for while it’s good at least some how user can change those color by them self like in vision which user call java swing lib to change the component look and feels.
for example filter section of table or background of Datetime selector
I think this post might make you sad. Sorry to make you sad 
2 Likes
There has been development in progress for themes for a long while now, but the theme refresh is constantly being delayed by escalated issues and new components. We are wrapping up 8.0.7 content now, and already have issues assigned for 8.0.8, so the earliest the theme refresh would be complete for is 8.0.9, and even that is somewhat unlikely due to the breadth of content it needs to account for.
3 Likes
So until then, do you have idea to to change color of datetime component by css3?
May be by editing some files in Inductive automation folder.
You’re welcome to create your own theme files. Switching between them files at runtime does work as expected. There are, unfortunately, some components that ignore some settings in the theme file (we’re addressing these during the refresh I mentioned earlier).
What this means is that no matter what theme file you use, there will be a few components where you just can’t change their colors (progress bar is a prime example). You might not even really notice it while using the light theme because you’re used to the colors of those components, but if you try to create your own dark theme you’ll notice these issues a bit more because the hard-coded “light” color will contrast with your darker theme. This is especially prevalent in components which are brought in from third-party libraries, like the DateTime Input.
In an attempt to see if it could be done, I altered the light.css file with the following lines:
.pt-input {
background-color: #EEEEEE
}
Sure enough, there was no change, even after a Gateway restart. Modifying values in the theme files while in the Sources tab of the browser resulted in changes for other components, but the DateTime Input does not seem to accept styling through the theme files (granted, I only tried one property, but it’s a primary property). As it’s a third-party component, I can’t even guarantee that you would be able to style it after the refresh. I would have to let a developer weigh-in on that.
2 Likes
I think Cody said it beautifully in regards to the current state of theming. We are working hard to make these new changes available to you within the upcoming months. Your patience is appreciated. In the meantime, it is possible to override style rules by applying rules of specificity in your theme files. This is true for almost all of our components. I would suggest reading up on the rules of specificity if you haven’t done so already. Cody is right, that some 3rd party libs may not play very nicely, but we are working to change this with the upcoming changes to theming. If we are talking about styling the DateTime Input component specifically, something like below would work in your theme file. It applies greater specificity and hence overrides the rules inherited from styles further down the chain.
.pt-input-group input {
background-color: blue;
}
1 Like
Thanks for solutions but it only change the color of box which I can easily change by style in perspective. I want to change the color of date picker popup.(the white one)
How should I change it?
By the way who should I guess the .pt-input-group is class for date picker?
Is there any documentation for that?
The only way you would know this is by examining the HTML element in the browser DOM. There is no documentation because we don't fully support CSS modifications; those are something you're doing in a separate language outside the Designer.
good point. what about changing color of date picker? This only change the selected date box color not the popup picker.
I don’t know even how what is the popup element in DOM.
doesn't work 