A simple syntax and UI theme for Visual Studio Code.
- Dark UI elements for all-day coding.
- Small colour palette to avoid visual overload.
- Additional deprioritised-punctuation theme; concentrate on the content.
Inspired by Atom's One Dark theme, yet simpler and darker.
Colour names provided by Chirag Mehta's fantastic Name That Colour website.
Shuttle Gray #5c6370 - Comments
Whiskey #d19a66 - Functions
Sunglo #e06c75 - Keywords
Fountain Blue #56b6c2 - Primitives
Cadet Blue #abb2bf - Punctuation
Cornflower Blue #61afef - Storage
Olivine #98c379 - Strings
Harvest Gold #e5c07b - Tags
Iron #D2D6db - Variables
Sunglo #e06c75 - Primary: buttons, activity-bar badge
Cornflower Blue #61afef - Secondary: find highlight, bracket match etc.
Rob Roy #E9D16C - Warning: squiggly underlines, find match errors etc.
Valencia #D74E42 - Error: squiggly underlines, find match errors etc.
Bunker #080A0F - Borders: borders that separate the panels, sidebars, tabs etc.
Shark #21252b - Background: editor, titlebar, and activity bar background
Woodsmoke #181A1F - Panels: sidebar, terminal, inactive tabs etc.
Shuttle Gray #5F6672 - Text Subtle: line numbers, muted items
Cadet Blue #A9B2C3 - Text
Iron #D4D7D9 - Text Active: active tab, active line number, active list text etc.
Cadet Blue (1A opacity) #A9B2C31A - Highlight: ui flourishes: whitespace, indent guide, ruler, line highlight
Cadet Blue (33 opacity) #A9B2C333 - Highlight Active: active indent guide, selection, search match
Iron #D4D7D9 - Highlight Border: search match borders
Olivine #98C379 - Git Untracked
Whiskey #D19A66 - Git Modified
Sunglo #E06C75 - Git Deleted
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 :)
MIT
The themes are created using a generator. There are two main files for this:
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.
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.
Install the dependencies using Yarn:
yarn
Then compile the theme files to the themes
folder using:
yarn build-vscode