- Open Extensions sidebar panel in VS Code.
View → Extensions
- Search for
Ash Theme
- Click on Ash Theme
- Click Install to install it
- Click Reload to reload the editor
- Code > Preferences > Color Theme > Ash Theme select dark or light theme, as per your preferences
Steps to create a new theme in VS Code
- install yo
npm install -g yo
- Install generator (we are using code)
npm install generator-code -g
- Initilize a code using yo
npx yo code
This command will guide you through setting up your extension, including selecting the theme type.
- Develop Your Theme
Open the project folder in your preferred code editor.
Navigate to the themes
folder in your project directory. This is where you'll define your theme's color scheme and styling.
Edit the .json
file in the themes
folder to define the color scheme and other theme-related settings. You can also use a tool like "Theme Color Picker" in VS Code to help you design the color palette.
- Test your Theme
use F5
to start a dev vscode.
There Select your theme.
To change your theme in the new vscode window use CTRL + K
+ CTRL + T
. Now a list of themes appear, select your development theme, it's shown there.
- Publish
vsce login <publisher_id>
vsce publish
All code in CLI or Terminal
Here are some pics showcasing the Light and Dark Mode side-by-side, Ash Light Theme and Ash Dark Theme Respectively
LIGHT | DARK |
---|---|
Enjoy!