search

pnp / sp-dev-fx-aces

Repository for the Microsoft Viva Connections Adaptive Card sample solutions from Microsoft and community.
https://aka.ms/viva/connections/extensibility
MIT License
110 stars 92 forks source link

SharePoint Adaptive Card - Dark Mode Color Issue #33

Closed ahmedmahmoudR closed 2 years ago

ahmedmahmoudR commented 2 years ago

Now i have issue with ImageCard-HybridWork-Checkin Card when I change viva Sharepoint portal to dark mode the the card below has some color issues which makes the input hard to see. how to fix that

This is an image

PopWarner commented 2 years ago

Thank you for the issue @ahmedmahmoudR.

To better help identify the issue, could you provide a little more clarity around the steps you took to apply your dark mode? We wanted to confirm if this was just the application of a dark Microsoft 365 theme or OS level dark mode or perhaps something else.

Thank you in advance. ☺🧡💜

ahmedmahmoudR commented 2 years ago

I just change SharePoint theme to dark from look and feel This is an image

ahmedmahmoudR commented 2 years ago

Any Update about this issue ?

dcashpeterson commented 2 years ago

Hi @ahmedmahmoudR I have not had a chance to look into this yet. I will loop in the sample creator @ArijitCloud to see if he has a few minutes to look at this.

ArijitCloud commented 2 years ago

Thanks @dcashpeterson for looping me in. I took a quick view at it. I can reproduce it and the same issue seems to be present for other "input form" type ACE solutions. So the challenge is I don't see any specific resources that allows handling dynamic theme in ACEs as of now. I would need to check more though.

ahmedmahmoudR commented 2 years ago

Hello All Thanks for support but is there any update with my issue

dcashpeterson commented 2 years ago

Hello @ahmedmahmoudR , Thank you for reporting this. It looks like this might be an issue with the samples not being created to be theme aware. As these are all community contribution based samples we welcome any community member to provide updates. If you would like to try to give it a try to fix it you could see if this link is helpful. https://n8d.at/develop-spfx-web-parts-for-different-section-designs-using-css.

ArijitCloud commented 2 years ago

@ahmedmahmoudR It looks like it could be an issue with SPFx itself, as per the documentation here, ACE design theme, quick views are supposed to follow SPO theme, I noticed the same is happening for other controls except text input type controls in adaptive card.

I see you already created an issue in SPFx, related spfx issue please follow up on that thread. Meanwhile you could also try handling the theme and setting background of the individual control using typical SPFx way as Derek suggested.

dcashpeterson commented 2 years ago

I agree, think this is an issue with how form elements are being rendered. I was able to test and change the theme and the ACE itself is picking up the theme changes however the form elements are not. It doesn't look like form elements support a color property on them. My recommendation would be to open an issue in the SPFx issues list as @ArijitCloud suggested or in the adaptive cards repo. https://github.com/Microsoft/AdaptiveCards/ @ahmedmahmoudR I saw the issue in the other repo and commented.