Different colors for editor vs other elements for better visual distinction

[Risinggoblin]

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]

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]

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"

[beetrootpaul]

@Risinggoblin thanks a lot!

One more aspect which lacks a visual distinction for me are shadows when one sections scrolls behind another, like here on screenshots (in Rosé Pine the shadow color is there, just hardly visible). Do you maybe know how to modify those?

another theme	Rosé Pine

[beetrootpaul]

Sorry, it was simple to find, my bad 🙂

Here is the previously suggested set of customization + additional colors for a) shadow above scrolled section and b) border around widgets like "Search" (Cmd+F):

    "workbench.colorCustomizations": {
        "[Rosé Pine Dawn]": {
            "activityBar.background": "#e9dfd8",
            "editorGroupHeader.tabsBackground": "#f2e9e1",
            "scrollbar.shadow": "#e9dfd8",
            "sideBar.background": "#f2e9e1",
            "tab.activeBackground": "#faf4ed",
            "tab.inactiveBackground": "#f2e9e1",
            "titleBar.activeBackground": "#f2e9e1",
            "widget.border": "#e9dfd8"
        },
        "[Rosé Pine Moon]": {
            "activityBar.background": "#393552",
            "editorGroupHeader.tabsBackground": "#2a273f",
            "scrollbar.shadow": "#393552",
            "sideBar.background": "#2a273f",
            "tab.activeBackground": "#232136",
            "tab.inactiveBackground": "#2a273f",
            "titleBar.activeBackground": "#2a273f",
            "widget.border": "#393552"
        },
        "[Rosé Pine]": {
            "activityBar.background": "#26233a",
            "editorGroupHeader.tabsBackground": "#1f1d2e",
            "scrollbar.shadow": "#26233a",
            "sideBar.background": "#1f1d2e",
            "tab.activeBackground": "#191724",
            "tab.inactiveBackground": "#1f1d2e",
            "titleBar.activeBackground": "#1f1d2e",
            "widget.border": "#26233a"
        }
    }

[mvllow]

Added to the wiki, I think anyone should be able to edit it so feel free to make changes there :)