Cookie Consent by Free Privacy Policy Generator 📌 How to create a custom VSCode theme


✅ How to create a custom VSCode theme


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

The Plan

Okay, here's the deal. You're a coder, and you LIVE in your IDE. With so much time spent there, you want your colors to be exactly what you want! I hope to walk you step by step through the process of creating and publishing your own theme to the VSCode marketplace. Who cares if you're the only one who installs it!

Prerequisites

You'll need a few things to get started. A few of these are obvious...bear with me.

  • The internet
  • Visual Studio Code
  • Node.js
  • NPM (if you have node installed, you probably have this)
  • A browser
  • A Microsoft account
  • An Azure DevOps account (I'll walk you through how to set this up below)

Software

Install the needed software

npm install -g yo generator-code vsce

Create The Theme

Navigate to where you want your theme directory to live run yo code and choose the "New Color Theme" option, followed by "No, start fresh" then follow the remaining prompts to name and create your new theme. You can now open the project and edit the themes/your-theme-name.json file.

Theme Tips

  • If you have an existing theme you use that is "almost" right, you can generate a json file to work with by going to the command pallete in VSCode CMD + SHIFT + P and choosing "Developer: Generate Color Theme From Current Settings"
  • You can find what certain color scopes are by going to the command pallete in VSCode CMD + SHIFT + P and choosing "Developer: Inspect Editor Tokens and Scopes" and selecting the text you want to change.

Accounts

We'll need to set up a couple accounts to prep for publishing your theme.

Azure DevOps

  1. Go to dev.azure.com
  2. Click "Start free" and login with your microsoft account.
  3. Name your DevOps organization
  4. Click on the user settings icon in the top right, and choose "Personal access tokens" from the dropdown.

  5. Create a new access token
  • Name - Name the token whatever you want
  • Organization - Choose "All accessible organizations" from the dropdown
  • Expiration - Choose "Custom defined" and choose a date, I chose a date as far in the future as I could (a year).
  • At the bottom of the popup click "Show all scopes" and check the "Manage" box in the "Marketplace" section
  • Create the access token
  • Copy the token and save it somewhere safe
  • Note: You may not see the token listed after you create it. This is because the filter at the top is likely set to your organization. Click the access scope dropdown and choose "All accessible organizations" and your token should show up.

Visual Studio Marketplace

  1. Go to marketplace.visualstudio.com/manage
  2. Create a publisher
  • Fill out the name field (id should automatically be generated based on the name)
  • Name and id are the only required fields, but fill out the others as desired.
  • Hit "Create" and prove you aren't a robot with the popup image challenge.

Final Prep

We're almost there, we just need to tweak a few things in the project to match the accounts you created above.

  1. Open package.json in your theme project and add the following
"package": "YourVSMarketplaceID",
"keywords": [
  "some",
  "descriptive",
  "keywords",
],

Publishing

At this point all the hard stuff is done. You can now publish you theme. First login to vsce with the publisher id from Visual Studio Marketplace, and the personal access token from Azure DevOps. Then you can package and publish your extension!

vsce login your_publisher_id
vsce package
vsce publish

Helpful Links / Examples

vscode-material-icon-theme
monospace-theme

...

✅ How to create a custom VSCode theme


📈 38.42 Punkte

✅ Debug Diary: Vscode Extension Development Host Can't Fully Simulate Actual Vscode


📈 28.59 Punkte

✅ How to Create and Deploy a Custom Theme for VS Code


📈 24.13 Punkte

✅ How to create a custom Chrome theme


📈 24.13 Punkte

✅ How to create a custom Chrome theme


📈 24.13 Punkte

✅ How To Create A Custom Color Theme For Firefox


📈 24.13 Punkte

✅ How To Create A Custom Color Theme For Firefox


📈 24.13 Punkte

✅ A theme for every decade #vscode #coding #themes


📈 23.61 Punkte

✅ Making a VSCode theme the smart way


📈 23.61 Punkte

✅ How you can create your own custom chatbot with your own custom data using Google Gemini API all for free


📈 22.91 Punkte

✅ Boost Your Code Review Game with Custom VSCode Shortcuts ⌨️


📈 22.39 Punkte

✅ Code faster with custom VScode snippets


📈 22.39 Punkte

✅ CVE-2019-17231 | OneTone Theme up to 3.0.6 on WordPress theme-functions.php Stored cross site scripting


📈 18.62 Punkte

✅ Demon Forums Theme 2019 [PREMIUM THEME]


📈 18.62 Punkte

✅ CVE-2019-17535 | Gila CMS up to 1.11.4 Blog Theme/Mag Theme blog-list.php search cross site scripting


📈 18.62 Punkte

✅ Nulled.ch Theme 2019 [PREMIUM THEME]


📈 18.62 Punkte

✅ CVE-2023-45556 | MyBB 1.8.33 Theme Management Theme Name cross site scripting (GHSA-4xqm-3cm2-5xgf)


📈 18.62 Punkte

✅ You can now match Microsoft Launcher's theme with your phone's theme


📈 18.62 Punkte

✅ WordPress WoodMart Theme < = 7.1.1 - Theme License Options Change via CSRF


📈 18.62 Punkte

✅ Low CVE-2016-10994: Truemag theme project Truemag theme


📈 18.62 Punkte

✅ CVE-2022-41477 | WeBid up to 1.2.2 admin/theme.php theme server-side request forgery


📈 18.62 Punkte

✅ How to set light theme for apps with Windows 10 dark theme


📈 18.62 Punkte

✅ How to set light theme for apps with Windows 10 dark theme


📈 18.62 Punkte

✅ theme.sh - A multi terminal theme selection script.


📈 18.62 Punkte

✅ How to fix light theme apps with dark theme on macOS


📈 18.62 Punkte

✅ How to Install Numix Circle Icon Theme and Numix Theme in Ubuntu – A Best Ubuntu Icon Pack


📈 18.62 Punkte

✅ How to fix light theme apps with dark theme on macOS


📈 18.62 Punkte

✅ Grub Customizer: "theme doesn't contain THEME.txt"


📈 18.62 Punkte

✅ How to Install a Theme or a New Theme on WordPress


📈 18.62 Punkte

✅ PS4 Theme: PS2-Interface dank Legacy Dashboard Dynamic Theme


📈 18.62 Punkte











matomo

Datei nicht gefunden!