rose-pine / rose-pine/vscode

Different colors for editor vs other elements for better visual distinction

Open
#98 6 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

help wanted
Dominant language
JavaScript
Stars
600
Forks
31
PR merge metrics
No merged PRs in 30d

Description

First, thank you for the Rose Pine theme—it’s visually stunning and a pleasure to use. However, I would like to highlight an accessibility issue with the current VS Code implementation

Accessibility Issue:

The current color scheme uses the same shade across the sidebar, other panes, and the editor area. While this creates a cohesive and aesthetically pleasing look, it can make it challenging to intuitively distinguish between different sections of the editor, especially during prolonged usage. This lack of visual distinction can be an accessibility issue for many users, particularly those with visual processing difficulties. Even for those without particular visual accessibility issues, this increases cognitive load, which can impact focus

Suggestion:

  • Introduce slightly different background colors for the sidebar, other panes (such as the file explorer, top pane, etc.), and the main editor area.
  • The differentiation doesn’t need to be drastic—subtle variations would be sufficient to provide a clear visual distinction between these sections.

Contributor guide

Open the contributing guide

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 inspecting the VS Code theme color definitions that control the sidebar, other panes, and editor background. Compare the current colors in VS Code and introduce subtle distinctions that improve section boundaries without disrupting the Rose Pine appearance; visually verify the result across those areas.

Written by the indexing model from the issue text.

Assessment

Tech stack
vscode
Domain
accessibility, design
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.