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

Dark theme contrast #5334

Open
oreqizer opened this issue Jun 29, 2022 · 10 comments
Open

Dark theme contrast #5334

oreqizer opened this issue Jun 29, 2022 · 10 comments
Labels
design [core label] enhancement [core label] theme Feedback for theme configuration, accessibility, visual issues, etc

Comments

@oreqizer
Copy link

oreqizer commented Jun 29, 2022

The dark theme's blue color, and some other colors, have quite low contrast compared to the background, making them quite challenging to read, especially when outdoors.

Would appreciate better contrast, also in the file explorer on the left 💡

image

@iamnbutler
Copy link
Member

This is more of a bug than intentional, we changed something in our theme system a while back that ended up giving us these low contrasts. When I'm back from vacation I'll ship a fix for this 🙂

@MvRemmerden
Copy link

Also was very surprised by the extreme low contrast of the file tree in the left sidebar, it looks more like a bug than intentional.

@mnquintana
Copy link

@iamnbutler @JosephTLyons 👋🏽 Any plans to prioritize fixing the low contrast issue for dark themes?

I just ran the text and background colors from One Dark against the WCAG accessibility guidelines for contrast and they're currently failing.

image

The contrast ratio isn't just aesthetically too low – it's making it objectively hard to read by accessibility standards.

I checked a few other dark themes and the results are comparable across the board.

I know at least for me I get quite a headache trying to read any text in the UI chrome around the editor – I can only imagine how bad it is for someone with more substantial vision issues.

@iamnbutler
Copy link
Member

Themes are also in beta – Whatever default theme we ship for Zed will pass WCAG (likely), however:

    1. We won't ever impose contrast requirements on creators. We'll provide guardrails in the future for creators that warn and advise creators to create accessible themes, but will not enforce it. It is likely in the future whatever UI you use to download themes we will either tag "low contrast" themes, or "accessible" themes.
    1. We won't change existing themes (not our themes, existing themes like "One Dark", "Monokai", etc) to force them to be accessible. If the theme's original author decides they would like to update them for Zed of course we would welcome that once users can create themes.
    1. Until 1.0 we won't commit to a theme that meets these requirements. Our themes aren't just built by putting hex colors in, there is a complex system that we use to build them as Zed has (and will have) a massive amount of UI that needs to be theme-aware. Ideally the system will be improved so our (TBD) default theme always does this out of the box.

There is a PR here where I'm working on an update to the docs outlining our vision around themes 1.0, but it isn't ready to be merged yet. Feel free to join the discussion here: zed-industries/docs#16

We also have a place to discuss themes and UI in discord here: https://discord.com/channels/869392257814519848/995403703894954060

@JosephTLyons JosephTLyons added the enhancement [core label] label Jun 18, 2023
@porsager
Copy link

Is there any update on this?

@JosephTLyons JosephTLyons transferred this issue from zed-industries/community Jan 24, 2024
@thedocbwarren
Copy link

Would be great to use the theme and be able to set the background color of the editor to black. I want One Dark pro and a black editor background.

@bennetbo
Copy link
Collaborator

@thedocbwarren You should be able to achieve this by using theme overrides, in your settings file you can add something like this:

"experimental.theme_overrides": {
    "editor.background": "#000000"
},

@alexlatif
Copy link

@bennetbo i cannot seem to get these settings to work. is there anyway to do this to the overall theme contrast between font and background?

@isaac-mcfadyen
Copy link

Just to chime in here: I have somewhat poor vision and the default low contrast actually made Zed unusable for me as I couldn't read the text on the sidebar.

Theme overrides partially fixed this - however it would seem logical to update the core themes to be accessible by default (as things should be with a modern code editor).

@notpeter notpeter added the theme Feedback for theme configuration, accessibility, visual issues, etc label Aug 23, 2024
@pavles6
Copy link

pavles6 commented Sep 10, 2024

If you are looking for an alternative to default One Dark but with enhanced color contrast and better readability, I've recently published a theme that aims to accomplish just that: https:/pavles6/one-dark-darkened

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design [core label] enhancement [core label] theme Feedback for theme configuration, accessibility, visual issues, etc
Projects
None yet
Development

No branches or pull requests