Skip to main content
Coding Theme

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • editor.background#1e1e1e
  • editor.findMatchBackground#000c9487
  • editor.findMatchHighlightBackground#f2ff0052
  • editor.selectionBackground#000
  • editor.selectionHighlightBackground#3cff0042
  • editor.wordHighlightBackground#e900c62c
  • editor.wordHighlightStrongBackground#1900ff85
  • editorBracketHighlight.foreground1#ffffff80
  • editorBracketHighlight.foreground2#ffffff80
  • editorBracketHighlight.foreground3#ffffff80
  • editorBracketHighlight.foreground4#ffffff80
  • editorBracketHighlight.foreground5#ffffff80
  • editorBracketHighlight.foreground6#ffffff80
  • editorCursor.foreground#fff
  • editorLineNumber.activeForeground#fff
  • editorLineNumber.foreground#676867
  • statusBar.background#005f5f
  • statusBar.debuggingBackground#005f5f
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#005f5f
  • tab.activeBackground#00000090

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.#525252
variable.other.constant#3b8cb8
string, punctuation.definition.string.begin, punctuation.definition.string.end#9AA83A
keyword, storage.type, storage.modifier#9872A2
variable.parameter#078448beitalic
entity.name.tag.html#569CD6
invalid.illegal.character-not-allowed-here.html#F44747
keyword.operator.logical, keyword.operator.optional#676867
keyword.operator.ternary#676867
keyword.operator.relational#676867
keyword.operator.comparison#676867
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#676867
variable.parameter, entity.name.type.parameter#078448beitalic
constant.numeric#408080
keyword.operator.arithmetic#F92672
variable#9CDCFE
meta.function, entity.name.function, entity.name.method#d97706
punctuation, support.type.property-name.css, keyword.other.unit, storage.type.function.arrow#676867
support.type.property-name.json#9CDCFE
meta.type.annotation, support.type.primitive#4EC9B0
entity.name.type.enum#ffc85a
variable.other.enummember#ffc85a
entity.name.type.class#4EC9B0italic
entity.name.type.interface#53b20b
entity.name.type#53b20b
support.type#4EC9B0
variable.language.this, keyword.operator.spread, keyword.operator.rest#C7444A
entity.name.tag.custom.css#569CD6
entity.other.keyframe-offset.css#9872A2
entity.other.attribute-name.class.css, meta.property-list.css, entity.name.tag.css, entity.other.attribute-name.html.vue, entity.other.attribute-name.html, punctuation.separator.key-value.html, punctuation.definition.string.begin.html.vue, punctuation.definition.string.end.html.vue, punctuation.attribute-shorthand.event.html.vue, punctuation.attribute-shorthand.bind.html.vue, meta.attribute.directive.vue#D0B344
support.constant.property-value.css#C7444A
constant.other.color.rgb-value.hex.css#8080FF
meta.selector.css#D7BA7D
entity.other.keyframe-offset.percentage.css#408080
entity.name.tag.template.html.vue, entity.name.tag.script.html.vue, entity.name.tag.style.html.vue#569CD6
punctuation.accessor, punctuation.terminator.statement, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.typeparameters.begin, punctuation.definition.typeparameters.end, meta.brace.round, meta.type.annotation, punctuation.definition.block, keyword.operator.type.annotation, punctuation.separator.comma, punctuation.separator.parameter, keyword.operator.assignment, meta.brace.square, punctuation.definition.interpolation.begin.html.vue, punctuation.definition.interpolation.end.html.vue, punctuation.definition.binding-pattern.object.js, punctuation.separator.key-value, punctuation.terminator.rule, punctuation.section.keyframes.begin.bracket.curly, punctuation.section.keyframes.end.bracket.curly, meta.property-value, punctuation.section.property-list.begin.bracket.curly, punctuation.section.property-list.end.bracket.curly, punctuation.definition.binding-pattern, keyword.operator.type.ts, punctuation.definition.section.case-statement, keyword.operator.bitwise, keyword.operator.type.tsx, punctuation.destructuring.tsx, punctuation.separator.label, punctuation.separator.label.ts#676867
punctuation.definition.string.template.begin, punctuation.definition.string.template.end#9AA83A
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#569CD6
constant.language.boolean.false, constant.language.boolean.true, constant.language.json.comments, constant.language.null, constant.language.undefined, constant.language.nan, constant.language.infinity#408080
punctuation.definition.heading.markdown, punctuation.definition.list, punctuation.definition.quote, punctuation.definition.bold.markdown, punctuation.definition.link.title.begin, punctuation.definition.link.title.end, punctuation.definition.metadata, punctuation.definition.markdown, fenced_code.block.language.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown#569CD6bold
markup.underline.link#569CD6italic