facebook / facebook/lexical

Feature: color mode support for shiki

Open
#8,108 0 comments 2 reactions 0 assignees View on GitHub
code blocks enhancement
Dominant language
TypeScript
Stars
23.9k
Forks
2.2k
Avg merge
1d 16h
Merged PRs (30d)
61

Description

## Description

Currently, I identify two issues with Shiki Code Hightlight:
1. I am unable to change the colors on the go (dark/light mode toggle).
- I tried multiple approaches. Maybe I'm doing something wrong.
1. The colors are stored in style attribute as rgb values. This means they will remain in the scheme they are written in even after exporting to html.
- I export html and store it in the db, then display html instead of rendering lexical editor in non-edit mode.

Users will be able to see the code highlight in their preferred mode (potentially even theme).

Use `vars` instead of rgb values.

## Impact

Basically anyone with dual color scheme.

Contributor guide

Open the contributing guide

Research direction

No file or test is named in the issue. Start by locating the Shiki code-highlighting integration and trace how it produces inline RGB styles; then review the exported HTML path and color-mode behavior. Done means highlighting responds to dark/light mode changes and exported HTML preserves a mode-appropriate, changeable color scheme.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.