SS-Octopus Theme

A Dark theme for Visual Studio Code.

Color Palette

Supports

• Typescript
• ES2015+
• Node
• HTML
• SCSS
• CSS
• JSON
• Dockerfile
• Ruby
• Go
• Nginx
• yml

SS-Octopus was written by me, for me. As such, I don't expect this theme to work for everybody or, perhaps, anybody.

Examples

Javascript

Angular

Typescript

ES2015+

Node

SCSS

Ruby

Go

JSON

YML

Installation

1. Go to Extensions
2. Search for ss-octopus
3. Install
4. Restart Visual Studio Code (or click Reload window)
5. Go to Preferences → Color Theme and choose SS-Octopus

Enjoy!

User Settings

As of March 2020, some settings within VSCode are starting to conflict with the colors provided by this theme:

Incorrect Color

Correct Color

Good news, there is a simple fix! In order to get back to the correct colors, a new setting must be added to your settings.json file:

"editor.semanticHighlighting.enabled": false

Selection Styles

Coloring a selection in VSCode is tricky. I've done my best to make the selection styles work with the theme, however, it's not perfect. If you wish to make some tweaks of your own, feel free to modify the following workbench.colorCustomizations within your settings.json file.

"workbench.colorCustomizations": {
  "editor.findMatchBackground": "#ffffff01",
  "editor.findMatchBorder": "#9735c566",
  "editor.findMatchHighlightBackground": "#4e315355",
  "editor.findMatchHighlightBorder": "#f700ff22",
  "editor.selectionBackground": "#0b5827aa",
  "editor.selectionHighlightBackground": "#0b582777",
  "editor.selectionHighlightBorder": "#5aca7699",
  "editor.wordHighlightBackground": "#00ffff11",
  "editor.wordHighlightBorder": "#5aca7699",
  "editor.wordHighlightStrongBackground": "#00ffff40",
  "editor.wordHighlightStrongBorder": "#5aca7699"
}

The Squishy Parts

Motivation

I wanted to make a theme that satisfied some of the pain points I've run into with existing themes. The goals for SS-Octopus are:

• Support the languages I frequently work with
• Highlight mostly the important parts of the code
• Allow for easy updating by organizing theme by color, not by scope

Why ss-octopus

Two (bad) reasons:

1. For some reason I like to name some of my projects as if they were ships, prefixed with ss and named after some creature of the sea
2. I previously wrote an unpublished theme for the Atom editor that had the same name

Essentially, SS-Octopus is a nonsensical name that makes me giggle softly when I see it because I know it doesn't mean anything.

Inspirations

• This whole adventure started after I read the Motivation section of the Alabaster Theme readme.
• Example files from Night Owl
  • angular.component.ts
  • react.js
  • ruby.rb
  • yml.yml

License

MIT License