# Syntax theme for Atom, VSCode, and Sublime

I've designed a syntax theme that works in the most popular text editors for front-end development, including Visual Studio Code, Sublime Text, and Atom.

## A dark syntax theme

The syntax theme is dark with high-contrast colours. The primary colour is a deep pink, with complementary colours including purple, blue, orange, and green. ![Syntax theme LESS syntax](https://raw.githubusercontent.com/tinacious/atom-tinacious-design-syntax/master/images/00_OneDark-ui-theme.png)

## A syntax theme for JavaScript and CSS

When developing this theme, I wanted it to look great in JavaScript, since that is where I spend a lot of my time. ![Photo of Tinacious Design syntax theme in an Ember.js application](https://raw.githubusercontent.com/tinacious/atom-tinacious-design-syntax/master/images/photo.jpg) ![Screenshot of Tinacious Design syntax theme in an ES6 React app with JSX](https://raw.githubusercontent.com/tinacious/atom-tinacious-design-syntax/master/images/04_typescript-react-jsx.png)

## Editor support

The theme is supported in a number of editors:

-   Visual Studio Code
-   Sublime Text
-   Atom

### Visual Studio Code

You can get the theme from the [Visual Studio Marketplace page](https://marketplace.visualstudio.com/items?itemName=tinaciousdesign.theme-tinaciousdesign). The feature set has been updated in April 2020. You can read about the [updated features here](https://tinaciousdesign.com/portfolio/visual-studio-code-theme/). You can also install it right from VSCode by running the following command in the command palette:

```
ext install theme-tinaciousdesign
```

It should take you to the extensions tab. 

![Tinacious Design Light theme](https://cdn.hashnode.com/res/hashnode/image/upload/v1606868607270/Ee0rlwdHJ.png)

![Tinacious Design Dark theme](https://cdn.hashnode.com/res/hashnode/image/upload/v1606868632323/Fk46eixEF.png)

### Sublime Text

You can get the theme for Sublime from [Package Control](https://packagecontrol.io/packages/Tinacious%20Design%20colour%20scheme). It's available from the install theme command—simply search "Tinacious Design." 


![Installing Tinacious Design syntax theme in Sublime Text](https://cdn.hashnode.com/res/hashnode/image/upload/v1606868663071/j3TmE7J0u.png)

### Atom

You can get it from the [Atom themes site](https://atom.io/themes/tinacious-design-syntax). You can also install it right from Atom—just go to the Settings, click on the Install tab, click Themes beside the search bar, and type in "Tinacious" or "tinacious-design." 

![Installing Tinacious Design syntax theme from the Install tab in Atom](https://cdn.hashnode.com/res/hashnode/image/upload/v1606868690284/mJfk-lZV9.png)