Import Themes from VSCode

[michealp-coder]

I just wanted to mention that we have been working on a VS Code theme importer and that at some point, it will be public, so others can simply import whatever VS Code themes into Zed!

Originally posted by @JosephTLyons in #6659 (comment)

[JosephTLyons]

The VS Code theme importer is public now. Right now, its just tied up in the repo here. Also, tomorrow's preview release should have support for loading in user themes from a directory.

[michealp-coder]

@JosephTLyons , that's super exciting.

Question: will this be exposed in the GUI of Zed? I ask because it's not super clear to me how to use that crate from the ReadMe file.

[JosephTLyons]

@JosephTLyons , that's super exciting.

Question: will this be exposed in the GUI of Zed? I ask because it's not super clear to me how to use that crate from the ReadMe file.

Yeah, sorry, things aren't documented at the moment. I wasn't on the team who made it and I decided to give it a spin last night. What I did was:

1. Found a VS Code theme I liked
2. Found the location of that theme package in ~/.vscode/extensions and found the internal .json file
3. Did a cargo run <location_of_theme.json>
4. Copied the contents of the output and placed it into a new file that had this theme family data structure:

{
    "name": "Some name",
    "author": "Some author",
    "themes": [
            <output_of_theme_importer_here>
    ]
}

5. Saved that file into ~/.config/zed/themes
6. Restarted Zed (note that this hasn't hit Preview or Stable yet).

Sorry this is pretty informal and not great documentation, we will add some instructions and probably streamline the process a bit more going forward.

[CodeNinjaUG]

~/.config/zed/themes isnt available do we create manually or it has already been pushed in the new versions

[michealp-coder]

3. Did a cargo run <location_of_theme.json>

@JosephTLyons

Thanks for the help but I run into this error on step # 3

-ksh: cargo: not found

My environment is:

macOS 14.3
Zed 0.120.4

I assume I need to install the CLI, or install something from https://www.rust-lang.org

I'll give this a try and report back https://doc.rust-lang.org/cargo/getting-started/installation.html

Question: any word if this will be exposed in the GUI? It's such a great feature that I think so many would appreciate!

[JosephTLyons]

@michealp-coder. Oops, I made the bad assumption that users already have cargo installed. Sorry, that's silly on my part. The source is written in Rust, so you'd have to install the cargo toolchain to compile it easily, as you pointed out. If you are still having issues, hang tight, we are about to publish a small blog post on it today that might clear it up a bit.

[michealp-coder]

@michealp-coder. Oops, I made the bad assumption that users already have cargo installed. Sorry, that's silly on my part. The source is written in Rust, so you'd have to install the cargo toolchain to compile it easily, as you pointed out. If you are still having issues, hang tight, we are about to publish a small blog post on it today that might clear it up a bit.

@JosephTLyons super excited about this functionality, question though.

From the blog post, it says:

Note that you'll need to have the Zed development toolchain setup locally in order to use the theme importer.

And the development toolchain requires: Postgres, Xcode, and much much more to be installed and setup.

I don't want to come across as unappreciative, but doesn't it seem a bit excessive to have to install Postgres and Xcode just to import a theme?

[silite]

@JosephTLyons , that's super exciting.
Question: will this be exposed in the GUI of Zed? I ask because it's not super clear to me how to use that crate from the ReadMe file.

Yeah, sorry, things aren't documented at the moment. I wasn't on the team who made it and I decided to give it a spin last night. What I did was:

1. Found a VS Code theme I liked
2. Found the location of that theme package in ~/.vscode/extensions and found the internal .json file
3. Did a cargo run <location_of_theme.json>
4. Copied the contents of the output and placed it into a new file that had this theme family data structure:

{
    "name": "Some name",
    "author": "Some author",
    "themes": [
            <output_of_theme_importer_here>
    ]
}

5. Saved that file into ~/.config/zed/themes
6. Restarted Zed (note that this hasn't hit Preview or Stable yet).

Sorry this is pretty informal and not great documentation, we will add some instructions and probably streamline the process a bit more going forward.

I've built out the theme json file now, and I'm wondering how to replace the existing theme json, overriding the existing styles to achieve the replacement theme.
Where is the directory for Zed's theme json file?

[maxdeviant]

@michealp-coder. Oops, I made the bad assumption that users already have cargo installed. Sorry, that's silly on my part. The source is written in Rust, so you'd have to install the cargo toolchain to compile it easily, as you pointed out. If you are still having issues, hang tight, we are about to publish a small blog post on it today that might clear it up a bit.

@JosephTLyons super excited about this functionality, question though.

From the blog post, it says:

Note that you'll need to have the Zed development toolchain setup locally in order to use the theme importer.

And the development toolchain requires: Postgres, Xcode, and much much more to be installed and setup.

The theme_importer is runnable with fewer dependencies (the only thing you really need is Rust installed), but because it's in the Zed repo it's possible some other dependencies may need to be present in order to get the building (although Postgres is only needed to build the collab server, which isn't necessary here).

I don't want to come across as unappreciative, but doesn't it seem a bit excessive to have to install Postgres and Xcode just to import a theme?

At some point we'll have a better "golden path" for importing themes, perhaps even built-in to Zed itself, but for right now the expectation is that to use the theme_importer you do have to be able to compile (at least some of) the Zed codebase.

[maxdeviant]

I've built out the theme json file now, and I'm wondering how to replace the existing theme json, overriding the existing styles to achieve the replacement theme.
Where is the directory for Zed's theme json file?

The themes directory is ~/.config/zed/themes.

Check out the blog post for all the details of the theme system.

[JosephTLyons]

This is now shipped. There might be a bit of friction, since users have to install the necessary tools to compile the importer, but it is technically shipped, so I'm going to close this issue out. We will improve the process going forward to streamline it more, as Marshall said.

[JosephTLyons]

@michealp-coder. Oops, I made the bad assumption that users already have cargo installed. Sorry, that's silly on my part. The source is written in Rust, so you'd have to install the cargo toolchain to compile it easily, as you pointed out. If you are still having issues, hang tight, we are about to publish a small blog post on it today that might clear it up a bit.

@JosephTLyons super excited about this functionality, question though.

From the blog post, it says:

Note that you'll need to have the Zed development toolchain setup locally in order to use the theme importer.

And the development toolchain requires: Postgres, Xcode, and much much more to be installed and setup.

I don't want to come across as unappreciative, but doesn't it seem a bit excessive to have to install Postgres and Xcode just to import a theme?

We know there is a bit of friction here, but this is the first step to at least getting the ball rolling. Improvements will be made going forward.

[blackmann]

Authored a simple VSCode extension to streamline this: https://marketplace.visualstudio.com/items?itemName=degreat.theme-to-zed

It allows to select a theme directly from vscode and export it directly to the zed themes folder.

No need to download the zed repo and build stuff.

Here's Monokai in Zed

[JosephTLyons]

Authored a simple VSCode extension to streamline this: https://marketplace.visualstudio.com/items?itemName=degreat.theme-to-zed

It allows to select a theme directly from vscode and export it directly to the zed themes folder.

No need to download the zed repo and build stuff.

Here's Monokai in Zed

Amazing!!

[Raees678]

@blackmann This is awesome. Also by any chance could you share the exported json of your monokai theme? I got some different results with some borders etc missing during my export using your tool (probably because we are using different base themes in VSCode).

[blackmann]

monokai-color-theme.json

@Raees678

[khanakia]

Getting this error using this extension https://marketplace.visualstudio.com/items?itemName=degreat.theme-to-zed

Failed to export theme: Default Dark Modern (Error: Command failed: /usr/local/bin/theme_importer "/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/theme-defaults/themes/dark_modern.json" Error: failed to parse theme "/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/theme-defaults/themes/dark_modern.json" Caused by: missing field `tokenColors` at line 1 column 4479 )

[Edgar200021]

@JosephTLyons , that's super exciting.
Question: will this be exposed in the GUI of Zed? I ask because it's not super clear to me how to use that crate from the ReadMe file.

Yeah, sorry, things aren't documented at the moment. I wasn't on the team who made it and I decided to give it a spin last night. What I did was:

1. Found a VS Code theme I liked

2. Found the location of that theme package in `~/.vscode/extensions` and found the internal `.json` file

3. Did a `cargo run <location_of_theme.json>`

4. Copied the contents of the output and placed it into a new file that had this theme family data structure:

{
    "name": "Some name",
    "author": "Some author",
    "themes": [
            <output_of_theme_importer_here>
    ]
}

5. Saved that file into `~/.config/zed/themes`

6. Restarted Zed (note that this hasn't hit Preview or Stable yet).

Sorry this is pretty informal and not great documentation, we will add some instructions and probably streamline the process a bit more going forward.

To be honest, I have not understood how to run cargo run, from where exactly, there should be a file cargo.toml, can you describe the steps in detail?

[tarngerine]

@Edgar200021 you have to follow all the steps from https://zed.dev/docs/development, including cloning the zed repo. then you run that cargo command within the /zed repo