Import Themes from VSCode #7111

michealp-coder · 2024-01-30T20:57:19Z

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 · 2024-01-30T20:58:46Z

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 · 2024-01-31T01:24:02Z

@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 · 2024-01-31T02:56:00Z

@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:

Found a VS Code theme I liked
Found the location of that theme package in ~/.vscode/extensions and found the internal .json file
Did a cargo run <location_of_theme.json>
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>
    ]
}

Saved that file into ~/.config/zed/themes
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 · 2024-01-31T06:46:03Z

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

michealp-coder · 2024-01-31T15:48:26Z

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 · 2024-01-31T16:47:26Z

@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 · 2024-02-01T00:06:59Z

@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 · 2024-02-01T01:17:51Z

@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:

Found a VS Code theme I liked

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

Did a cargo run <location_of_theme.json>

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>
    ]
}
Saved that file into ~/.config/zed/themes

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 · 2024-02-01T16:59:06Z

@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 · 2024-02-01T17:09:56Z

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 · 2024-02-01T18:46:40Z

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 · 2024-02-01T18:48:09Z

@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 · 2024-02-01T23:18:00Z

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 · 2024-02-02T00:24:49Z

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 · 2024-02-02T09:19:28Z

@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 · 2024-02-02T09:27:53Z

monokai-color-theme.json

@Raees678

khanakia · 2024-05-02T06:44:09Z

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 · 2024-07-13T03:16:43Z

@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 · 2024-08-29T18:18:31Z

@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

an1ndra · 2024-11-06T18:03:29Z

I have tried to use theme_importer to convert SpaceBox-color-theme.json theme to Zed theme, but getting clang error. Can some one help me to convert it to Zed theme.

$ cargo run SpaceBox-color-theme.json 
   Compiling proc-macro2 v1.0.89
   Compiling serde v1.0.209
   Compiling libc v0.2.161
   Compiling typeid v1.0.2
error: linking with `clang` failed: exit status: 1
  |

also tried this cargo run -p theme_importer -- ~/Downloads/vitesse-dark-soft.json but same result

michealp-coder changed the title ~~Import Themes from VSCode, Sublime, etc.~~ Import Themes from VSCode Jan 30, 2024

github-actions bot mentioned this issue Jan 31, 2024

Top-Ranking Issues (All Time) 📊 #5393

Open

github-actions bot mentioned this issue Jan 31, 2024

Top-Ranking Issues (last 7 days) 📊 #6952

Open

JosephTLyons added enhancement [core label] theme Feedback for theme configuration, accessibility, visual issues, etc labels Feb 1, 2024

JosephTLyons closed this as completed Feb 1, 2024

mrnugget mentioned this issue Jul 8, 2024

Zed downloads NodeJS binary and npm packages from Internet without user’s consent #12589

Open

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Import Themes from VSCode #7111

Import Themes from VSCode #7111

michealp-coder commented Jan 30, 2024 •

edited

Loading

JosephTLyons commented Jan 30, 2024 •

edited

Loading

michealp-coder commented Jan 31, 2024

JosephTLyons commented Jan 31, 2024 •

edited

Loading

CodeNinjaUG commented Jan 31, 2024

michealp-coder commented Jan 31, 2024

JosephTLyons commented Jan 31, 2024 •

edited

Loading

michealp-coder commented Feb 1, 2024 •

edited

Loading

silite commented Feb 1, 2024

maxdeviant commented Feb 1, 2024

maxdeviant commented Feb 1, 2024

JosephTLyons commented Feb 1, 2024

JosephTLyons commented Feb 1, 2024

blackmann commented Feb 1, 2024 •

edited

Loading

JosephTLyons commented Feb 2, 2024

Raees678 commented Feb 2, 2024

blackmann commented Feb 2, 2024

khanakia commented May 2, 2024

Edgar200021 commented Jul 13, 2024

tarngerine commented Aug 29, 2024

an1ndra commented Nov 6, 2024

Import Themes from VSCode #7111

Import Themes from VSCode #7111

Comments

michealp-coder commented Jan 30, 2024 • edited Loading

JosephTLyons commented Jan 30, 2024 • edited Loading

michealp-coder commented Jan 31, 2024

JosephTLyons commented Jan 31, 2024 • edited Loading

CodeNinjaUG commented Jan 31, 2024

michealp-coder commented Jan 31, 2024

JosephTLyons commented Jan 31, 2024 • edited Loading

michealp-coder commented Feb 1, 2024 • edited Loading

silite commented Feb 1, 2024

maxdeviant commented Feb 1, 2024

maxdeviant commented Feb 1, 2024

JosephTLyons commented Feb 1, 2024

JosephTLyons commented Feb 1, 2024

blackmann commented Feb 1, 2024 • edited Loading

JosephTLyons commented Feb 2, 2024

Raees678 commented Feb 2, 2024

blackmann commented Feb 2, 2024

khanakia commented May 2, 2024

Edgar200021 commented Jul 13, 2024

tarngerine commented Aug 29, 2024

an1ndra commented Nov 6, 2024

michealp-coder commented Jan 30, 2024 •

edited

Loading

JosephTLyons commented Jan 30, 2024 •

edited

Loading

JosephTLyons commented Jan 31, 2024 •

edited

Loading

JosephTLyons commented Jan 31, 2024 •

edited

Loading

michealp-coder commented Feb 1, 2024 •

edited

Loading

blackmann commented Feb 1, 2024 •

edited

Loading