Themo

A collection of carefully crafted dark themes for Visual Studio Code.

Themo ships six themes. Some use translucent surfaces for a layered, glass-like look, and some are flat and solid. Settings further down this page show how to adjust contrast, italics, and transparency to taste.

Themes

Pick a theme with Ctrl+K Ctrl+T (Cmd+K Cmd+T on macOS).

Screenshots

Themo - Moon Wrap

Themo - Soft Hub

Themo - Chernobyl

Themo - Moth

Themo - Matrix

Themo - Extra

The same code file is used in every screenshot so the themes are easy to compare. A monospace font such as JetBrains Mono or Fira Code is recommended.

Installation

Install from the Extensions view (Ctrl+Shift+X) by searching for Themo, or from a .vsix file:

npx @vscode/vsce package
code --install-extension themo-0.0.1.vsix

To run from source:

git clone https://github.com/holyarsenic/Themo.git

Open the folder in VS Code and press F5 to start an Extension Development Host with the themes loaded.

To set a theme in your settings.json:

"workbench.colorTheme": "Themo - Soft Hub"

Available names: Themo - Moon Wrap, Themo - Soft Hub, Themo - Chernobyl, Themo - Moth, Themo - Matrix, Themo - Extra.

Customization Settings Examples

The examples below use Themo - Soft Hub as the theme key. Replace it with the name of the theme you use.

Disabling Italics

Paste this into your settings.json to disable italics.

"editor.tokenColorCustomizations": {
    "[Themo - Soft Hub]": {
        "textMateRules": [{
            "scope": [
                "comment",
                "punctuation.definition.comment",
                "variable.language",
                "entity.name.method.js",
                "text.html.basic entity.other.attribute-name.html",
                "text.html.basic entity.other.attribute-name",
                "tag.decorator.js entity.name.tag.js",
                "tag.decorator.js punctuation.definition.tag.js",
                "source.js constant.other.object.key.js string.unquoted.label.js",
                "markup.italic"
            ],
            "settings": {
                "fontStyle": ""
            }
        }]
    }
}

Brightening Comments

Comments are intentionally quiet. To raise their contrast, add this to your settings.json:

"editor.tokenColorCustomizations": {
    "[Themo - Soft Hub]": {
        "comments": "#909dab"
    }
}

Higher Contrast Text (Soft Hub)

Soft Hub keeps many interface elements at lower contrast so they do not distract. The settings below brighten the most common ones and can be used as a starting point.

"workbench.colorCustomizations": {
    "[Themo - Soft Hub]": {
        "foreground": "#adbac7",
        "sideBar.foreground": "#adbac7",
        "tab.inactiveForeground": "#adbac7",
        "tab.activeForeground": "#cdd9e5",
        "statusBar.foreground": "#cdd9e5",
        "breadcrumb.foreground": "#adbac7",
        "breadcrumb.focusForeground": "#cdd9e5",
        "activityBar.inactiveForeground": "#adbac7",
        "panelTitle.inactiveForeground": "#adbac7"
    }
}

Solid Surfaces for Translucent Themes

Chernobyl, Moth, and Matrix use semi-transparent backgrounds. If you prefer fully opaque surfaces, add the matching block below.

Chernobyl:

"workbench.colorCustomizations": {
    "[Themo - Chernobyl]": {
        "editor.background": "#1b2425",
        "sideBar.background": "#161d1e",
        "activityBar.background": "#101516",
        "titleBar.activeBackground": "#101516",
        "statusBar.background": "#101516",
        "panel.background": "#141a1b"
    }
}

Moth:

"workbench.colorCustomizations": {
    "[Themo - Moth]": {
        "editor.background": "#26272a",
        "sideBar.background": "#1e1f21",
        "activityBar.background": "#161718",
        "titleBar.activeBackground": "#161718",
        "statusBar.background": "#161718",
        "panel.background": "#1c1d1f"
    }
}

Matrix:

"workbench.colorCustomizations": {
    "[Themo - Matrix]": {
        "editor.background": "#050a07",
        "sideBar.background": "#040806",
        "activityBar.background": "#030604",
        "titleBar.activeBackground": "#030604",
        "statusBar.background": "#030604",
        "panel.background": "#040806"
    }
}

Blur Behind the Window

A theme cannot blur the desktop behind VS Code by itself, because that needs window-level transparency from the operating system. If you want that effect, a window-transparency extension such as Vibrancy Continued can provide it with the translucent themes. It is optional and not required to use Themo.

Color Palette

Hex values for each theme. Translucent backgrounds are listed as their base color without the alpha channel.

Themo - Soft Hub

Themo - Chernobyl

Themo - Moth

Themo - Matrix

Feedback

Found a color that looks off, or want to suggest a change? Open an issue or send a pull request at github.com/holyarsenic/Themo.

Enjoy!