Skip to content
| Marketplace
Sign in
Visual Studio Code>Themes>Vue Focus ModeNew to Visual Studio Code? Get it now.
Vue Focus Mode

Vue Focus Mode

Bora Kucukkara

|
380 installs
| (0) | Free
Focus mode theme for vue js
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

vue-focus-mode Theme

You can override colors. Add these lines into your user > settings.json

    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": "variable.other.object.js, variable.other.object.property.js, variable.other.property.js",
                "settings": {"foreground": "#d1bb98"}
            },
            {
                "scope": "entity.other.attribute-name, punctuation.separator.key-value.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html",
                "settings": {"foreground": "#629f95"}
            },
            {
                "scope": "punctuation.definition.string",
                "settings": {"foreground": "#00CC77"}
            },
            {
                "scope": "entity.name.tag, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html",
                "settings": {"foreground": "#8f796c", "fontStyle": "italic"}
            },
            {
                "scope": "punctuation.attribute-shorthand.bind.html.vue, variable.other.readwrite.alias.js, keyword.operator.spread.js, punctuation.attribute-shorthand.event.html.vue, keyword.operator.comparison.ts, meta.attribute.directive.vue, entity.other.attribute-name.html.vue, keyword.control.conditional.vue, keyword.control.loop.vue, punctuation.definition.string.begin.html.vue, punctuation.definition.string.end.html.vue, punctuation.separator.key-value.html.vue",
                "settings": {"foreground": "#00CC77","fontStyle": "bold"}
            },
            {
                "scope": "keyword.control.import.js, keyword.control.export.js, keyword.control.from.js, keyword.control.default.js",
                "settings": {"foreground": "#618476"}
            },
            {
                "scope": "keyword.control.conditional.js, keyword.control.flow.js, storage.modifier.async.js",
                "settings": {"foreground": "#00CC77"}
            },
            {
                "scope": "meta.object-literal.key.js",
                "settings": {"foreground": "#e8c082"}
            },
            {
                "scope": "variable.language.this.js",
                "settings": {"foreground": "#e97941"}
            },
            {
                "scope": "punctuation.definition.interpolation.begin.html.vue, punctuation.definition.interpolation.end.html.vue,",
                "settings": {"fontStyle": "bold"}
            }
        ]
    }
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft