gaearon / subliminal

An opinionated minimalistic VS Code theme for JavaScript

Subliminal

Subliminal is an opinionated minimalistic VS Code theme that is very loosely based on Oceanic Next and Spacegray. See Credits for a detailed lineage.

Note: support for languages other than JavaScript is pretty much non-existent right now. Pull requests to fix this are welcome.

Disclaimer

I’m just sharing what works for me. I’m an engineer and not a graphic designer.

This theme is intentionally focused on a small subset of VS Code features that I use (basic editing, file tree, and debugger) and may not work well in other scenarios. However, I’ll happily take changes that respect the design intention but fix rough edges in parts I didn’t polish (e.g. viewing diffs, terminal, or search).

The theme is intentionally very opinionated and we may disagree about some of its choices. Philosophically, it owes some inspiration to Alabaster and White. I love colors though.

The config is pretty hacky and was only tested with Sublime Babel syntax. The theme is probably horribly broken with other languages (even JSON or CSS). Pull requests to fix this that adhere to the theme’s JS look and feel are welcome.

More Than a Theme

To me, this isn’t just a theme, but an attempt to recreate a more minimalistic experience that I’m used to from Sublime Text. I suggest using these settings for the intended effect:

{
    // ...
    "editor.fontSize": 18,
    "editor.folding": false,
    "editor.hideCursorInOverviewRuler": true,
    "editor.lineHeight": 26,
    "editor.lineNumbers": "off",
    "editor.matchBrackets": false,
    "editor.minimap.enabled": false,
    "editor.occurrencesHighlight": false,
    "editor.overviewRulerBorder": false,
    "editor.renderIndentGuides": false,
    "editor.renderLineHighlight": "none",
    "editor.scrollbar.horizontal": "hidden",
    "explorer.openEditors.visible": 0,
    "window.zoomLevel": 0,
    "workbench.activityBar.visible": false,
    "workbench.colorTheme": "Subliminal",
    "workbench.iconTheme": null,
    "workbench.editor.showIcons": false,
    "workbench.statusBar.visible": false,
}

Note this will hide Status Bar and Activity Bar because I don’t use them.
I suggest to memorize these shortcuts instead:

• shift + command + E for Explorer (file tree).
• shift + command + D for Debugger.
• command + B to show and hide the left pane.

Since we turned off Code’s default matching brackets highlighting, install this extension that does it better.

Furthermore, to reduce the noise I prefer to turn off some features:

{
    // ...
    "javascript.validate.enable": false,
    "editor.suggestOnTriggerCharacters": false,
    "editor.parameterHints": false,
    "editor.quickSuggestions": false,
    "editor.hover": false,
}

Your mileage may vary.

Going a Step Further

If you don’t mind potentially breaking your VS Code setup beyond the point of recovery, I recommend trying this extension with the following custom CSS:

.title-actions > .monaco-toolbar > .monaco-action-bar > .actions-container > .action-item > .action-label.icon.explorer-action {
  display: none !important;
}
.editor-actions > .monaco-toolbar > .monaco-action-bar {
  display: none !important;
}

This will remove the icon buttons on panels.

You may notice VS Code isn’t very happy about you overriding its CSS. You can remove the warning from title bar with this extension.

Don’t say I didn’t warn you everything might break.

Credits

Forked from this theme which is itself based on these two themes. Most of the original credit goes to the Oceanic Next color scheme by Dmitri Voronianski. I ended up changing most colors and their mappings quite significantly though.

Philosophically, it owes some inspiration to Alabaster and White. I love colors though.

The UI chrome styling is inspired by Spacegray by Gadzhi Kharkharov although my theme is much more sloppy. If you can make it less sloppy and more in the spirit of the original, send a PR.

License

MIT

subliminal's Issues

Light version?

I really like the theme but prefer light themes when working during the day, how can I make it happen?

Support ts files

Would love to see ts support for this

Maybe de-prioritize punctuation?

Take a look at "Plastic": https://github.com/will-stone/plastic/blob/master/themes/plastic-theme-punctuation.json
I think it's very nice to make dots, brackets etc less noisy, as they're less important. Fits the spirit of this theme.

Italic Variant?

Hi Dan, I love your theme. Would it be possible to release a italic variant for fonts like Operator Mono, Dank Mono etc?

PS: Ah okay you already have that, but unfortunately it seems it is not working properly

Low contrast text in VS Code's integrated terminal prompt.

Reporting in case others have this issue:

VSCode's integrated terminal respects my zsh terminal theme, which is awesome. When I installed Subliminal theme the terminal prompt's text didn't have sufficiently high contrast.

Adding this to user settings smoothed it out:

  "workbench.colorCustomizations": {
    "terminal.ansiBlack": "#222222",
  },

Thanks!

Arrow functions: Parameter list line breaks break highlight

A line break in the parameter list of an arrow function definition seems to break the highlighting of the variable name the function is assigned to:

Not sure if that's a general issue with VSCode themes, but that's the first time I noticed it.