microsoft / microsoft/AdaptiveCards

[Adaptive Cards - Home Page] - Complete 'Adaptive Cards' page are not adapting the dark theme.

Open
#9,334 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

A11yMissing_HCLReviewed A11yRT A11ySev3 AdaptiveCards_Web Area-Accessibility Area-Renderers Bug HCL-AdaptiveCards-Web HCL-E+D MissingReviewedDeprecated Product-AC
Dominant language
C#
Stars
2k
Forks
595
Avg merge
1d 19h
Merged PRs (30d)
1

Description

Target Platforms

Other

SDK Version

1.6

Application Name

Adaptive Cards

Problem Description

Test Environment:
URL: https://adaptivecards.io/
OS Version: 25H2 (OS Build 26200.5761)
Browser Version: Version 145.0.3734.1 (Official build) dev (64-bit)

Pre-requisites:
Turn on Dark mode (Navigation Path: System Settings> Personalization > Colors > Choose your mode >Dark theme)

Repro Steps:

  1. Open the above URL on the Edge Dev browser.
  2. Navigate on the page using tab key.
  3. Verify that, complete 'Adaptive Cards' page are adapting the dark theme or not.

Actual Result:
The Complete 'Adaptive Cards' page does not adapt to the dark theme. When the system is switched to dark mode, the Adaptive Cards continue to display using light theme styling instead of updating to dark theme colors.

Note:
Same issue replicates throughout the complete 'Adaptive Cards' site.

Expected Result:
The Complete Adaptive Cards page should adapt correctly to the dark theme when dark mode is enabled. All Adaptive Cards should update their background, text, and UI elements to match dark theme styles. The appearance should remain consistent with the application’s dark theme guidelines.

User Experience:
Users viewing the complete 'Adaptive Cards' page in dark mode may experience visual inconsistency due to light theme styling. This can cause discomfort and make content harder to read in low-light environments. It may also impact users who prefer or rely on dark mode for better usability.

Have feedback to share on Bugs ? please tag bug as “A11yRCA” and add your feedback in the comment section

Screenshots

https://github.com/user-attachments/assets/50ebf044-10a4-4295-bc6e-4ad210ab4dbb

Image

Card JSON
NA
Sample Code Language

No response

Sample Code

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at https://adaptivecards.io/ with the system dark theme enabled, then navigate the complete site using the Edge Dev browser and Tab key as described. Compare the page and Adaptive Cards with the expected dark-theme appearance; done means backgrounds, text, and UI elements consistently adapt across the site.

Written by the indexing model from the issue text.

Assessment

Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.