microsoft / microsoft/AdaptiveCards
[Authoring] Carousel doesn't work well on dark mode
Open
Nobody has claimed this yet.
Area-Renderers
Task
- Dominant language
- C#
- Stars
- 2k
- Forks
- 595
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 1
Description
Target Platforms
NodeJS
SDK Version
0
Application Name
Designer
Problem Description
In dark mode. the text is not shown correctly.
Screenshots
Dark:
Expect:
Card JSON
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.6",
"body": {
"type": "Carousel",
"pages": [
{
"type": "CarouselPage",
"id": "firstCarouselPage",
"selectAction": {
"type": "Action.OpenUrl",
"title": "Click for more information about the first carousel page!",
"url": "https://adaptivecards.io/"
},
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/cats/3.png",
"size": "medium",
"altText": "Shades cat team emblem"
},
{
"type": "TextBlock",
"text": "SHADES",
"horizontalAlignment": "center",
"weight": "bolder",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"separator": true,
"spacing": "medium",
"items": [
{
"type": "TextBlock",
"text": "Sat, Aug 31, 2019",
"horizontalAlignment": "center",
"wrap": true
},
{
"type": "TextBlock",
"text": "Final",
"spacing": "none",
"horizontalAlignment": "center",
"wrap": true
},
{
"type": "TextBlock",
"text": "45 - 7",
"size": "extraLarge",
"horizontalAlignment": "center",
"wrap": true
}
]
},
{
"type": "Column",
"width": "auto",
"separator": true,
"spacing": "medium",
"items": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/cats/2.png",
"size": "medium",
"horizontalAlignment": "center",
"altText": "Skins cat team emblem"
},
{
"type": "TextBlock",
"text": "SKINS",
"horizontalAlignment": "center",
"weight": "bolder",
"wrap": true
}
]
}
]
}
]
},
{
"type": "CarouselPage",
"id": "theSecondCarouselPage",
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Microsoft Corporation",
"size": "Medium",
"wrap": true
},
{
"type": "TextBlock",
"text": "Nasdaq Global Select: MSFT",
"isSubtle": true,
"spacing": "None",
"wrap": true
},
{
"type": "TextBlock",
"text": "Fri, May 3, 2019 1:00 PM",
"wrap": true
}
]
},
{
"type": "Container",
"spacing": "none",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "128.90",
"size": "extraLarge",
"wrap": true
},
{
"type": "TextBlock",
"text": "▲ 2.69 USD (2.13%)",
"color": "good",
"spacing": "none",
"wrap": true
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "FactSet",
"facts": [
{
"title": "Open",
"value": "127.42"
},
{
"title": "High",
"value": "129.43"
},
{
"title": "Low",
"value": "127.25"
}
]
}
]
}
]
}
]
}
]
},
{
"type": "CarouselPage",
"id": "last-carousel-page",
"items": [
{
"type": "TextBlock",
"text": "Redmond, WA",
"size": "large",
"isSubtle": true,
"wrap": true
},
{
"type": "TextBlock",
"text": "Mon, Nov 4, 2019 6:21 PM",
"spacing": "none",
"wrap": true
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://messagecardplayground.azurewebsites.net/assets/Mostly%20Cloudy-Square.png",
"size": "small",
"altText": "Mostly cloudy weather"
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": "46",
"size": "extraLarge",
"spacing": "none",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "°F",
"weight": "bolder",
"spacing": "small",
"wrap": true
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Hi 50",
"horizontalAlignment": "left",
"wrap": true
},
{
"type": "TextBlock",
"text": "Lo 41",
"horizontalAlignment": "left",
"spacing": "none",
"wrap": true
}
]
}
]
}
]
},
{
"type": "CarouselPage",
"id": "theFourthCarouselPage",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "35",
"items": [
{
"type": "Image",
"url": "https://messagecardplayground.azurewebsites.net/assets/Mostly%20Cloudy-Square.png",
"size": "stretch",
"altText": "Mostly cloudy weather"
}
]
},
{
"type": "Column",
"width": "65",
"items": [
{
"type": "TextBlock",
"text": "Tue, Nov 5, 2019",
"weight": "bolder",
"size": "large",
"wrap": true
},
{
"type": "TextBlock",
"text": "32 / 50",
"size": "medium",
"spacing": "none",
"wrap": true
},
{
"type": "TextBlock",
"text": "31% chance of rain",
"spacing": "none",
"wrap": true
},
{
"type": "TextBlock",
"text": "Winds 4.4 mph SSE",
"spacing": "none",
"wrap": true
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "20",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "center",
"wrap": true,
"text": "Wednesday"
},
{
"type": "Image",
"size": "auto",
"url": "https://messagecardplayground.azurewebsites.net/assets/Drizzle-Square.png",
"altText": "Drizzly weather"
},
{
"type": "FactSet",
"horizontalAlignment": "right",
"facts": [
{
"title": "High",
"value": "50"
},
{
"title": "Low",
"value": "32"
}
]
}
],
"selectAction": {
"type": "Action.OpenUrl",
"title": "View Wednesday",
"url": "https://www.microsoft.com"
}
},
{
"type": "Column",
"width": "20",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "center",
"wrap": true,
"text": "Thursday"
},
{
"type": "Image",
"size": "auto",
"url": "https://messagecardplayground.azurewebsites.net/assets/Mostly%20Cloudy-Square.png",
"altText": "Mostly cloudy weather"
},
{
"type": "FactSet",
"facts": [
{
"title": "High",
"value": "50"
},
{
"title": "Low",
"value": "32"
}
]
}
],
"selectAction": {
"type": "Action.OpenUrl",
"title": "View Thursday",
"url": "https://www.microsoft.com"
}
},
{
"type": "Column",
"width": "20",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "center",
"wrap": true,
"text": "Friday"
},
{
"type": "Image",
"size": "auto",
"url": "https://messagecardplayground.azurewebsites.net/assets/Mostly%20Cloudy-Square.png",
"altText": "Mostly cloudy weather"
},
{
"type": "FactSet",
"facts": [
{
"title": "High",
"value": "59"
},
{
"title": "Low",
"value": "32"
}
]
}
],
"selectAction": {
"type": "Action.OpenUrl",
"title": "View Friday",
"url": "https://www.microsoft.com"
}
},
{
"type": "Column",
"width": "20",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "center",
"wrap": true,
"text": "Saturday"
},
{
"type": "Image",
"size": "auto",
"url": "https://messagecardplayground.azurewebsites.net/assets/Mostly%20Cloudy-Square.png",
"altText": "Mostly cloudy weather"
},
{
"type": "FactSet",
"facts": [
{
"title": "High",
"value": "50"
},
{
"title": "Low",
"value": "32"
}
]
}
],
"selectAction": {
"type": "Action.OpenUrl",
"title": "View Saturday",
"url": "https://www.microsoft.com"
}
}
]
}
]
}
]
}
}
Sample Code Language
No response
Sample Code
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue names Designer as the application and supplies a Carousel card JSON plus dark and expected screenshots. Start by reproducing that card in Designer with dark mode enabled, then trace the carousel text rendering; done means the text matches the expected screenshot and remains readable in dark mode.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nodejs
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100