Background

Currently, highlighted computer code displays white-on-white text in dark-mode. The purpose of this task is to determine how we can make highlighted computer code compatible with dark-mode. e.g. https://en.wikipedia.org/wiki/Functional_programming?vectornightmode=1

code in light-mode	code in dark-mode

there are actually four types of potential computer code generated by wikitext:

• Blocks of syntax highlighted code
• Blocks of preformatted text (<pre> tags, works in dark-mode)
• Inline syntax highlighted code
• Inline preformatted text (<code> tags, works in dark-mode)

User story

As someone reading Wikipedia in dark-mode, I expect highlighted computer code to be legible in dark-mode. Ideally, I expect the look of computer code to match the rest of the dark-mode color palette.

Requirements

Determine how we can make computer code legible in dark-mode. Text should not appear white-on-white or black-on-black.

Acceptance criteria

Open questions:

• How does code syntax highlighting even work in Mediawiki? Do we use a third-party library?
• If we are using a third-party library for syntax highlighting:
  • Does the library support theming?
  • Is there an existing dark theme we could use for syntax highlighting?
  • How can we apply that theme to our version of dark mode?
• What's the simplest way we can achieve legibility for computer code? Should we apply a .notheme or .skin-invert class to it?

This task was created by Version 1.0.0 of the Web team task template using phabulous