Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Different colors for editor vs other elements for better visual distinction #98

Open
Risinggoblin opened this issue Sep 10, 2024 · 2 comments

Comments

@Risinggoblin
Copy link

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.
@mvllow
Copy link
Member

mvllow commented Sep 10, 2024

Thank you for bringing this up. I've been wanting to create a high contrast version for VSCode but haven't had the time. I would be happy to accept a PR for this, though. This would allow us to eventually increase syntax contrast as well without changing the base theme.

I don’t plan to change the current variants, but I’m open to adjustments if the high contrast versions aren’t sufficient.

If you have time, feel free to add some overrides to your local setup and share them here. We could include them in the readme or use them as a base for the high contrast versions.

@Risinggoblin
Copy link
Author

Thanks for considering this. I am very new to colors but still, I have attempted to make the contrast a bit better on all the three schemes. I have only used colors from the palette except for activityBar.background for Rosé Pine Dawn because none of the colors from the palette were giving a soothing contrast

See below my suggested adjustments:

Rosé Pine

        "tab.activeBackground": "#191724",
        "tab.inactiveBackground": "#1f1d2e",
        "activityBar.background": "#26233a",
        "sideBar.background": "#1f1d2e",
        "titleBar.activeBackground": "#1f1d2e",
        "editorGroupHeader.tabsBackground": "#1f1d2e"

Rosé Pine Dawn

        "tab.activeBackground": "#faf4ed",
        "tab.inactiveBackground": "#f2e9e1",
        "activityBar.background": "#e9dfd8",
        "sideBar.background": "#f2e9e1",
        "titleBar.activeBackground": "#f2e9e1",
        "editorGroupHeader.tabsBackground": "#f2e9e1"

Rosé Pine Moon

        "tab.activeBackground": "#232136",
        "tab.inactiveBackground": "#2a273f",
        "activityBar.background": "#393552",
        "sideBar.background": "#2a273f",
        "titleBar.activeBackground": "#2a273f",
        "editorGroupHeader.tabsBackground": "#2a273f"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants