Adopt system dark mode in the Web Clipper popup

[Copilot]

The Web Clipper popup stayed on a light theme even when the OS/browser was in dark mode, making the clipper UI visually inconsistent and harder to use for low-vision users. This change updates the popup to follow the system dark theme while preserving the existing light theme and forced-colors behavior.

• Theme tokenization

  • Moved popup surface, text, border, scrollbar, and state colors onto CSS variables in renderer.less.
  • Added a prefers-color-scheme: dark token set so the existing UI picks up dark values without changing renderer logic.

• Dark mode surface updates

  • Switched popup chrome from hard-coded light colors to theme-aware values for:
    • sidebar/background surfaces
    • preview container/frame chrome
    • dropdown flyout shadow/borders
    • error and warning states

• Asset and control adjustments

  • Made theme-sensitive assets render correctly in dark mode by updating:
    • section picker chevron color
    • PDF mode icon filter
    • region remove button/icon treatment
    • primary button foreground handling

• Scope

  • Kept the change localized to src/styles/renderer.less; no renderer TypeScript behavior changed.

:root {
  --colorNeutralBackground1: #ffffff;
  --colorNeutralForeground1: #242424;
}

@media (prefers-color-scheme: dark) {
  :root {
    --colorNeutralBackground1: #1f1f1f;
    --colorNeutralForeground1: #ffffff;
  }
}

#sidebar {
  background: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
}

Original prompt

A11y_OneNoe Clipper_Verify accessibility with Change Clipper Mode_Dark Mode: OneNote clipper page is not adopting the dark mode.

Work Item Details

Note: Please focus on the descriptions and information that provide context about the task requirements, functionality, and implementation details. Dates, priorities, and administrative metadata are less relevant for coding tasks.

Description

Environment Details: 

Application Name: OneNote Clipper-Web

OS: Windows 11 OS build 26058.1000

Edge Dev Version: Version 123.0.2400.1 (Official build) dev (64-bit)

AT's: Dark Theme

Pre-Requisites:

1. Open the URL: OneNote Web Clipper Installation

2. Invoke the 'Get OneNote web Clipper for Microsoft Edge' button.

3. Edge Add-ons page will appear. Invoke the Get button.

4. OneNote Clipper will be added in edge extension section. 

5. Expand the Extension button and turn on the OneNote Clipper Show in Toolbar button.

6. OneNote Clipper will appear beside of the search field.

7. Now invoke the OneNote clipper button.

8. Sign in with V-id.

9. Turn on Dark theme.

10. Settings->Personalization->Color->Select Dark theme.

Repro Steps:

1. Open the Ankylosaurus - Wikipedia
2. Now invoke the OneNote clipper button.
3. OneNote Clipper dialog box will appear and observe the issue.

Actual Result:

OneNote clipper page is not adopting the dark mode.

Expected Result:

OneNote clipper page should adopt the dark theme.

User Impact:

Users with low vision and high contrast users who need to change the dark mode to make a better experience will be impacted if text did not apply the Dark mode.

---

Tags

A11yRT; A11yUsable; Accessbility; DarkMode; OneNote; OneNote Clipper; OneNoteClipper_Web; RT-122025; RT-OneNote Clipper-Web-Feb2024; TCS-E+D; Web

RCA Analysis

Was change validated in devMain first before porting to fork?

Why was Flighting|Backout not used?

Impact of bug (# users affected):

RCA and Mitigation/Fix Details:

What are you doing to prevent this in the future?

Comments

Wasim Ahmed (TATA CONSULTANCY SERVICES LTD) (Tue, 28 Apr 2026 07:06:36 GMT): Hi @ Dark mode is one of the AT for accessibility. Could you please provide reason for closing this as By Design.

Reactivating this bug for your input.

CC: @<5f10d1c3-5ada-64e5-bd8b-1c1218d1bf3e> @<9ba22b87-d9ff-69c3-976c-72560252755f>

Aanchal Bhansali (Tue, 31 Mar 2026 10:38:37 GMT): @<4bfc4598-9829-6e30-bd46-e00c8e12568e> This is by design.

Manda Sachin (TATA CONSULTANCY SERVICES LTD) (Sun, 04 Jan 2026 09:17:44 GMT): Issue is still repro, PFA for reference.

Edge Version: 143.0.3650.96 (Official build) (64-bit)

Work item: AB#8785003
Created via Azure DevOps