Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/dev-ashishranjan/ash-theme

Ash Theme is a dark/light VSCode theme specially designed for developers
https://github.com/dev-ashishranjan/ash-theme

json nodejs theme-development ui-ux vscode-theme

Last synced: 7 days ago
JSON representation

Ash Theme is a dark/light VSCode theme specially designed for developers

Host: GitHub
URL: https://github.com/dev-ashishranjan/ash-theme
Owner: dev-AshishRanjan
License: mit
Created: 2023-08-16T13:21:01.000Z (over 1 year ago)
Default Branch: dev
Last Pushed: 2023-08-17T14:40:08.000Z (over 1 year ago)
Last Synced: 2024-11-12T06:16:01.402Z (2 months ago)
Topics: json, nodejs, theme-development, ui-ux, vscode-theme
Homepage: https://marketplace.visualstudio.com/items?itemName=KumarAshishRanjan.ash-theme-4971
Size: 2.44 MB
Stars: 1
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

        ![Ash-Theme](https://socialify.git.ci/dev-AshishRanjan/Ash-Theme/image?description=1&descriptionEditable=Introducing%20Ash-Theme%2C%20a%20cutting-edge%20solution%20that%20merges%20advanced%20browser%20technology%20and%20meticulous%20measurement%20strategies&font=KoHo&forks=1&issues=1&language=1&owner=1&pattern=Plus&pulls=1&stargazers=1&theme=Auto)



 

   

[![Open Source Love svg1](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)

![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat)

![Visitors](https://api.visitorbadge.io/api/visitors?path=dev-AshishRanjan%2FAsh-Theme%20&countColor=%23263759&style=flat)

![GitHub forks](https://img.shields.io/github/forks/dev-AshishRanjan/Ash-Theme)

![GitHub Repo stars](https://img.shields.io/github/stars/dev-AshishRanjan/Ash-Theme)

![GitHub contributors](https://img.shields.io/github/contributors/dev-AshishRanjan/Ash-Theme)

![GitHub last commit](https://img.shields.io/github/last-commit/dev-AshishRanjan/Ash-Theme)

  

![GitHub repo size](https://img.shields.io/github/repo-size/dev-AshishRanjan/Ash-Theme)

![Github](https://img.shields.io/github/license/dev-AshishRanjan/Ash-Theme)

![GitHub issues](https://img.shields.io/github/issues/dev-AshishRanjan/Ash-Theme)

![GitHub closed issues](https://img.shields.io/github/issues-closed-raw/dev-AshishRanjan/Ash-Theme)

![GitHub pull requests](https://img.shields.io/github/issues-pr/dev-AshishRanjan/Ash-Theme)

![GitHub closed pull requests](https://img.shields.io/github/issues-pr-closed/dev-AshishRanjan/Ash-Theme)

 



---

# Installation via VS Code

1. Open **Extensions** sidebar panel in VS Code. `View → Extensions`

2. Search for `Ash Theme`

3. Click on **Ash Theme** 

4. Click **Install** to install it

5. Click **Reload** to reload the editor

6. Code > Preferences > Color Theme > **Ash Theme**

select dark or light theme, as per your preferences

---

# Development

Steps to create a new theme in VS Code

1. install yo

  ```

  npm install -g yo

  ```

2. Install generator (we are using code)

  ```

  npm install generator-code -g

  ```

3. Initilize a code using yo

  ```

  npx yo code

  ```

  This command will guide you through setting up your extension, including selecting the theme type.

4. 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.

5. 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.

6. Publish

  ```

  vsce login 

  ```

  ```

  vsce publish

  ```

  All code in CLI or Terminal

---

# Theme Preview

Here are some pics showcasing the Light and Dark Mode side-by-side, ***Ash Light Theme*** and ***Ash Dark Theme*** Respectively

|LIGHT |DARK |

|---|---|

|![1](./images/light/1.png)|![1](./images/dark/1.png)|

|![2](./images/light/2.png)|![2](./images/dark/2.png)|

|![3](./images/light/3.png)|![3](./images/dark/3.png)|

## For more information

* [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown)

* [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/)

**Enjoy!**