PrismJS / PrismJS/prism

Light/dark mode support

Open
#3,938 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
JavaScript
Stars
13k
Forks
1.4k
Avg merge
15h 36m
Merged PRs (30d)
3

Description

Motivation
In the recent years, browser support for the light/dark modes are getting mature, and more and more websites are adding dark modes (or light modes if they were dark to begin with).

While it is not an absolute requirement for a syntax highlight theme to support both modes (e.g. sometimes it's fine to have dark code background on a light background web page), it is a useful functionality in many situations.

I am currently attempting to add dark mode support to my own theme, and I think it is in general something worth considering at the project level for Prism JS.

Description
Examine the existing official themes, and consider adding alternative light/dark modes for some of them.

Revise the website for users to preview both modes.

Consider adding a dark mode to the website itself (don’t you just love how meta this is?)

Alternatives
The obvious alternative is to provide an easy way for a user to specify two themes simultaneously, one for light theme and one for dark.

I think that people usually expect everything else (border width, font, spacing, etc) does not change between the light and the dark theme, so regardless what we do, the end result would not be people freely mix and match any light theme with any dark theme, so this alternative might be too much effort for too little gain.

Contributor guide

No contributing guide indexed for this repository

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 by reviewing the existing official themes and the Prism website's theme preview. Determine which themes and website surfaces would need coordinated light and dark previews, and clarify whether the project should support paired themes or add alternate theme modes. Done should include an agreed scope and working light/dark previews, but the issue does not name files or tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.