Dark Mode Issues: Unreadable ORA Elements and Visibility Problems

[magajh]

Description

This issue highlights several problems with the dark mode implementation in the Tutor-Indigo theme. These issues affect the readability and usability of specific sections in the Open edX platform when dark mode is enabled. They were originally flagged during the Sumac release testing but have been identified as theme-specific and tied to Indigo.

During a recent BTR meeting, it was decided that theme-specific testing, such as addressing dark mode issues in the Indigo theme, would be under the responsibility of the theme maintainers. You can find more details here: https://openedx.atlassian.net/wiki/spaces/COMM/pages/4551147558/2024-11-04+BTR+Meeting+Minutes. Below are the details of the reported issues:

---

Reported Issues

1. ORA Response and Rubric Colors Render Unreadable

• Expected Behavior:
  All parts of the Open Response Assessment (ORA) interface should be easily readable in dark mode.
• Actual Behavior:
  Some text and UI elements within the ORA become difficult to read or entirely invisible due to incompatible colors in the dark mode color scheme.
  https://jam.dev/c/0590feb8-01b0-455c-8ef1-b40fbf8f3780)
• Original Report:
  • [Test failure] <TC_AUTHOR_153>: Dark Mode Issue: ORA Response and Rubric Colors Render Unreadable openedx/wg-build-test-release#402

---

2. Dark Mode Compatibility Issues Across Handouts and Updates Sections

• Expected Behavior:
  All interface sections, including Handouts and Updates, should be readable and visually compatible with dark mode settings.
• Actual Behavior:
  Handouts and Updates sections display a white background, leading to a jarring visual mismatch and reduced readability.
• Original Report:
  • [Test failure] Dark Mode Compatibility Issues: Visibility Problems Across Several Sections openedx/wg-build-test-release#410

[DawoudSheraz]

Hello. Adding a status update for this issue below

1. ORA Response and Rubric Colors Render Unreadable

We have identified the issues and are working on fixing them. The work-in progress has been created and will be merged as soon as the relevant issues have been fixed #111.

2. Dark Mode Compatibility Issues Across Handouts and Updates Sections

Since the issue touches various sections of the platform, I am going to add context for each where possible.

Handouts and Updates

Course updates and handouts are rendered via iframe. However, the dark theme fixups can be done because these iframes are rendered via srcdoc instead of src.

Notes, Teams, and Textbooks Tabs

These tab do not have any dark theme related CSS in Indigo. We will be doing a quick fix for them, though it is possible we might do a rehaul of those later. If we run into any issues with either tab, we will update the issue.

Wiki

The group dropdown in settings is readable in dark theme.

Discussions Sidebar

The discussion sidebar is rendered as an iframe from discussions MFE. It might not be fixed immediately. We will create a follow-up issue for that.

cc: @hinakhadim

[hinakhadim]

Part 1: "ORA Response and Rubric Colors Render Unreadable" PR is ready.

[hinakhadim]

PR to fix "Course Updates and Handouts" is ready.

[DawoudSheraz]

ORA Dark theme fixups are now live on sandbox https://apps.sumac.demo.edly.io/learning/course/course-v1:Test+tc001+2024/block-v1:Test+tc001+2024+type@sequential+block@1332ed90062f494db229a95e83723982/block-v1:Test+tc001+2024+type@vertical+block@b820b6e89ec34c82ad02280a96154273

[DawoudSheraz]

PR to fix teams tab dark theme compatibility issues #114

[hinakhadim]

PR to fix Notes and Textbook for dark-theme: #115

[hinakhadim]

Closing this issue as all the points are completed and the PRs are merged.
Another issue will be created for discussion sidebar follow-up.

cc: @DawoudSheraz