Page MenuHomePhabricator

Link selection in standalone VisualEditor has low contrast in dark mode
Closed, ResolvedPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

What happens?:

Problematic CSS:

.ve-ce-linkAnnotation.ve-ce-annotation-active {
  /* box-shadow: 0 0 0 1px #c6e0ff; */
  /* background-color: #e6f1ff; */

What should have happened instead?:

There should be high contrast between the selection background and the selection text. Ideally the selection background should incorporate an appropriate colour scheme when used within MediaWiki.

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

obraz.png (118×484 px, 9 KB)

Event Timeline

This is kind of close if you want to use exisiting colors:

.ve-ce-linkAnnotation.ve-ce-annotation-active {
  /* box-shadow: 0 0 0 1px #c6e0ff; */
  /* background-color: #e6f1ff; */
  box-shadow: 0 0 0 1px var(--background-color-progressive-subtle--active);
  background-color: var(--background-color-neutral);
}

Change #1222800 had a related patch set uploaded (by Aarohisharma3; author: Aarohisharma3):

[VisualEditor/VisualEditor@master] Use CSS variables for link annotation active state

https://gerrit.wikimedia.org/r/1222800

I've submitted a patch to fix this issue:
https://gerrit.wikimedia.org/r/c/VisualEditor/VisualEditor/+/1222800

The patch replaces hardcoded colors with CSS variables (--background-color-progressive-subtle--active and --background-color-neutral) to support dark mode properly.

zoe renamed this task from VE link selection is not darkness ready to Link selection in standalone VisualEditor has low contrast in dark mode.Jan 6 2026, 7:06 PM
zoe updated the task description. (Show Details)

Thank you for letting us know about this!

We need to take care to keep things working when VE is running in standalone mode. It looks like we do have some kind of mechanism using less. It'll have to be a couple of days but I plan to provide more detail (or a patch) soon.

Thanks for taking a look! I'm happy to make any changes needed to ensure compatibility with standalone mode. Let me know if you'd like me to adjust the patch or if you'll handle it.

(Adding: thanks for clarifying the LESS mechanism — I’ll wait for your guidance before making further changes.)

Change #1222800 abandoned by Aarohisharma3:

[VisualEditor/VisualEditor@master] Use CSS variables for link annotation active state

https://gerrit.wikimedia.org/r/1222800

A colleague of mine says:

in ve-core we load in codex-design-tokens/theme-wikimedia-ui.less and use the variables from there, which in MediaWiki should use the correct CSS variable
You'll need to check which variables are actually available in that less file as I think it was snapshotted a while ago

It looks like the less variables @background-color-neutral is available, but we don't have one for your other variable yet. I'll have a look at updating that vendored file.

Thanks for the clarification, Zoe!

I’ll check "codex-design-tokens/theme-wikimedia-ui.less" and update the patch to use only the required LESS variables that currently exist in that file (e.g. "@background-color-neutral"). For the missing variable, I’ll hold off until the vendored tokens are updated.

Once that file is updated upstream, I can switch to the proper CSS variable mapping in a follow-up.

Thanks again for the guidance!

Change #1224740 had a related patch set uploaded (by Aarohisharma3; author: Aarohisharma3):

[VisualEditor/VisualEditor@master] Use Codex design tokens for link annotation active state

https://gerrit.wikimedia.org/r/1224740

Hi, so now I updated the patch to use only LESS variables from the vendored Codex design tokens!

I've submitted a patch that addresses this issue: https://gerrit.wikimedia.org/r/c/VisualEditor/VisualEditor/+/1224740

What I implemented:

Added @import '../../../../lib/codex-design-tokens/theme-wikimedia-ui.less'; to ve.ce.LinkAnnotation.less
Replaced hardcoded colors with LESS variables:
Border: @border-color-progressive--hover (instead of #c6e0ff)
Background: @background-color-progressive-subtle (instead of #e6f1ff)
and the good part is, both of them are available in the current vendored Codex file.

This approach:
✓ Works in standalone VisualEditor mode
✓ Compiles properly via LESS
✓ Uses Codex design tokens that compile to CSS custom properties, enabling dark mode support when integrated with MediaWiki
✓ Follows the same pattern as other VE style files

The patch builds successfully and all tests pass. Please let me know if any adjustments are needed!

Change #1224740 merged by jenkins-bot:

[VisualEditor/VisualEditor@master] Use Codex design tokens for link annotation active state

https://gerrit.wikimedia.org/r/1224740

Change #1230338 had a related patch set uploaded (by Rehan_khan_78; author: Rehan_khan_78):

[VisualEditor/VisualEditor@master] ve.ce.LinkAnnotation: Use Codex design tokens for active state

https://gerrit.wikimedia.org/r/1230338

I've pulled the latest version of standalone ve, and it looks like the highlight is correctly respecting dark mode. We'll need to pull through ve core to VisualEditor before this is reflected on mw.

Screenshot 2026-01-22 at 14.32.48.png (380×852 px, 53 KB)

Change #1230406 had a related patch set uploaded (by DLynch; author: DLynch):

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (6ffac7f7f)

https://gerrit.wikimedia.org/r/1230406

Change #1230338 abandoned by Esanders:

[VisualEditor/VisualEditor@master] ve.ce.LinkAnnotation: Use Codex design tokens for active state

https://gerrit.wikimedia.org/r/1230338

The pull-through ticket at https://gerrit.wikimedia.org/r/c/mediawiki/extensions/VisualEditor/+/1230406 which updates the VisualEditor extension has been approved, so it should go out on next week's train and should be available everywhere, including enwiki, by Thursday.

Change #1230406 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (6ffac7f7f)

https://gerrit.wikimedia.org/r/1230406