Generate themes from primer design system, add accessible themes

[claytercek]

Hi!

This updates the themes so that instead of being manually written out, they are generated from the primer design system. This is similar to how the github vscode theme is generated, with the main difference being that this uses a newer version of the primer library.

This now generates a handful of themes, one for each color scheme in the primer design system:

• Github Light Default
• Github Light Colorblind
• Github Light High Contrast
• Github Light Tritanopia
• Github Dark Default
• Github Dark High Contrast
• Github Dark Tritanopia
• Github Dark Dimmed

This is a pretty significant departure from the existing repo, however it brings the themes more inline with the existing github ecosystem, and will be easier to keep up-to-date in the future.

Additionally, this PR migrates the extension.json file to the newer extension.toml format.

Also threw my name in as a package co-author as this is a significant refactor 😅

Lmk your thoughts!

[PyaeSoneAungRgn]

Thanks you so much for your PR. Please give me some time to test 🙏

[PyaeSoneAungRgn]

Thanks you so much for this awesome PR.

I think constructor color should be blue

"constructor": {
-   "color": lightDark("base/color/orange/6", "base/color/orange/2"),
+   "color": lightDark("base/color/blue/6", "base/color/blue/2"),
    "font_style": null,
    "font_weight": null
},

since github-vscode-theme used blue color

Before:

After:

Could you please rename Github Light Default to Github Light and Github Dark Default to Github Dark? So current users can still use updated theme without need to change theme name.

[claytercek]

@PyaeSoneAungRgn good call! Just updated the constructor color and default theme names

[PyaeSoneAungRgn]

https://github.com/PyaeSoneAungRgn/github-zed-theme/releases/tag/v0.1.0 here is the new release. Thanks you so much brother.

[petermarks]

Did anyone actually try this out before releasing it? It has gone from being great to unusable. I don't have screenshots from before, but it was much closer to Github for the languages I am using.

For Typescript on Github:

In Zed now:

For GLSL on Github:

In Zed now:

Perhaps the worst issue is that, in the AI editor at least, Copilot suggestions are in the same colour as the text I'm typing which is horribly confusing.

I guess some might like this theme, but it isn't Github's theme and is completely different from how it was yesterday. Please revert this change until it is sorted.

[claytercek]

@petermarks while I'm not the package maintainer, here are some thoughts:

I'm sorry these changes weren't to your liking. In hindsight, perhaps I should've opened a discussion rather than jumping into a PR head first.

Enthusiastic feedback is usually helpful, however it's difficult to agree or sympathize when it's buried in antagonism.

The colors chosen are actually based on the GitHub VSCode theme, not the web version you're comparing it to. They use different color systems, and there are even two web themes—one for viewing code and another for editing it. The VSCode theme is more detailed, which is why it's used as the target. More info in this discussion.

Here are some screenshots comparing:

TS in VSCode:

TS in Zed:

Zed's theming isn't as sophisticated as VSCode's (yet!), so we can't replicate every nuance (like having different colors for variables and function parameters, or different colors for type references vs type declarations). So, an exact match isn't possible at this point. However the goal is, of course, to move in that direction. By no means is it perfect (it is quite orange lol), but "unusable" feels like a bit of an an overreaction.

Since this project is at version 0.1.0, it's very much a work in progress. As an open-source project, and per the README, contributions are welcome! If you have ideas for improvements, feel free to submit a PR or open a new issue with constructive criticism—the note about Copilot suggestion colors is a great example.

Github's vscode theme package has some 'classic' themes that might be closer to what you're looking for. That could be a potential route here too!

Lastly, if you'd prefer to stick with the old theme, Zed actually allows that quite easily! In the extension panel you can choose to install a specific version of an extension, v0.0.2 in this case.

Hope this helps!

[petermarks]

@claytercek thanks for your reply, and I apologise if my comment came across as aggressive. It was intended to convey the strength of my reaction, from the shock and annoyance of opening my editor to find it looking significantly different. I did not mean to be antagonistic, but I do concede that the tone was coarse. I do appreciate the time that you and others put into projects like this.

My point about "unusable", related mostly to the Copilot suggestion colour, which I found so confusing that I actually had to switch themes to do what I was trying to do. Also, I personally found the quite highly colourfulness, displeasing enough that I didn't want to use the theme in that state. I really Liked how it was before, and don't particularly like VS Code's version, so was frustrated that it had changed.

Thanks for the pointer about installing the earlier version. I'd already discovered how to manually install the earlier version in my local config, which also allows me to keep your version of the theme available, so I can go back to it and start to tweak it.

