Plastic

Will Stone

|
23,750 installs
| (22) | Free
A simple theme.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Plastic

A simple syntax and UI theme for Visual Studio Code.

Notable features

  • Dark UI elements for all-day coding.
  • Small colour palette to avoid visual overload.
  • Additional deprioritised-punctuation theme; concentrate on the content.

Screenshot

Colours

Inspired by Atom's One Dark theme, yet simpler and darker.

Colour names provided by Chirag Mehta's fantastic Name That Colour website.

Syntax

  • #5c6370 Shuttle Gray #5c6370 - Comments
  • #d19a66 Whiskey #d19a66 - Functions
  • #e06c75 Sunglo #e06c75 - Keywords
  • #56b6c2 Fountain Blue #56b6c2 - Primitives
  • #abb2bf Cadet Blue #abb2bf - Punctuation
  • #61afef Cornflower Blue #61afef - Storage
  • #98c379 Olivine #98c379 - Strings
  • #e5c07b Harvest Gold #e5c07b - Tags
  • #D2D6db Iron #D2D6db - Variables

UI

  • #e06c75 Sunglo #e06c75 - Primary: buttons, activity-bar badge
  • #61afef Cornflower Blue #61afef - Secondary: find highlight, bracket match etc.
  • #E9D16C Rob Roy #E9D16C - Warning: squiggly underlines, find match errors etc.
  • #D74E42 Valencia #D74E42 - Error: squiggly underlines, find match errors etc.
  • #080A0F Bunker #080A0F - Borders: borders that separate the panels, sidebars, tabs etc.
  • #21252b Shark #21252b - Background: editor, titlebar, and activity bar background
  • #181A1F Woodsmoke #181A1F - Panels: sidebar, terminal, inactive tabs etc.
  • #5F6672 Shuttle Gray #5F6672 - Text Subtle: line numbers, muted items
  • #A9B2C3 Cadet Blue #A9B2C3 - Text
  • #D4D7D9 Iron #D4D7D9 - Text Active: active tab, active line number, active list text etc.
  • #A9B2C31A Cadet Blue (1A opacity) #A9B2C31A - Highlight: ui flourishes: whitespace, indent guide, ruler, line highlight
  • #A9B2C333 Cadet Blue (33 opacity) #A9B2C333 - Highlight Active: active indent guide, selection, search match
  • #D4D7D9 Iron #D4D7D9 - Highlight Border: search match borders
  • #98C379 Olivine #98C379 - Git Untracked
  • #D19A66 Whiskey #D19A66 - Git Modified
  • #E06C75 Sunglo #E06C75 - Git Deleted

Contribute

Themes can always be improved and tweaked so please feel free to log issues and send pull requests. However, please keep in mind that this theme strives to remain simple and language agnostic; for example, please do not ask for blah.blah.php or blah.blah.c scopes to be added. Also, and this is purely personal, I'm a JavaScript developer and therefore anything that alters the colours for the JavaScript language will receive much more scrutiny before being merged in.

Clone the repository to .vscode/extenstions/(remember to remove any other installed versions of Plastic), run yarn to install dependencies, and yarn docs to serve the documentation page.

Use Microsoft's theme color reference for UI theming help.

You'll notice that the syntax is grouped by colour instead of scope. I find this much nicer to maintain.

Happy hacking :)

License

MIT

Development

The themes are created using a generator. There are two main files for this:

theme-builder/theme.yaml

This contains the colour palette and their associated hex values. From here on, you use the colour names for each variable. There are then groups of variables for terminal, syntax, and UI.

theme-builder/config.yaml.

If you are only changing colours, you shouldn't need to edit this file. This is where the theme scopes are associated to the variables in the previous file; when VSCode updates bring new themeable items, they are added here.

Build

Install the dependencies using Yarn:

yarn

Then compile the theme files to the themes folder using:

yarn build-vscode