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#ffffff
  • editor.foreground#272727
  • editor.inactiveSelectionBackground#ededed
  • editor.lineHighlightBackground#00bbff15
  • editor.selectionBackground#c2e8ff
  • editor.selectionHighlightBackground#ffffff00
  • editor.selectionHighlightBorder#222222
  • editorCursor.foreground#00bbff
  • editorLineNumber.activeForeground#333
  • editorLineNumber.foreground#aaa
  • editorSuggestWidget.focusHighlightForeground#6700b9
  • editorSuggestWidget.highlightForeground#7653c1
  • editorSuggestWidget.selectedBackground#b8e9ff
  • editorSuggestWidget.selectedForeground#7653c1
  • editorWhitespace.foreground#e0e0e0
  • list.focusHighlightForeground#fff
  • quickInputList.focusBackground#3976ff
  • quickInputList.focusForeground#fff
  • selection.background#c2e8ff
  • terminal.ansiBlack#222222
  • terminal.ansiBlue#0099d0
  • terminal.ansiBrightBlack#222222
  • terminal.ansiBrightBlue#0099d0
  • terminal.ansiBrightCyan#00a6b2
  • terminal.ansiBrightGreen#5b9d4e
  • terminal.ansiBrightMagenta#66008d
  • terminal.ansiBrightRed#e45024
  • terminal.ansiBrightWhite#777777
  • terminal.ansiBrightYellow#f9ae02
  • terminal.ansiCyan#00a6b2
  • terminal.ansiGreen#5b9d4e
  • terminal.ansiMagenta#66008d
  • terminal.ansiRed#e45024
  • terminal.ansiWhite#777777
  • terminal.ansiYellow#f9ae02
  • terminal.foreground#222222
  • terminal.selectionBackground#c1ddff
  • terminalCursor.foreground#1998e0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.ruby punctuation.separator.key-value#4c8fc7
markup.inserted.diff, markup.inserted.git-commit, punctuation.definition.inserted.diff, punctuation.definition.to-file.diff, meta.diff.header.to-file#61862f
markup.deleted.diff, punctuation.definition.deleted.diff, meta.diff.header.from-file, punctuation.definition.from-file.diff, markup.deleted.git-commit#d4420dc2
meta.diff.header.git, meta.diff.range, punctuation.definition.range.diff#4c8fc7
meta.diff.index.git, markup.changed.git-commit#bc670f
comment, comment punctuation#adadad
comment.block.preprocessor#adadad
comment.documentation, comment.block.documentation#bc670f
invalid.deprecateditalic underline
keyword.operator#626fc9
keyword, storage#61862f
storage.type, support.type#6700b9
constant.language, support.constant, variable.language#7653c1
variable, support.variable, meta.at-rule.include.scss, punctuation.definition.variable.less#4c8fc7
entity.name.function, support.function, entity#61862f
entity.name.type, entity.other.inherited-class, support.class#3a1d72
entity.name.exception#f93232
entity.name.section
constant.numeric, constant#7653c1
constant.character, string, meta.attribute-selector.scss#bc670f
string punctuation#e69a4c
constant.character.escapebold
string.regexp#699d36
markup.italicitalic
markup.error#f9f2ce
markup.output, markup.raw#7f7f7f
markup.prompt#555555
markup.headingbold
markup.boldbold
markup.traceback#f93232
markup.underlineunderline
meta.tag.sgml.doctype#7f7f7f
entity.name.tag#2f6f9f
meta.tag string punctuation#5fafef
punctuation.definition.tag#4f9fcf
entity.other.attribute-name#4c8fc7
meta.tag string.quoted, meta.tag string.quoted constant.character.entity#d44950
text.pug meta.tag string.quoted#bc670f
entity.name.tag.pug#61862f
entity.other.attribute-name.tag.pug#2f6f9f
entity.name.function.pug#9c27b0
entity.other.attribute-name.class.pug#4f9fcf
text.pug variable.other.readwrite.js, variable.control.import.include.pug#268bd2
string.comment.buffered.block.pug#777
meta.property-name, support.type.property-name#d4430d
meta.selector, meta.selector entity, meta.selector entity punctuation#3a77bf
entity.other.attribute-name, entity.other.attribute-name.parent-selector-suffix.css punctuation.definition.entity.css#4f9fcf
constant.other.color.rgb-value.hex.css, constant.other.color.rgb-value.hex.css punctuation.definition.constant.css#43a202
entity.name.tag.css, entity.name.tag.less#2f6f9f
meta.property-value constant.numeric, meta.property-value constant, meta.property-value keyword, keyword.other.unit.px.css, keyword.other.unit.s.css, constant.numeric.css, meta.definition.variable.scss keyword.other.unit.percentage.css, constant.numeric.less, constant.other.color.rgb-value.less punctuation.definition.constant.less#43a202
entity.other.attribute-name.class.css punctuation.definition.entity.css, entity.other.attribute-name.class.less punctuation.definition.entity.less#4c8fc7
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-class.less#4c8fc7
punctuation.definition.entity.css, punctuation.definition.entity.less#4c8fc7
support.function.misc.css, support.function.misc.scss, support.function.transform.css, support.function.transform.less, support.function.gradient.css, support.function.gradient.less, entity.name.function.scss, support.function.color.less#61862f
punctuation.definition.keyword.css, punctuation.definition.keyword.scss, punctuation.definition.keyword.less#61862f
keyword.other.important.css, keyword.other.important.scss, keyword.other.important.less, keyword.other.important.less punctuation.separator.less#d33682
meta.at-rule.extend.scss, meta.at-rule.extend.scss support.constant.mathematical-symbols.scss#4f9fcf
source.css.scss entity.other.attribute-name.placeholder.css punctuation.definition.entity.css#4f9fcf
meta.function-call.less#7653c1
keyword.other.pseudo-class.less#7653c1
meta.embedded.line#272727
soda by Nando Vieira - VS Code Theme