I would like to be constructive and make some improvements, but as my preference is more for Github's website choices (Dark dimmed), you (or the maintainer) may not want to accept them. IIRC VS Code has a way to see what style tags are applied to each syntactic element, which makes modifying themes a lot easier. Does Zed have such a feature?

[claytercek]

No worries, I totally get it. Frankly, my reply was more defensive than it needed to be, and apologies for that.

That's a very good question about the theming utility. AFAIK Zed sadly doesn't have a similar feature. I just found this site that could potentially help though: https://zed-themes.com/themes/edit

It's at least a bit more streamlined than saving json files and rebuilding local themes in the zed editor

[petermarks]

Thanks for the link @claytercek. I tried uploading your theme .json (from .local/share/zed/extensions/installed/github-theme/themes/github_theme.json) to start to try to tweak it, but got a message that it didn't match the schema because it has additional elements. Any idea what is wrong with it?

[EthanG45]

Just chiming with similar feedback that this was a pretty significant change to how the theme looks. My biggest complaint is the heavy use of orange vs what used to be white text. This is quite apparent in the comparison shot between VSCode and the new Zed theme here. Even in VSCode the use of orange is reduced. I understand this might be due to limitations in Zed though.

[PyaeSoneAungRgn]

Thanks for feedbacks

currently by adding these setting to setting.json can be temporary solve.

"experimental.theme_overrides": {
    "syntax": {
      "type": {
        "color": "#79c0ffff"
      },
      "variable": {
        "color": "#e1e4e8ff"
      }
    }
  }

Before:

After:

Please give us some time to adjust the dark theme.

[Scrolls-of-the-nebulaic-whispers]

Lastly, if you'd prefer to stick with the old theme, Zed actually allows that quite easily! In the extension panel you can choose to install a specific version of an extension, v0.0.2 in this case.

Hope this helps!

Thank you for the suggestion. I am also not a fan of the update, so I rushed here right away to know if anything can be done to revert it for me 😅

[PyaeSoneAungRgn]

I think this PR brings the themes more inline with the existing github ecosystem, and will be easier to keep up-to-date in the future. We just need to adjust. Please give us some time for this.

If you want to use v0.0.2, you can do it like this.

1. Download https://github.com/PyaeSoneAungRgn/github-zed-theme/releases/download/v0.0.2/github_theme_v002.json
2. Place at ~/.config/zed/themes

curl -L -O https://github.com/PyaeSoneAungRgn/github-zed-theme/releases/download/v0.0.2/github_theme_v002.json
cp github_theme_v002.json ~/.config/zed/themes/github_theme_v002.json

@petermarks @EthanG45 @Scrolls-of-the-nebulaic-whispers I hope this will help 😃.

[EthanG45]

@PyaeSoneAungRgn the theme override you shared solve my main issue being that strong orange on variables. I support the PR otherwise since I'd rather we stay up to date by generating the theme similar to how the VSCode version does it.

[PyaeSoneAungRgn]

Totally agree

[petermarks]

Thanks for your comments @PyaeSoneAungRgn. Despite my complaints, I understand the benefit of the PR, I just think you should have given yourselves some time "to adjust" before pushing it out as a release. It makes sense to track what is being offered by VS Code, but as I said in my earlier comments I don't really like the variants VS Code has, and much prefer what Github actually does on the website, which your earlier version was much closer to. It would be nice to see something like that in the pack offered here going forward. @claytercek suggests that the VS Code pack has a "classic" variant, but I just checked in VS Code and I don't see that option in the official Github offering.

[joshuay03]

Hello, I'm a big fan of this theme, but this PR has made some significant changes that makes it unusable for me on the latest version (both aesthetically and functionally).

The comparisons below are between v0.0.2 using 'GitHub Dark' and v0.1.0 using 'GitHub Dark Dimmed' (which seemed to be the closest to what the default dark one was before) using Ruby:

Project panel before	Project panel after

Ruby code before	Ruby code after

The search (CMD+F / CMD+SHIFT+F) is pretty much unusable cause the highlight blends in with the background:

Search highlight before	Search highlight after

[PyaeSoneAungRgn]

hello @joshuay03

Currently you can use v0.0.2 by doing it like this.

1. Download https://github.com/PyaeSoneAungRgn/github-zed-theme/releases/download/v0.0.2/github_theme_v002.json
2. Place at ~/.config/zed/themes

curl -L -O https://github.com/PyaeSoneAungRgn/github-zed-theme/releases/download/v0.0.2/github_theme_v002.json
cp github_theme_v002.json ~/.config/zed/themes/github_theme_v002.json

Please give me some time. i will create another PR to update dark theme.