Spectabile Material Theme

A clean, focused color theme for VS Code, available in dark and light variants. Built on the standard VS Code theme structure: no bloat, no unnecessary files, just what the engine needs. Semantic highlighting is enabled by default, with hand-tuned token colors for PHP, JavaScript, CSS, TypeScript, Python, and more. Every color and token is fully override-friendly: tweak anything directly in your settings.json without touching the theme file.

Screenshots

Spectabile Material Dark

Spectabile Material Light

Try it live in VS Code for the Web

Recommended Fonts

The theme is designed and tested with JetBrains Mono NF. Font weight matters with monospace themes:

Recommended Icon Theme

Material Icon Theme by Philipp Kief pairs perfectly with both variants.

Color Palette

Dark — Spectabile Material Dark

Light — Spectabile Material Light

Language Support

JavaScript · TypeScript · PHP · Blade · CSS · HTML · JSON · YAML · Markdown · Python · C# and more

Theme Overrides

VS Code lets you override any theme color or syntax rule without touching the theme file. Add these blocks to your settings.json (File → Preferences → Settings → Open Settings JSON).

UI color overrides

"workbench.colorCustomizations": {
    "[Spectabile Material Dark]": {
        "tab.activeBorder": "#47847e",
        // "editorIndentGuide.background1": "#3a3a3a",
        // "editorIndentGuide.activeBackground1": "#4a4a4a",
        "foreground": "#cccccc",
        "descriptionForeground": "#cccccc"
    },
    "[Spectabile Material Light]": {
        // "tab.activeBorder": "#cccccc",
        // "editorIndentGuide.background1": "#eeeeee",
        // "editorIndentGuide.activeBackground1": "#ccc"
    }
},

→ Full list of UI color keys: VS Code Theme Color Reference

Syntax token overrides

"editor.tokenColorCustomizations": {
    "[Spectabile Material Dark]": {
        "textMateRules": [
            {
                "scope": "comment",
                "settings": {
                    "foreground": "#597480",
                    "fontStyle": "italic"
                }
            },
            {
                "scope": "keyword.other.phpdoc.php",
                "settings": {
                    "foreground": "#6c8692",
                    "fontStyle": "italic"
                }
            },
            {
                "scope": "meta.other.type.phpdoc.php keyword.other.type.php",
                "settings": {
                    "foreground": "#e8b94b",
                    "fontStyle": "italic"
                }
            }
        ]
    },
    "[Spectabile Material Light]": {
        "textMateRules": [
            {
                "scope": "comment",
                "settings": {
                    "foreground": "#b5c8d3",
                    "fontStyle": "italic"
                }
            },
            {
                "scope": "comment punctuation.definition.comment, string.quoted.docstring",
                "settings": {
                    "foreground": "#b5c8d3",
                    "fontStyle": "italic"
                }
            }
        ]
    }
},

How to find scope names

The hardest part of writing overrides is knowing the exact scope name for the token you want to target. Two ways to find them:

1. Token Inspector — open the Command Palette (Ctrl+Shift+P) and run Developer: Inspect Editor Tokens and Scopes. Click on any token in your editor. The panel shows its TextMate scope stack and semantic token type — copy either directly into your override.

2. Reference docs:

   • UI color keys → VS Code Theme Color Reference
   • Customizing syntax colors → VS Code: Customizing a Color Theme
   • TextMate scope naming conventions → TextMate Language Grammars

Installation

Search for Spectabile Material Theme in the VS Code Marketplace, or install manually via Extensions → Install from VSIX….

After installing, select a variant via Preferences → Color Theme:

• Spectabile Material Dark
• Spectabile Material Light

Origin

Material Theme was one of the most popular VS Code themes. In early 2025 it was caught up in a security controversy and has since been officially deprecated. Spectabile Material Theme brings that palette back: the same oceanic palette and teal accent DNA, rebuilt from scratch and kept deliberately clean.

Contributing

No issue tracker. GitHub Issues and Discussions are disabled. This theme is free and open source, but it is a personal project - built for personal use and shared as-is. It is not community-maintained and there is no support channel. Pull requests with color fixes or theme improvements are welcome.

License

MIT